.png){kind=small}
The web is becoming more visual and thus the use of images and other rich media is becoming more prevalent. Images make up about 50% of all visual content downloaded as pages load and they can have an impact on load times and thus user experience. Optimising your images is an important art of SEO and improving user experience. However, many people do not know how to do it, and this is what we are going to be focusing on in this article.
Balance Quality and Size
Compressing your images is one of the best ways to ensure they are small enough that they do not impact page load too much. However, compressing images can lead to a loss of quality. This is called lossy compression. When compressing images, it is important to strike a balance between quality and size. You want to ensure you can get the best-looking images at the smallest size possible.
Choose the Right File Format
There is no best file format to use on your website per se, but there are referred file formats for different needs. For example, JPEG images are recommended for larger images because they offer a high quality at a reasonable size. PNG and WebP formats offer great compression with a lot less loss of quality than JPEG images. SVGs, on the other hand, are small enough and almost infinitely scalable for use in many applications.
Convert to the Right Colour Space
The two main colour spaces used today are RGB and CMYK. RGB is the standard for the web and is the format used by most cameras and computers. CMYK is mainly used on printers. For vivid images, you want to use RGB. You can convert CMYK images and assets to RGB using various tools including Adobe Photoshop.
Use Different Images for Different Displays
Mobile devices and certain computer monitors have a very high pixel density. If you view an image with a low PPI (Pixels Per Inch) number on a high-resolution screen, it will not be crisp enough. To remedy this, you can export your images in different sizes and then use CSS on your website to display the preferred images according to the user's screen.
Use Images of the Right Size
This is an extension of the point discussed above. You should always use images of the right size for specific devices. When you do, you ensure the device only downloads the data it needs and no more. You also reduce the amount of time it takes to display the image as the device will not have to scale it down before displaying it.
Why is Image Optimisation Important?
As mentioned above, image optimisation is important for SEO and user experience. Large images (in size and data) take longer to load. This impacts your load times, which in turn affects your ranking on search engine result pages.
As for user experience, people do not want to wait around for your website to load. This is especially true for those on mobile devices. Optimised images reduce load times and ensure visitors see crisp, bright images which helps with the user experience.
Image optimisation is becoming more important as search engines prefer websites that load faster. Fortunately, there are enough tools to help you optimise your images whether for desktop or mobile visitors.
Other Great Articles