Use Progressive JPEGS To Improve Your Website Load Time
If you have high quality images that might be slow to load, you might want to use a progressive jpeg which can decrease load time for your website and improve the user experience. A progressive jpeg is an image using compression algorithms that load the image in waves until the entire image is downloaded vs a normal jpeg which loads the image from top to bottom line by line. The progressive image makes it so the perceived load time is quicker.
This is the regular image:
This is the progressive image:
Check the gif below to see the difference in loading. The progressive image has the initial load and then gets better in quality as time goes by, versus the regular image at the top loads in at top quality but from top to bottom and finishes loading much slower.
Example
Curious how you can convert images to be a progressive jpeg? There is this website jpeg.io which can do it for you. Command line fan? You can also use ImageMagick which you can install a number of ways. Check the download page Then you can run this command to convert:
convert original-image.jpg -interlace plane progressive-image.jpgThe convert command is a part of the ImageMagick suite and comes with the ImageMagick installation.
Read more about it in this guide