Image Optimization 101

All the shit we should do

How can I tell if my images need to be optimized?

Use LightHouse audits in ChromeDev Tools

Eliminating and replacing images

  • Eliminate unnecessary image resources

  • Leverage CSS3 effects where possible

  • Use web fonts instead of encoding text in images

Some alternative technologies:

  • CSS effects (gradients, shadows, etc.) and CSS animations can be used to produce resolution-independent assets that always look sharp at every resolution and zoom level, often at a fraction of the bytes required by an image file.

  • Web fonts enable use of beautiful typefaces while preserving the ability to select, search, and resize text - a significant improvement in usability.

Delivering scaled image assets

  • Delivering scaled assets is one of the simplest and most effective optimizations

  • Pay close attention to large assets as they result in high overhead

  • Reduce the number of unnecessary pixels by scaling your images to their display size

High overhead

Choose between Vector and Raster images

  • Vector images are ideal for images that consist of geometric shapes

  • Raster images should be used for complex scenes with lots of irregular shapes and details

Comparison zoomed-in image of 2 format
  • Vector graphics use lines, points, and polygons to represent an image.

  • Raster graphics represent an image by encoding the individual values of each pixel within a rectangular grid.

Optimizing vector images

  • SVG is an XML-based image format

  • SVG files should be minified to reduce their size

  • SVG files should be compressed with GZIP

Sample SVG file


<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

Optimizing raster images

  • A raster image is a grid of pixels

  • Each pixel encodes color and transparency information

  • Image compressors use a variety of techniques to reduce the number of required bits per pixel to reduce file size of the image

Note: Left to right (PNG): 32-bit (16M colors), 7-bit (128 colors), 5-bit (32 colors). Complex scenes with gradual color transitions (gradients, sky, etc.) require larger color palettes to avoid visual artifacts such as the pixelated sky in the 5-bit asset. On the other hand, if the image only uses a few colors, then a large palette is simply wasting precious bits!

Important factors when optimizing images

Lossless vs lossy image compression

  • Due to how our eyes work, images are great candidates for lossy compression

  • Image optimization is a function of lossy and lossless compression

  • Differences in image formats are due to the difference in how and which lossy and lossless algorithms are used to optimize the image

  • There is no single best format or "quality setting" for all images: each combination of particular compressor and image contents produce a unique output

Save for web in Photoshop

Selecting the right image format

  • Start by selecting the right universal format: GIF, PNG, JPEG

  • Experiment and select the best settings for each format: quality, palette size, etc.

  • Consider adding WebP and JPEG XR assets for modern clients

Format

Transparency

Animation

Browser

GIF

Yes

Yes

All

Yes

No

All

No

No

All

Yes

Yes

IE

Yes

Yes

Chrome, Opera, Android

Selection chart

Explanation

1. Do you need animation? If so, GIF is the only universal choice.

  • GIF limits the color palette to at most 256 colors, which makes it a poor choice for most images. Further, PNG-8 delivers better compression for images with a small palette.

  • Should use mp4 or webm file in shape of GIF

2. Do you need to preserve fine detail with highest resolution? Use PNG.

  • PNG does not apply any lossy compression algorithms beyond the choice of the size of the color palette. As a result, it will produce the highest quality image, but at a cost of significantly higher filesize than other formats. Use judiciously.

  • If the image asset contains imagery composed of geometric shapes, consider converting it to a vector (SVG) format!

  • If the image asset contains text, stop and reconsider. Text in images is not selectable, searchable, or "zoomable". If you need to convey a custom look (for branding or other reasons), use a web font instead.

3. Are you optimizing a photo, screenshot, or a similar image asset? Use JPEG.

  • JPEG uses a combination of lossy and lossless optimization to reduce filesize of the image asset. Try several JPEG quality levels to find the best quality vs. filesize tradeoff for your asset.

  • Don't use JPEG when saving image contains text. Use PNG instead. JPEG artifact is horrible for text image

Key settings when optimizing images

  • Select progressive mode (JPEG) or interlaced mode (PNG) when saving/optimizing image

  • Strip EXIF data

  • Choose chroma subsampling at 4:2:0 or 4:2:2

  • JPEG is good for most case, EXCEPT image contains text

Choose chroma subsampling at 4:2:0 or 4:2:2

Replace Animated GIFs with Video

Converting gif to mp4 or webm

Sample command when use ffmpeg for converting:


ffmpeg -i input.gif output.mp4
ffmpeg -i input.gif -b:v 0 -crf 25 output.mp4
ffmpeg -i input.gif -c vp9 -b:v 0 -crf 41 output.webm

Replacing animated GIF <img> elements with <video>

Animated GIFs have three key traits:

  1. They play automatically.

  2. They loop continuously (usually, but it is possible to prevent looping).

  3. They're silent.

We can produce these behaviors with video:

<video autoplay loop muted playsinline></video>

There's more to this than simply emulating GIF behavior, though. Some of these attributes are required for autoplay to even work. For example, the muted attribute must be present for videos to autoplay, even if they don't contain an audio track. On iOS, the playsinline attribute is required for autoplay to work as well.

Last updated