# 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](https://en.wikipedia.org/wiki/Vector_graphics) use lines, points, and polygons to represent an image.
* [Raster graphics](https://en.wikipedia.org/wiki/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
```
```
### 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
{% hint style="info" %}
**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!
{% endhint %}
## 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
| **Format** | **Transparency** | **Animation** | **Browser** |
| --------------------------------------------------------------- | ---------------- | ------------- | ---------------------- |
| [GIF](http://en.wikipedia.org/wiki/Graphics_Interchange_Format) | Yes | Yes | All |
| [PNG](http://en.wikipedia.org/wiki/Portable_Network_Graphics) | Yes | No | All |
| [JPEG](http://en.wikipedia.org/wiki/JPEG) | No | No | All |
| [JPEG XR](http://en.wikipedia.org/wiki/JPEG_XR) | Yes | Yes | IE |
| [WebP](http://en.wikipedia.org/wiki/WebP) | 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**
### 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.webm
```
### Replacing animated GIF `` elements with `