The varying sizes of images on the web today, and remembering that

February 25, 2022

Once upon a time on the web, people used relatively small image sizes because it was rude to do otherwise, especially when they were being used for things like icons. If somewhere had visually small icons, they almost always were small in actual image dimensions, and all the same size because the website made you do it that way. Over time that has shifted. People started using larger and larger images, even for things that were destined for little icons, and websites started accepting these images by clamping the image size in their HTML. This mostly works fine (although people on cellular data may be a bit unhappy with you), but it does open the door to accidental mistakes that produce awkward outcomes. Specifically, if you ever reuse the image in a context where it doesn't have its size clamped by some HTML (or CSS), people will see a surprise giant image. Sometimes it can be hard to work out why this is happening.

All of that sounds abstract, so let me give you a concrete example. I read Planet Fedora in my feed reader of choice (Liferea, although an old version), and for a long time articles have had mysterious giant images at or near the top. Recently I worked out what was going on.

Like many planet blog aggregators, Planet Fedora has little icons beside each aggregated entry as an indicator of who wrote it. The <img> URLs for the icon are their original sources and don't have sizes specified, but on the website, the CSS clamps the maximum size of the image to 150 px. When the decision was made to include '<img>' elements for these icons in the syndication feed's HTML for each entry, it was overlooked that these icon images could be any size, including large sizes, and so the <img> elements in the feed have no size limits. To a feed reader, these <img> icons look like regular pictures (which normally should be allowed to use the full size of the entry display area, whatever that is), and so you get periodic surprise giant pictures at the start of entries.

I tend to feel that there's no particular person who's at fault for this. On today's web, it's perfectly reasonable to use large images for your icon even if you know it's going to be displayed in small size. Once you have people using large images for icons that are somewhat invisibly constrained by CSS, you've created a perfect situation for someone reusing the icon images in another context to overlook the size issue.


Comments on this page:

From 193.219.181.219 at 2022-02-26 05:23:34:

Probably worth mentioning is that on today's web, screens vary in DPI (pixel density) a lot – starting with the 2x-scale "retina" displays of course, for which some websites provide separate "foo@1x.png" and "foo@2x.png" assets (but that's additional effort), but other websites find it easier to just always provide a 2x-sized graphic and scale it down via CSS.

On my 14" laptop I have many websites zoomed to 125% due to the panel's somewhat higher DPI (if I reboot into Windows it even recommends 125% as the global 'scale'). When zoom is in use, text of course scales nicely, being vector-based, but images meant e.g. for "150px" end up being stretched.

Though there's of course a limit to what's acceptable; I've seen one or two websites using a multi-megabyte print-ready PNG for a small header logo (likely due to accident/laziness).

I'm not sure whether you checked the source HTML in the feed, but it's worth noting that at least some popular RSS readers actually override image styling.

I also tried having author images on one of my blogs--while the image's sizes are set in a stylesheet on the normal site, in the feed they are set inline on the image tag. Both Newsblur and Feedly actively strip out and replace the inline styles before rendering the HTML. So even if the people maintaining the site have overlooked nothing, the RSS reader might still be doing the incorrect thing.

Though again, there may be no particular person at fault. I assume the RSS readers are doing this because enough feeds have bad inline image styling that this gets you better behavior on average.

By Christopher at 2022-03-03 19:34:57:

Liferea nicely has the capability to hook a script to massage the feed (Subscription Properties/Source/Use conversion filter). I am using sed to repair the links in Ameritrade's tickertape feeds.

Written on 25 February 2022.
« I've come to think that the Git index is a good thing
Unix environment variables (and the environment) are a fuzzy thing »

Page tools: View Source, View Normal.
Search:
Login: Password:

Last modified: Fri Feb 25 22:39:21 2022
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.