This is a guest post by Kasia Kramnik, Content Marketing Manager at Netguru, a full stack development house and one of Cloudinary's Consulting partners.
Take a look at your website. Are you happy with the way it looks? I bet you are, and that’s really awesome. Keep in mind though, there is one thing you can’t actually see, but you need to experience: the load speed. Sometimes the most important element is invisible to the eye. In this article you’ll find tips on perfecting the invisible as well: loading your site and media with visibly better results.
Why is fast loading important anyway?
The reason is simple and it should be crucial to you: your users. They get impatient, they have a low attention span, and they won’t hesitate to leave your website if they have to wait. You may grumble about how hasty your potential customers are, but that’s exactly the challenge: dealing with their tendency to abandon anything that requires patience. One of the online surveys conducted on 2,500 online consumers in the US and UK found that 67% of UK shoppers and 51% in the US admit that a site's slowness is the top reason they’d abandon a cart in an online store.
It’s also worth noting that Google has incorporated site load speed into a list of factors influencing the search ranking position. It seems like there are enough reasons to take a closer look at loading times, but what if the results are far from excellent? How can you speed your page up? Here are a few tips regarding media upload, management, and storage.
Save images for the web
The process of load speed optimization starts before the images actually land on your page. When you’re working on your images in any sort of graphics tool, make sure you save them in a format that’s compatible with web publication. This limits the amount of metadata carried on an image and makes it easier to edit the image quality.
What formats are applicable for the web? There’s a variety of options:
- Scaleable Vector Graphics (.SVG) - preserves its quality no matter the size on screen, best for logos; lossless.
- Portable Network Graphics (.PNG) - best for high-resolution, detailed graphic images you want to present in full quality; lossless.
- Graphic Interchange Format (.GIF) - for simple animations; lossy.
- WebP - an image format supported by Chrome browsers; either lossy or lossless.
- Joint Photographic Experts Group (.JPEG or .JPG) - best for scalable images; lossy.
- JPEG-XR - an improved variation of JPEG format supported by IE browsers, suitable for scalable images; lossy.
- JPEG2000 - a higher-quality JPEG format supported by IE browsers; lossy.
Format comparison example:
196 KB in PNG format:
https://res.cloudinary.com/demo/image/upload/w_400/turtles.png
25.2 KB in JPEG format with 80% quality:
https://res.cloudinary.com/demo/image/upload/w_400,q_80/turtles.jpg
20.1 KB in WebP format with 80% quality:
https://res.cloudinary.com/demo/image/upload/w_400,q_80/turtles.webp
‘Lossy’ vs ‘lossless’ file formats
Work on image size and quality
- Scale or crop images to match the display size. These are typical elements of responsive design, but since it’s not just about being responsive, you’ll find more about it in the next section.
- Adjust image quality to match the screen resolution. The lower the quality, the smaller the file size. Remember to use lossy formats!
- Convert lossless formats into lossy, e.g. replacing a PNG (lossless) file with a lower-quality (let’s say 70%) JPG image. Another example: you can decrease the size of animated GIFs when converting them to WebM or MP4 formats.
