Interlace and Progressive images

I’m working on a site with some fairly large images (around 100–200kb after using ImageOptim). Non of the images are interlaced or progressive.

When the page loads, for a second or two, the images aren’t displayed and worse the dimensions of the images haven’t been calculated by the browser, so the layout is “compressed”. Only after the images have downloaded does the layout “snap back” and display as it should.

I presume if I resaved the images “above the fold” as interlaced or progressive the browser will determine their size while working out the layout, allow the images the correct size and the layout will display as it should (rather than display correctly only after the images have downloaded)?

Are the above assumptions correct?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Certainly if the images are progressive the page structure will build much faster.

Images at 100-200 are not that large - unless there are quite a few of them on that page. There was a recent discussion about overall page weight with the consensus that it should be between 0.5 and 1Mb unless the visitor knew what they were letting themselves in for ie a Gallery page.

If your page is graphics heavy you should maybe try the ScriptyLazyLoad action http://actionsforge.com/actions/view/269-scriptylazyload

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

so, if I use progressive/interlace images the layout displays properly (rather than collapsing) while the images load.

I’ve done a Google search but can’t seem to find anyone else with the same issue…

None of my pages are over 1mb but some get close.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

so, if I use progressive/interlace images the layout displays properly

Try it and see - and post a link so others can check on their systems.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just found this article detailing my problem (with responsive) images

saying “If you’re building responsive websites, progressive JPEGs are also appealing because you can avoid the content reflow that happens when baseline images are loaded after text content. With progressive JPEGs, because some data is loaded right off the bat, text doesn’t jump around (you can avoid this for non-responsive images by specifying the image dimensions).”

I’m going to resave my images ‘above the fold’ as progressive/interlace. I don’t care about images below the fold, on the assumption that it doesn’t matter if my text jumps about, because no one is going to see it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m going to resave my images ‘above the fold’ as progressive/interlace.

Is that not what I suggested?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yup and I now know why my content is reflowing: because the images are responsive they don’t have a fixed width or height (I’m using percentages and max-width), the browser doesn’t know how big they are.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There are numerious articles about using padding on responsive image to solve the reflow problem: http://www.mmckinnon.com/blog/?title=avoiding-reflow

but using progressive/interlace images seems so much easier.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In your OP you didn’t mention that you wanted responsive images.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yup I now know the issue is with images with no fixed size


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Mark,
Years ago when connection speeds were an issue some of us used the lowsrc attribute on the image tag to load a placeholder image before the main image was loaded. Although the lowsrc tag has now been depreciated by the W3C in favour of progressive image formats loading a placeholder image (even a blank gif) should give the browser enough information to lay the page out before these images are then replaced by the real images.

Although I wouldn’t recommend lowsrc unless you are using something other than HTML5 you can keep your non-interlaced images if you are willing to add a div wrapper around them and a smattering of JavaScript to the page that hides the images until they have fully loaded;

Personally I think that this is all a lot of work compared to just making the images progressive in the first place.
Regards,
Tim.

On 2 Feb 2014, at 18:48, Mark wrote:

Yup I now know the issue is with images with no fixed size


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Tim

Problem is not all browsers support progressive/interlaced images. This article suggests only 65% of users will see the progressive rendering. http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

I’m tempted to do nothing. I don’t really fancy resaving all my images or doing the other time consuming work arounds.

Perhaps it isn’t that big a deal: none of my images are over 300kb, most are around 100kb or lower and the largest page is 800kb. So the pages should load fairly quickly - the layout reflowing at most speeds is hardly noticeable.

I’m surprised there doesn’t seem to be much written about non-fixed size images causing layouts to shrink as the image is loaded…

Cheers Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options