Progressive and Interlaced Images + Converter

by Cyle
Categories: tools, Web Development
Tags: , , ,
Comments: 2 Comments

Deciding between progressive and interlaced images on your web site can be a tough decision. Some people have a preference when viewing pages, while some just want to be able to see the image faster. Below are the differences and at the bottom is a converter that converts progressive images to interlaced.

Progressive Images

Progressive images are sent from your web server to the browser and displayed as they are received, giving a top-down filling of the image. With small images and/or fast connection speed this is sometimes not noticed. However, with large images it is very noticeable and sometimes annoying to only be able to see the top of the image and wait for the rest to come through.



Interlaced Images

Interlaced images are sent and displayed differently than progressive images. First it sends every eighth line of the image. After the first path you can barely make out what the image is, but next the server sends every fourth line of the image, then every second, then the rest of the image. Using interlaced images allows the viewer to understand what your image is faster than they would with progressive images. Interlaced images are about 10-20% larger in size if the are png, but sometimes smaller if they are jpg. Most web users prefer interlaced images over progressive images if they have to wait regardless. Like I said if the image is small enough the user will not even notice it loading. Below is an example of a more advanced form of interlaced images called 2D interlacing only available on pngs.



Progressive to Interlaced Converter

Upload an image to convert it from progressive to interlaced or from interlaced to progressive.

Max file size: 3.8 MB
File Types: *.gif, *.jpg, *.jpeg, *.png


  1. manga online says:


    How did you do that in PHP ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Today is Tuesday