“A picture is worth a thousand words” – We all agree with this statement and when it comes to Web Apps whether we have to show a product to sell online or promote our brand we use images.
Images are the life of any Web Application. But they also sometimes become a reason for your slow-loading website. Optimizing images is a very important step in the performance improvement of any web or mobile application. I would say especially mobile apps because the kind of viewport and network one would get in a mobile application would be heavily limited.
Here are some techniques that we have used in our Application for serving optimal images.
1. Compress images: Use image compression tools such as TinyPNG, Kraken.io, or Compressor.io to reduce the file size of your images without compromising on quality. Below we have similar-looking images the Original Image is 2Mb while Image 2 compressed with TinyPNG is 550Kb.
2. Use the correct image file format: JPEG is best for photographs and images with a lot of colors, while PNG is better for images with transparent backgrounds or simple graphics with fewer colors. GIFs are best for animations and simple graphics.
3. Resize images: Make sure that the images you use on your website are the correct size. Large images take longer to load, so it’s important to use images that are only as big as they need to be.
4. Specify Width and Height in Image Tag: Always specify the height and width of the image in the image tag so that the browser doesn’t have to calculate it dynamically.
<img src='monkey.png' width='250px' height='250px' />
5. Use Image Sprites: This one is my favorite and is specially used for icons or small images, So a sprite is basically a large image having different smaller images as part of it. Their display is controlled with the help of CSS by using background property. Imagine you have to show social icons on your website and for that, instead of loading 5 different small icons you just load one bigger image and control the view of the icon with the help of CSS.
in the Example below we are using a social-icons.png image, this image contains icons for all social sites and then we have classes for Twitter Facebook, and others to individually pick portions from the image.
.social-icons a {
background-image: url(social-icons.png);
background-repeat: no-repeat;
display: block;
height: 58px;
transition: all 350ms ease-out;
-webkit-transition: all 350ms ease-out;
-o-transition: all 350ms ease-out;
width: 50px;
}
.social-media-icons a:hover {
background-position-y: 2px;
opacity: 0.8;
}
/* Move the background to the right position for each social network */
.twitter {
background-position: 0 0;
}
.facebook {
background-position: -53px 0;
}
6. Lazy load Images There is now a Browser support for loading images as lazy, Just used the loading attribute value as lazy. Earlier when this feature was not available it was done with the help of javascript. But it’s now supported in most Browsers.
<img src=“image.png“ loading=“lazy“ alt=“…“ width=“200“ height=“200“>
7. Use WebP format for images – WebP images are smaller in size than jpg and png images and therefore perform better in terms of load time. There are tools available to convert png and jpg files to WebP.
8. Use responsive images: By using the srcset and sizes attributes for the img element, you can specify multiple versions of an image at different sizes and resolutions, so that the browser can choose the best image to display based on the screen size and resolution of the user’s device.
Frontend Performance Optimization – Part 1 (Images)
One thought on “Frontend Performance Optimization – Part 1 (Images)”