Image Optimization 101
Last updated
Last updated
Use LightHouse audits in ChromeDev Tools
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 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
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.
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
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!
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
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
Yes
Yes
All
Yes
No
All
No
No
All
Yes
Yes
IE
Yes
Yes
Chrome, Opera, Android
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
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
Sample command when use ffmpeg for converting:
<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:
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.
