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 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 it can be replaced using an 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. Vectors do not work well with 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 supported 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 writing code 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 of unnecessary metadata. So, it is always a good idea to minify your SVG files by selecting the Minify option or using an 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 to know what the correct resolution of an image should be, and often it will not be only one answer. This is where Responsive Images come in. But before any of that, it is important to understand 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 has a 2x screen resolution will require an image that is 4 times the size of the standard screen, a 3x screen resolution, 9 times the image size. Put another way, an image that is 100px by 100px will need to be 900px by 900px to appear at the same quality on a 3x screen resolution.
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 file-size 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.
| Abbreviation | Format | File extension(s) | Summary | Support |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | .apng | Good choice for lossless animation sequences (GIF is less performant). AVIF and WebP have better performance but less broad browser support. | Chrome, Edge, Firefox, Opera, Safari |
| AVIF | AV1 Image File Format | .avif | Good choice for both images and animated images due to high performance and royalty free image format. It offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency etc. Note that when using AVIF, you should include fallbacks to formats with better browser support (i.e. using the <picture> element). | Chrome, Opera, Firefox (still images only: animated images not implemented) |
| GIF | Graphics Interchange Format | .gif | Good choice for simple images and animations. Prefer PNG for lossless and indexed still images, and consider WebP, AVIF or APNG for animation sequences. | Chrome, Edge, Firefox, IE, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp | Good choice for lossy compression of still images (currently the most popular). Prefer PNG when more precise reproduction of the image is required, or WebP/AVIF if both better reproduction and higher compression are required. | Chrome, Edge, Firefox, IE, Opera, Safari |
| PNG | Portable Network Graphics | .png | PNG is preferred over JPEG for more precise reproduction of source images, or when transparency is needed. WebP/AVIF provide even better compression and reproduction, but browser support is more limited. | Chrome, Edge, Firefox, IE, Opera, Safari |
| SVG | Scalable Vector Graphics | .svg | Vector image format; ideal for user interface elements, icons, diagrams, etc., that must be drawn accurately at different sizes. | Chrome, Edge, Firefox, IE, Opera, Safari |
| WebP | Web Picture format | .webp | Excellent choice for both images and animated images. WebP offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency etc. AVIF offers slightly better compression, but is not quite as well-supported in browsers and does not support progressive rendering. | Chrome, Edge, Firefox, Opera, Safari |
Table from Image file type and format guide
There are three universally supported and most commonly used 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 a good 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 file-size 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 file-size of the image asset. Try several JPEG quality levels to find the best quality vs. file-size 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% file-size decrease over a comparable JPEG image.