3 ways to optimize images for better performance

—

by

Mario
in

https://yourwebsitefirst.com/wp-content/uploads/2016/08/5-ways-to-optimize-images-for-better-performance.jpg

Since speed plays an important role recently, therefore make sure that your web have faster performance is the key to make your traffic thrives. One of the ways that you can do to increase your web speed is by optimizing images for better performances. There are many ways of optimizing images but, we will tell you the three common ways to optimize images for better performance, such as follow:

  1. Correct Dimensions

One of many mistakes that are often made by web developers is to use the wrong dimensions which worth mentioning for completeness that usually happen when displaying a thumbnail for a larger image elsewhere.

<img src=”threepwood-retina-2x-large.jpg” width=”140″ height=”84″>

Avoid any larger image and setting its dimensions with code since it will make your page size to explode, especially when you consider how many thumbnails many pages have on them. Furthermore, you need to ensure that the dimensions of the actual image and the area in which it will be displayed are the same.

<img src=”threepwood-140×84.jpg” width=”140″ height=”84″>

Responsive images are a different story of course, but same principle applies of not, for example, serving and scaling desktop retina images on mobile. For this problem, an excellent service that makes that process much simpler.

2. GIFs and PNGs

PNG was actually the product of GIF which has been improved; however, the function still shares the same practical purpose unless in terms of making animation as GIF-including transparency-but with the benefits of smaller file sizes. You can either re-export them from your graphics app as PNGs, or use convert from ImageMagick to batch process them on the command line, depending on your preference and how many GIF images you have. Moreover, bear in mind to use a lossless optimizer to run the new images you create.

3. Progressive JPEGs

JPEG has two main loading strategies, first, ‘baseline’ loads from the top row of pixels down to the bottom, and ‘progressive’ loads a complete which is extremely pixelated and then gradually sharpens it. The trade-off here is not so much about file size but of perceived speed.

In fact, in order to input.jpg to a progressive JPEG called output.jpg., you can use convert from ImageMagick.

convert -strip -interlace Plane -quality 80 input.jpg output.jpg

You can also simply set that as the output argument as well, if you want to overwrite input.