A picture is worth a thousand words but 1,000 words is ~2kb and y’all are shipping 5MB of images. Just saying.
As tweeted by @Jammer_Volts
While not as resource intensive as streaming videos, image use on websites usually greatly contributes to bytes transferred. At the same time, they also greatly contribute to the appearance of the website.
Do you need this image?
Thus, when optimizing your website for environmental sustainability, you should reconsider your usage of images. For each image used, you should ask yourself, if it’s needed at all. Images carry information, but is that information important for your visitor? Or do you use the image merely for aesthetic purposes? Maybe it’s something in between. Maybe the information can be delivered as well with text.
Reduce dimensions
If you decide to use an image, you should also think about the image’s dimensions. If you double the widths and heights of an image, you get four times as much pixel, and thus about four times as much bytes transferred (an exception being SVGs, which don’t contain pixels). Thus, it really helps to keep image dimensions low. There is a trend to use bigger and bigger images on websites, and from a sustainable perspective, this is a bad practice.
Reduce image quality
JPEG and WebP are lossy image compression formats, i.e. the higher the compression, the more details of the image will be lost. But this will also save lots of transferred bytes. WordPress only supports JPEG without plugins. The default quality used to compress JPEG images is 82% (with 100% being the highest quality setting). With this setting, you will hardly notice any visual differences. But you can try to lower the quality even more. 75% could be a good start. Try the corresponding option in our WordPress plugin.
Use the correct image format
Also think about the image format used. The most common image formats nowadays are JPEG, PNG, SVG, and GIF. There is also the newer WebP image format. JPEG is optimized for photographic images and should be used for this purpose. PNG and GIF are optimized for images with less detail and less colors, e.g. graphs or charts. PNG is newer than GIF and should be favored. WebP images are smaller in bytes for images of the same quality, but not as widely supported by web browsers. WebP can be used for all types of images.
SVG is used for vector graphics. Contrary to the other formats, which store raster images, i.e. images which consists of small colored points (pixels) arranged in a raster (columns and rows), a vector graphic consists beside others of points, lines and curves, which allows to greatly reduce file size for graphics like graphs or simple drawings, e.g. icons. A downside is that they are more complicated to use and by default not supported by the Media Library in WordPress and mostly used by advanced users or theme and plugin authors.
Advice
- Try to reduce your image usage. They greatly contribute to your pages’ sizes.
- Use our website scanner to find problems with images on your site.
- Reduce the image dimensions. A doubled width and height means about four time as many bytes (an exception being vector graphic formats like SVG).
- Use JPEG (or WebP) for photographic pictures and PNG (or WebP) for graphics with less detail and colors, e.g. graphs or charts.
- Use our WordPress plugin‘s “Use WebP image format” recipe to use the WebP image format on your website, and the “Reduce JPEG quality” recipe to lower the default JPEG quality setting.