Jump to content

add support for progressive JPEG

Martijn Geerts

Recommended Posts

I wish there was support for progressive JPEG.

To control it, set it in the imageSizerOptions array.

Martijn, what's about to support it with PiM instead with ImageSizer?

If I'm right, there isn't much support for interlaced JPEGs actually:

  • limited browser support  (render interlaced: chrome, Firefox, IE9+ | don't render interlaced: all Safari, all Opera)
  • if browsers support it, they mostly only support foreground images but not interlaced background images (only Chrome render background images correct)
  • if there is support for interlaced images, the cpu usage is multiple times then with basic-jpegs, (not very handy with mobile devices)

And there is more (pro & con): http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

I'm not sure, but the pro's seems limited to some more or less special usage only.


BTW: interlaced images could be really useful with responsive designs if the browsers would support them technically in a special way. For example if you have a source image of 1200 x 1600 and it is sent to a mobile phone, the mobile browser could stop downloading and rendering after the first (normally very blurry) image step is rendered. A desktop would download the complete file and also would render all steps (scanns). Would be very helpfull if (all) the browsers support that some day.

Link to comment
Share on other sites

Not sure about the limited browser support. I thought back in the days 56k they told better to use progressive. As it give the the feeling that it loads quicker. ( below some info from wikipedia )

These days, we want to give more more control back to CSS. Old lightbox scripts, first load the whole image, then presenting them to the screen with animation. What I see happen now a days ( more & more ) other of lightbox scripts appear. The animation delivered bij CSS & not by Javascript.

And images appear on the screen directly. ( after first byte is loaded ) see magnific lightbox for example. Progressive loading is way nicer then.

For mobile progressive is ideal.


wikipedia compression :

There is also an interlaced "Progressive JPEG" format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data. However, support for Progressive JPEGs is not universal; when Progressive JPEGs are received by programs that do not support them (such as versions of Internet Explorer before Windows 7)[13] the software only displays the image after it has been completely downloaded.


Interresting read @horst. Still have to think about it. To be continued !

Edited by Martijn Geerts
  • Like 2
Link to comment
Share on other sites

  • 5 months later...
  • 3 months later...
  • 1 year later...
  • 4 months later...

+1 — This is especially important for portfolio sites with multiple large images. Lazyloading is a possibility, but even then progressive loading is visually more satisfying than scanlines.

I don't know about the technical details of implementing this in PHP, but I imagine this can't be too complicated. Or do you think this would best be handled by writing a PW module?

Link to comment
Share on other sites

  • 2 months later...
  • 6 months later...

+1 - I just tested a site with webpagetest.org and had a bunch of jpgs, saved as "progressive" in Photoshop, but a bit too large in dimensions for the final display. As soon as image->width() or image->size() was used to scale these images, none of them were "progressive" anymore.

maybe @horst has something up his sleeve? :-)

Bildschirmfoto 2016-08-16 um 17.28.44.png

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 1 year later...

Support for progressive JPGs is integrated into the Dev version. I think it is there since 3.0.80, but don't know exactly.

To use it put this into your site/config.php 

    $config->imageSizerOptions('interlace', true);


  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...