Basic Guide to Web Image Optimization
On the modern competitive web, it is important to optimize the images that your website will show to the visitors, whether it be your new logo, a case study, or just a picture that you have taken with your phone and just want to share it with your audience.
Most of the data transfer for displaying a web page is used by images, so by optimizing image sizes a web page will load significantly faster. By reducing the number of bytes needed to display a page you can also reduce the time needed for a visitor to wait for the page to load. Web image optimization is very important in terms of search engines as well, which will prioritize faster loading websites especially on mobile devices.
This article aims to serve as a basic guide to web image optimization for anyone looking to have the pages of their website load faster.
Image File Formats and Their Usage
There are three main types of image formats that you can come across with on the internet: JPEG, PNG and GIF or GIFV
GIF and GIFV (Graphics Interchange Format) can display animations and they support transparency. You might remember how a hobby webpage looked in the 90s, everything was moving about with nice flame or lighting effects on them. Almost all of those animations were GIF images.
Today, we can find them mostly on sites like reddit or 9gag, and they are used because they load fast compared to video files and they do not have sound, and the quality is not that important as the content. GIFV are an improvement over the old GIF format and they support longer “videos” or animations.
GIFs are good, and really the only option for displaying small videos or animations, and when the image needs transparent parts or background.
PNG (Portable Network Graphics) was created as an alternative to the GIF file format. It has lossless compression, which means that after compression no data is lost, thus, ensuring that the quality stays the same with a smaller file size.
PNG also supports transparency unlike JPEG for instance. PNG supports different color palettes and grayscale, which makes it an ideal solution for images with reduced number of colors like a logo, for example, where the number of distinct colors are usually low.
PNG images are the ideal solution when transparency is needed or when an image only contains few distinct colors. They are best used when the image contains sharp shapes like a print screen or rasterized vector graphics.
JPEG or JPG
JPEG is a lossy image compression format, and it is often used by digital cameras to store pictures. The JPEG format can easily deal with natural images that have smooth variations of tones and color, because it was designed for this specific use case. It is the most common and most widely used image format, because most of the pictures taken can be compressed extremely well using the JPEG format.
Its lossy nature has some drawbacks, namely that every time you edit and save a JPEG image some information gets lost and the image quality decreases with every iteration of the compression algorithm.
Optimizing Images for the WEB
Picking the Right Format
This part should be easy once you know what are the strengths and weaknesses of the most common image formats. Just to recap, if the image has sharp edges in it and/or it only uses a few colors, use PNG 8 format, as it can handle 256 colors. If your image has more color and you are keen on not losing any image quality, you can go with PNG 24 or in extreme cases (lots of gradients, rounded edges and transparency) PNG 32.
If you don’t mind a very subtle loss of quality and your picture has smooth variations like a portrait or a landscape you can go with JPEG format at 80 compression level or if you really do not care that much about the quality, you might even go with JPEG 65 as this will reduce drastically your image file size.
With modern digital cameras and mobile phones, it is easy to make 12 – 25 mega pixel images, which translate to images, whose resolutions are really big, e.g. 4160 × 3120 or even greater.
The first step in optimizing images is to decide on the resolution of the final image, this can vary from website to website, but you can use common sense or even look at the competitors to see what resolution they are using. Usually, you can find images in the 1200 – 2000 pixel width range, they will still look good on bigger screens.
You can often use 2 image sizes for really high-resolution devices like high end desktops or those 27 inch iMacs with 5K screens, and one for normal devices like HD or FullHD capable displays. You can use the srcset attribute of the html IMG tag to indicate to the visitor’s browser that there are different resolutions available for an image, so it can download the appropriate one and display it.
Once you have the resolution, you can go ahead and resize your image for that resolution.
It is worth noting that there are different modes in which you can resize an image (nearest-neighbor, bicubic interpolation, Lanczos, etc.) and an image editor like Photoshop might give you different methods. In most cases you can stick with the default, but always check the resulting image, and you see any artifacts or significant reduction in the quality you might want to choose another method.
Optimizing and Delivery
There have been a lot of improvements in the last couple of years in terms of image compression especially for PNG and JPEG images. There are a lot of free and paid for solutions that will optimize your images, some with loss of quality and some without.
Needless to say that if you are willing to sacrifice quality you can have images which are highly optimized and with a much smaller file size than otherwise.
For PNG images, you might use pngquant, pngoptim or TinyPNG, which even has a Photoshop plugin. For JPEG files, you might also use TinyPNG or imageoptim.com, both deliver great and highly optimized images, and they also remove EXIF data, which is handy if you don’t want to give away the exact location where the image was taken or the model of the camera phone, as these details are usually stored in the EXIF data, which is attached to the image.
If you are using a CDN, which you definitely should, look around their interface because most of them have an image optimization solution in place, they might serve WebP format images instead of JPEG files (CloudFlare, MaxCDN), or they optimize PNG images on the fly.
Besides giving you suggestions on optimizing your site’s content, Google’s Page Speed Insights also gives you a downloadable ZIP file with the images optimized by them.
Beyond making images appealing to your viewership, image optimization is also an important element of site speed optimization and user experience optimization. Hopefully, our guide to web image optimization has familiarized you with the basics of web image optimization.