Image Optimization
This page contains excerpts from the Image Optimization article on Google Developers web site.
Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space.
Image optimization is the process of is the process of eliminating, replacing or decreasing the size of an image while still maintaining acceptable quality and visual effect of the site.
Eliminating and Replacing Images
In some situations, it is possible to eliminate an image or replace it by using a combination of HTML, CSS, and JavaScript. Some techniques include using CSS effects (gradients and shadows), web animations and web fonts in place of images. So it is important to ask yourself if each image is truly required or if can be replaces using a existing web technology.
Vector vs. Raster Images
A vector graphic, like a Scalable Vector Graphics (SVG), is created using lines, points and polygons to represent an image. Vector formats are ideally suited for images that consist of simple geometric shapes (for example, logos, text, and icons). They are also resolution-independent, which means they can be scaled without any lose of quality, which makes them an ideal format for the high-resolution screens and assets that need to be displayed at varying sizes. Vector do not work well complex images like a photo.
A raster graphic is a series of pixels placed in a rectangular grid. Common raster image formats include GIF, PNG, JPEG, and WebP. Raster images are not resolution independent and will lose quality as the image is scaled up or zoomed. Raster images work best used with complex images like photos.
Optimizing Vector Images
The most widely support and used vector format is Scalable Vector Graphics (SVG), which is an XML-based image format for two-dimensional graphics: we can embed the SVG markup directly on the page, or as an external resource.
While it is also possible to create a SVG by hand using a text editor, most vector-based drawing software, like Adobe Illustrator, will also import and export to SVG. When exporting an SVG from one of these applications, the SVG can contain a lot unnecessary metadata. So, it is always a good idea to minify your SVG files by selecting the Minify option or using a external minifier, like Nano.
Optimizing Raster Images
Because a raster image is a 2-dimensional grid of individual pixels, the more pixels an image contains, the larger the file size will be. So the first step to optimizing a raster image is to choose a correct resolution.
High Resolution Screens
In the world of the high-resolution screens of various sizes it can be difficult know what the correct resolution of an image should be, and often it will not be only one answer. This is where Response Images come in. But before any of that, it is important to under how High-Resolution screens affect pixels.
When we talk about image pixels, we need to distinguish between different kinds of pixels: CSS pixels and device pixels. A single CSS pixel may contain multiple device pixels - for example, a single CSS pixel may correspond directly to a single device pixel, or may be backed by multiple device pixels. This can pose a problem for raster images as the resolution of the image will need to increase to maintain the quality, thus increasing the overall size. For example, a screen that display that has a 2x screen resolution will require an image that is 4 times the size of the a standard screen, a 3x screen, 9 times the size. Put another way, a image that is 100px by 100px will need to be 900px by 900px to appear at the same quality.
Lossless vs Lossy Image Compression
For certain types of data, such as source code for a page, or an executable file, it is critical that a compressor does not alter or lose any of the original information: a single missing or wrong bit of data could completely change the meaning of the contents of the file, or worse, break it entirely. For some other types of data, such as images, audio, and video, it may be perfectly acceptable to deliver an "approximate" representation of the original data.
In fact, due to how the eye works, we can often get away with discarding some information about each pixel in order to reduce the filesize of an image - for example, our eyes have different sensitivity to different colors, which means that we can use fewer bits to encode some colors. As a result, a typical image optimization pipeline consists of two high level steps:
- Image is processed with a "lossy" filter that eliminates some pixel data
- Image is processed with a "lossless" filter that compresses the pixel data
The first step is optional, and the exact algorithm will depend on the particular image format, but it is important to understand that any image can undergo a lossy compression step to reduce its size. In fact, the difference between various image formats, such as GIF, PNG, JPEG, and others, is in the combination of the specific algorithms they use (or omit) when applying the lossy and lossless steps.
Raster Image Formats
In addition to different lossy and lossless compression algorithms, different image formats support different features such as animation and transparency (alpha) channels. As a result, the choice of the "right format" for a particular image is a combination of desired visual results and functional requirements.
| Format | Transparency | Animation | Support |
|---|---|---|---|
| GIF | Yes | Yes | All |
| PNG | Yes | No | All |
| JPEG | No | No | All |
| JPEG XR | Yes | Yes | IE, Edge |
| WebP | Yes | Yes | Chrome, Opera, Android, Edge, Firefox(soon) |
There are three universally supported image formats: GIF, PNG, and JPEG. In addition to these formats, some browsers also support newer formats such as WebP and JPEG XR, which offer better overall compression and more features. So, which format should you use?
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. As a result, GIF is the right answer only when animation is required.
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.
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.
Finally, once you've determined the optimal image format and its settings for each of your assets, consider adding an additional variant encoded in WebP and JPEG XR. Both of these formats are new, and unfortunately are not (yet) universally supported by all browsers, but they can nonetheless provide significant savings for newer clients - for example, on average, WebP delivers a 30% filesize decrease over a comparable JPEG image.