Demo images provided by Pexels under variouos free licenses.
More in the footer of each demo page.
Image Types
How to describe image information
Vector Images
I tell you a picture
Don't paint a picture, let someone else draw it
Contains the instructions how to draw
Uses a virtual coordinate system
Because the image is not draw yet when data is transferred, the drawer can decide to draw it in different dimensions or colors
Fonts and SVGs are example formats
<rect
width="50"
height="50"
rx="8"
fill="#07a081"
id="rect1741"
x="2.0048923"
y="0" />
<path
d="m 18.671,33.73 h 7.091 V 26.935 H 27.9 a 5.657,5.657 0 1 0 0,
-11.314 h -9.229 z m 10.763,3.622 H 15 V 12 h 12.9 a 9.271,
9.271 0 0 1 1.53,18.435 z"
fill="#ffffff"
id="path1743" />
<!--
Usually 1x, 1.5x and 2x make sense, not more,
no sizes attribute, implies same screen respresentation all the time
-->
<img src="img1.jpg"
srcset="img1.jpg 1x, img2.jpg 2x, img3.jpg 4x"
width="600" height="500"
alt="Blue horses on a yellow field"">
By Size
<!--
img1 as default for older browsers,
srcset says what size each image has
100w means 100 pixel
sizes defines which size should be used based in the media using media-queries,
such as min-width, max-width, orientation, color schema, height and more
(max-width: 900px) 90vw
If the viewport has a size of 900px or less use an image that fits 90%
of view port size (vw).
-->
<img src="img1.jpg"
srcset="img1.jpg 100w, img2.jpg 500w, img3.jpg 1000w"
sizes="(max-width: 900px) 90vw,
(max-width:1100px) 70vw,
60vw"
width="600" height="500">
<img src="img1.jpg"
srcset="img1.jpg 500w, img2.jpg 1000w, img3.jpg 2000w"
sizes="(min-width: 1900px) 2000px,
(min-width: 1200px) 1000px,
(min-width: 780px) 500px,
200px"
width="2000" height="800">
First rule stops processing
DPR - Device Pixel Ratio
Width, Height, and Alt
Some more intel
img attributes width and height are needed
Tells the browser the intrinsic size
Important for the aspect ratio
Helps to reserve space
alt is meant to aid screenreaders
When the image is decoration, use an EMPTY alt, never drop it
<!-- decoration -->
<img
src="flourish.png"
role="presentation"
alt=""
width="400" height="50">
<!-- meaning -->
<img
src="family.jpg"
alt="Family of four standing in front of an ice cream truck"
width="400" height="50">
Force - prescriptive syntax I
Enforces image use, also called art direction
Enables switching images based on size, resolution, media, and image support
Supports all of srcset and more
Uses picture and source
Can combine many features for the optimal choice
Can combine prescriptive and descriptive syntax
Simple Examples
<!--
Switch the images based on the color scheme preference
-->
<picture>
<source media="(prefers-color-scheme: dark)" srcset="hero-dark.jpg">
<img src="hero-light.jpg">
</picture>
<!--
Switch the images based on image support, first match is used
-->
<picture>
<source srcset="small.avif" type="image/avif">
<source srcset="small.webp" type="image/webp">
<img src="hero.jpg">
</picture>
Reserving the right space for each image. Figuring out how many sizes one needs. Deciding whether the image is content or decorative.
It's worth spending the time to get images right. Poor image strategies are responsible for frustration and annoyance for users. A good image strategy makes your site feel snappy and sharp, regardless of the user's device or network connection.
From https://web.dev/learn/design/responsive-images/ under CC-BY-4.0
Loading priorities I
How do change priorities
All images are by default eagerly loaded
Some images might not be needed at first or never - below the fold content
Declare these lazy using loading="lazy"
fetchpriority="high"
Make an image most important
Helps to load it first and not in line with all other important images
Apply with caution, you even might push it before a font
<!-- Below the fold -->
<img src="insta.jpg" alt="A description of the image." loading="lazy">
<!-- Hero, loading="eager" is default-->
<img src="hero.jpg" alt="A description of the image." fetchpriority="high">
Loading priorities II
How do change priorities
Image via JS or CSS background images might be still delayed
