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)?
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.
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.
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.
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.
Personally I think that this is all a lot of work compared to just making the images progressive in the first place.
On 2 Feb 2014, at 18:48, Mark wrote:
Yup I now know the issue is with images with no fixed size
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…