Image Optimization 101
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
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
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
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
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
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
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.webmReplacing animated GIF <img> elements with <video>
<img> elements with <video>Animated GIFs have three key traits:
They play automatically.
They loop continuously (usually, but it is possible to prevent looping).
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