What’s new in web images

New CSS

  • Object fit which resized images to fit its container. The cover value is particularly useful as you can responsively crop the image to the available space.
  • Aspect ratio. There is no need to hack this with calc anymore. On our site we needed the YouTube thumbnail images (and iframe)to remain at 16:9
  • Border image.It can do more than images to borders. A great Smashing Magazine article shows what can be done to enhance or replace images.
  • Filter:Blur, brightness, contrast, drop-shadow, hue rotate, invert, grayscale, saturate, sepia and opacity.
  • Clip-path to clip out images to shapes.
  • Mask-image Images masking images. Example.
  • Backdrop-filter. Limited support. Mostly useful for blurring an image where you place text over it.

Notes: There is the still experimental prefers-reduced-data media query to get rid of non essential images.

Also worth noting is that images are inline elements. We have to tame them with a CSS reset:

img, picture, svg, video {
display: block; 
max-inline-size: 100%;
height: auto;
}

Old CSS revisited

  • HTML Img tag v CSS background img. Meaningful content vs decorative. Which is a logo?
  • Alt tags. For screen readers rather than SEO boasting. Using blank.

New HTML

  • Loading="lazy/eager".
  • Priority Hints: fetchpriority="high/low".

Old HTML revisited

  • is easily forgotten. It allows for "art direction" - showing a range of image sources depending on the media query (such as viewport size or light/dark preference).
  • srcset serves a range of images based on viewport size and/or pixel density. We need something better as CMS's can never automate these efficently and manual writing and image cropping is overwhelmingly time consuming and messy. This tool helps. Responsive images fail us with container queries.
  • . The element that marks up a photo in a document has
    to define a caption for the photo.

Here's a question. If we build for not visual consumption should every image that is not marked as a

be background image?

There are quite a few things like this in HTML. See this post by Stephanie Eckles.

New formats

  • Webp (widely available 98%) and AVIF (newly available 93%) mostly solves the old problem of which is suitable for the type of image (jpg, gif or png).
  • SVGs goes back to 1999. V2 from 2018. There are future proof, good for usabilty and SEO (if labelled corretly) and we can do some amazing thing with SVG filters.

Is a bitmap picture worth a thousand words?

  • Browser processes time and the environmental cost is high.
  • Trying to serve 320px (if we ignore watches) to 7680 px screens efficiently is not easy.
  • Are we overloaded with stock and AI images that trust has been eroded to the point we try to block them out?
  • CMS's in their attempt to help quickly fill up our server space.
  • Yet, it can be a struggle to get a decent picture of a clients even when it could be the only picture a visitor cares about.

Mentioned

Hacked by an image. An explaination of the Webp exploit.