Member Avatar for Vesperto

I'm testing a small site in multiple browsers and am getting different results with this code:

<img src="...path.." alt="text if image is missing" height="128" width="128" />

If the image is missing:
- Opera 10.0 (Presto) and Midori 0.1.2 (Webkit) will display the text within a 128x128 space;
- Firefox/Iceweasel 3.0.5 (Gecko) and KAzehakase 0.5.4 (libxul-?) will display just the text, without filling a 128x128 space.

I could put the dimensions in CSS, but then i'd have to do that for every image i'd use... not practical.

Any suggestions? Any good resources for this type of problem?

  • 3 Contributors
  • 6 Replies
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Vesperto

Dani AI

Generated

This thread documents a real cross‑browser quirk: saw some engines reserve a 128x128 box for a missing image while others only showed the alt text. That difference used to be common between older engines. The reliable, standards‑based way to prevent layout jumps is to let the browser know the image's intrinsic dimensions up front so it can compute the aspect ratio and reserve space.

The current HTML spec and browser implementations treat the width and height attributes as the image's intrinsic size in CSS pixels (they are numeric, not strings with "px"). Browsers use those values to calculate an intrinsic aspect ratio and allocate layout space while the resource loads or if it fails; this is the recommended way to avoid reflow. See the HTML element reference and the spec for details: MDN: img element and WHATWG HTML spec: img element.

Practical, modern workflow: author images with their natural pixel dimensions in markup and use CSS to control displayed size for responsiveness. To automate insertion of intrinsic dimensions at upload or build time, extract image size server‑side (for PHP, getimagesize() is commonly used) and inject width/height into your templates: PHP getimagesize(). If supporting very old UAs that ignore those hints, use a small placeholder (inline SVG or data URI avoids extra files) or a lightweight script that measures and sets dimensions.

Quick troubleshooting: confirm the page is rendering in standards mode (valid DOCTYPE), make sure attribute values are numeric (no "px"), inspect computed layout with devtools, and test with an intentionally broken src to observe reserved space. This combination gives consistent, non‑jumpy behavior in modern browsers while keeping accessibility via alt.

Recommended Answers

All 6 Replies

Member Avatar for almostbob

many browsers discard measurements without a unit <img src="...path.." alt="text if image is missing" height="128px" width="128px" />

Member Avatar for Vesperto

Thanks, but it didn't change behaviour in any of the browsers i listed. Also, i thought units were only valid for CSS, not HTML-tags?

I want to determine the dimensions of the pictures for when, for some reason, the file is missing; and for accessibility. I'd also need to automate the code but i'll pester the PHP-forum for that (or maybe use a templating engine?).

The main reason is for the pages to load correctly, without needing to resize once the images are downloaded by the UA. I'm using XHTML 1.0 Strict; going Transitional is not an option.

Member Avatar for almostbob

Your right, its me reading the w3 page, height='pixels' thinking it meant you had to put the dim in
pixel is the default
do the browsers work with inline styles < style="height:128px;width:128px" >

Member Avatar for Vesperto

I had tried inline styles before, but revamped my testing. I'd note both images i'm testing are within <a> tags but i also tried using the images isolated. Here's my new code:

<img src="filename" alt="some text" style="height:128px; width:128px; background-color: #FFFFFF;" />

All that changes is the white background, all browsers still don't/render the size. This whole image-size-while-loading issue isn't new, i thought i was making some silly mistake and that there's a Right Way™ to do this... :(

I've uploaded the site here:

As a remark, both Opera and Midori are the only ones that actually reserve the space for the images according to specified height/width and they are also the only browsers from the ones i listed that actually score 100/100 on the Acid3 test. So maybe it's a rendering/lack of standard issue?

Member Avatar for MidiMagic

Height and width parameters are deprecated.

When you don't yet have the image, use a blank image the same size. Put some text on it, like "Bob lost the picture."

Many browsers refuse to render space for objects they can't find.

Member Avatar for Vesperto

Height and width parameters are deprecated.

When you don't yet have the image, use a blank image the same size. Put some text on it, like "Bob lost the picture."

Many browsers refuse to render space for objects they can't find.

I know it's preferred to use CSS instead, which is what i do. Using a blank image implies having at least one extra image per image size on the server, sounds cumbersome to me. I'll stick with jumpy loading for now, but thanks for the tips.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.