Optimizing Images for the Web – An In-depth Guide

dev.to dev.to3 years ago in #Web Design Love280

Table Of Contents Unoptimized (non-minified) images are one of the main causes of poor website performance, mainly on the initial (first) load. Depending on the resolution and image quality, you might end up with images that take up more than 70% of your total website size. It’s very easy for unoptimized images to end up on a production site and slow down its initial load considerably. Inexperienced devs usually aren’t aware of this potential problem. They also aren’t aware of a wide range of tools and approaches for optimizing images. This article aims to cover most of the tools and approaches for optimizing images for the web. Calculating JPG image file size The uncompressed image size can be easily calculated by multiplying image width px value with image height px value and multiply the result by 3 bytes which is equivalent to 24 bits (RGB color system). We divide the result by 1,048,576 (1024 * 1024) to convert the value from bytes to megabytes. image_size = (image_width * image_height * 3) / 1048576 For example, let’s calculate file size for an uncompressed image that has 1366px x 768px dimensions. 1366 * 768 * 3 / 1048576 = 3Mb Considering that average website size today is between 2Mb and 3Mb, imagine having an image on your site that takes more than 80% the size of your site. 3Mb takes ages to load on slower mobile networks, so you might lose some traffic on your website if the user is waiting for your website to load and most time is spent on loading a single image. Scary thought, isn’t it? So what we can do to avoid having optimized images on the web but preserve the acceptable quality and resolution? Online image optimization If you are working on a simple static website that only has a handful of images that won’t change often or won’t change at all, you can just drag and drop your images in one of the numerous online tools. They do an amazing job at compressing images using various algorithms and are more than enough for simple projects. Most notable websites, in my opinion, are: Automated solutions However, if you are working on more complex projects with multiple people and using a lot of images, optimizing each one as it is added to the project can become tedious. Also, there is a risk that some images may end up not optimized due to human error or some other factor. On complex projects, it’s common to use an equally complex build system like Gulp, Webpack, Parcel, etc. Image optimization plugins can be easily added to those build configs and fully automate the image optimization process. Images can be optimized as soon as they are added to the project. Most notable plugin, in my opinion, is imagemin which can be easily integrated with any CLI or build tools: Image loading optimization We’ve looked at the image optimization strategies that reduce the file size by compressing the image without changing the image resolution and affecting image quality too much. Although optimizing image file reduces the file size of images considerably, having multiple optimized images (on the webshop catalog page for example) loaded all at once can have a poor effect on performance. Lazy Loading Lazy loading is a concept of only loading assets that are needed. In our case, only images that are currently within the user’s viewport (screen) are loaded. Other images are not loaded until they appear within the user’s viewport. Although native Lazy loading has just been recently introduced to browsers, there have been many JavaScript-based solutions available….

Like to keep reading?

This article first appeared on dev.to. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply