How do I optimize my images?
What Is Image Optimization?
Optimizing web images is a process of delivering high-quality images in a proper format, compression, and resolution to keep the smallest possible size while preserving the visual quality.
Why is it important to optimize images for a website?
Image optimization helps to improve page load speed, boosts the site's SEO ranking, improves user experience and engagement.
How do I optimize my images?
Image optimization is based on three essential operations: resize, format, and quality. You can learn more about these operations from our documentation
- Resize. Resizes an image to fit into the specified dimensions. With just a single linear dimension specified, preserves your original aspect ratio and resizes an image alongside one of its axes.
- Format. Converts an image to one of the following formats: jpeg, webp, png, auto.
- Quality. Sets the level of image quality that affects file sizes and hence loading speeds and volumes of generated traffic. Works with JPEG and WebP images.
Let's take a look at the following example. Say you have an image hosted at Uploadcare, and its CDN URL is https://ucarecdn.com/c5b7dd84-c0e2-48ff-babc-d23939f2c6b4/. It's in JPEG format, and the original file size is 1.4 MB. If you add this image to your website, every time a user visits your page, 1.4 MB of data will be loaded from our CDN. If you have a few dozens of such images on your page, the total weight of the images will become significant, and your page will load slowly, which is awfully bad. Now let's see what will happen if we optimize the image by adding the above operations? For example, the image is rendered in a container of 500px in width. Then we resize the image accordingly and let our CDN pick the most appropriate format and compression level.
The derived image is in WebP format, and its size is as small as 29 KB. We just reduced the image size to more than 50x. This technique can significantly decrease your page loading speed and reduce CDN traffic consumption.
If you want to get more out of image optimization and fully automate the process, you may want to check out Adaptive Delivery. It's a full-stack image optimization solution that adapts images to user context: screen size, browser, location, and other parameters. The optimization includes lazy loading, smart compression, WebP, responsive images, and retina display support. Altogether, it speeds up page loading and improves user experience without any coding.