On most business websites, images are the single heaviest part of the page. They decide how much data a visitor downloads, when the main content becomes visible, and whether the layout stays calm while loading or jumps around. At the same time, images are where accessibility most often falls apart: without alt text, the information stays out of reach for anyone using a screen reader or browsing with images turned off. Both problems are settled in the same moment, namely when someone adds the picture. This article explains which formats make sense today, how to get resolutions and file sizes under control, when lazy loading helps and when it hurts, how fixed aspect ratios prevent layout shifts, and what alt text looks like when it genuinely helps people and search engines alike.
Why images are the heaviest part of a page
If you want to make a website faster, start where the weight actually sits. On a mobile home page, images account for a median of roughly 900 kilobytes (HTTP Archive Web Almanac) on their own — considerably more than stylesheets and fonts combined. More important than raw volume is the role images play in the visible build-up of a page: in 68 percent (HTTP Archive Web Almanac) of cases the largest visible element on a page is an image. The moment a page feels finished to a visitor therefore depends directly on how quickly that one image is transferred, decoded and painted. For companies this is not a footnote, since around 89 percent (Federal Statistical Office of Germany) of businesses with internet access run their own website and compete there for attention that is won or lost within seconds. How much the delivery method contributes is covered in our article on PageSpeed and static delivery. The image question comes on top of it anyway: even a page that leaves the server within milliseconds still waits for a photo that was embedded at full camera resolution. This is exactly where our services for building and running a site come in, because image processing belongs where the page is generated rather than in manual clean-up afterwards.
- Transfer time: every unnecessary kilobyte extends the wait, especially on weak mobile networks
- Processing time: large images have to be decoded and scaled, which costs noticeable time on older devices
- Memory: a photo 4000 pixels wide occupies many times the memory of an 800 pixel variant in the browser
- Priorities: images compete with fonts and stylesheets for the same limited bandwidth
- Stability: images without reserved space push text around as soon as they arrive
- Data volume: on capped mobile plans, visitors pay for every additional megabyte
Image weight counts twice
Which image formats make sense today
The format landscape is simpler than it looks, yet old habits persist. On the mobile web, 32.4 percent (HTTP Archive Web Almanac) of delivered images are JPEG and 28.4 percent (HTTP Archive Web Almanac) are PNG, while the leaner WebP sits at 12 percent (HTTP Archive Web Almanac) and AVIF has only reached 1.0 percent (HTTP Archive Web Almanac). That is remarkable, because modern formats typically need considerably fewer bytes for a comparable visual result. The reason for the inertia is rarely technical: whoever uploads images by hand uses whatever the camera or the graphics program produced. Once conversion happens automatically while content is being added, the question disappears from everyday work. What matters is the fallback: a browser that does not understand AVIF has to receive something it can display, which is precisely what the picture element with several sources is for. Just as important as the format is the quality setting used during conversion: above a certain point the file keeps growing while the visible gain disappears, and below it edges and gradients start to fray noticeably. It makes sense to test that setting once on typical motifs and then fix it, rather than guessing again for every picture. A second point concerns where the files come from: photos straight out of a camera often carry embedded preview images, colour profiles and extra data that play no role in browser rendering and can be dropped during conversion. How this step is anchored in the build process is outlined in our overview of how a website is created with XICflow. For logos, icons and simple graphics, SVG remains the sensible choice, because it stays sharp at any resolution and usually weighs only a few kilobytes.
| Format | Strength | Typical use | Note |
|---|---|---|---|
| AVIF | Very good compression for photos | Large photos, backgrounds | Plan a fallback for older browsers |
| WebP | Good compression, broad support | Photos, thumbnails, galleries | A solid choice when AVIF does not fit |
| JPEG | Displays everywhere | Fallback for photos | No transparency, visible artefacts at heavy compression |
| PNG | Lossless, supports transparency | Screenshots, graphics with hard edges | Usually unnecessarily heavy for photos |
| SVG | Resolution independent, very small | Logos, icons, diagrams | Strip any script content before embedding |
| GIF | Widespread, can animate | Short animations in existing content | A video format is leaner for moving images |
Modern first, with a fallback
The picture element serves AVIF to browsers that support it and a proven format to everyone else. The effort happens once during the build and pays off on every page afterwards.
Vector instead of pixels
Logos, icons and simple diagrams belong on the page as SVG. They stay sharp on every screen, can be recoloured with CSS and usually weigh a fraction of a raster graphic.
No text inside raster images
Text embedded as an image cannot be selected or searched and scales badly. Headlines and prices belong in the HTML, not inside a graphics file.
Delivering the right resolution
The most common cause of heavy pages is not the wrong format but the wrong size. A photo displayed at 640 pixels wide but delivered at 4000 pixels wastes most of its data. The tools have been available for years: 42 percent (HTTP Archive Web Almanac) of pages now use srcset, which offers the browser several sizes to choose from, and 9.3 percent (HTTP Archive Web Almanac) additionally use the picture element for format variants. For orientation: the median image on the web weighs 12 kilobytes (HTTP Archive Web Almanac), while the largest image on a page has a median of 135 kilobytes (HTTP Archive Web Almanac). Anyone far above that usually has a sizing problem rather than a compression problem. In practice this means determining the maximum display width for every image slot in the layout, deriving two to four variants from it, and letting the browser pick based on screen width and pixel density. Our demo sites show how much these widths differ from block to block: a full-width hero image needs other variants than a thumbnail in a three-column grid.
- Determine the maximum display width of every image slot in the layout, separately for mobile and desktop
- Double that width to cover screens with high pixel density and derive the largest variant from it
- Define two to four steps, for example 480, 960 and 1600 pixels wide
- Generate each step in a modern format and in a fallback format
- Describe the choice through srcset and sizes so the browser requests the right file
- Check the result on a real mobile device and verify the file size that is actually loaded
<!-- The browser picks format and size on its own -->
<picture>
<source type="image/avif"
srcset="/images/workshop-480.avif 480w,
/images/workshop-960.avif 960w,
/images/workshop-1600.avif 1600w"
sizes="(min-width: 1024px) 640px, 100vw">
<img src="/images/workshop-960.jpg"
srcset="/images/workshop-480.jpg 480w,
/images/workshop-960.jpg 960w,
/images/workshop-1600.jpg 1600w"
sizes="(min-width: 1024px) 640px, 100vw"
width="1600" height="900"
alt="Technician checking a heating system in a basement"
loading="lazy" decoding="async">
</picture>
<!-- The first visible image gets priority instead of a delay -->
<img src="/images/reception-1600.avif" width="1600" height="900"
alt="Reception desk in the entrance area of the practice"
fetchpriority="high" decoding="async">High pixel density is no reason for huge files
Lazy loading with judgement
Lazy loading delays the request for an image until it approaches the viewport. That is sensible for everything further down the page and is now widespread: 33 percent (HTTP Archive Web Almanac) of pages use the corresponding attribute. This is also where a common mistake appears. On 9.5 percent (HTTP Archive Web Almanac) of pages, the largest visible element itself is lazy-loaded — the very image that the loading measurement waits for. The browser is only allowed to request it after calculating the layout, which wastes valuable time. The rule is therefore simple: whatever sits in the viewport on arrival gets loaded with priority, everything below it gets delayed. Image galleries inside articles benefit particularly, because many pictures sit below one another while only one of them is initially visible. What that means for everyday editorial work is covered in our article on whether blogging pays off for small businesses. The decoding attribute helps on top of that, so painting the page is not blocked while a large image is being unpacked in the background. Two special cases are easy to overlook: background images added through CSS do not appear in the HTML at all, so they can neither be delayed nor prioritised. If such an image defines the visible build-up, it is better placed on the page as a real image element. Poster frames for embedded videos count as images too, and they are often loaded at full resolution even though they initially serve only as a still.
Do not delay the first visible image
Fixed aspect ratios against layout shifts
When text slides downwards during loading because an image suddenly claims space, that is a layout shift. Visitors find it annoying, and in the worst case they tap something that is no longer in the same place at the moment of the tap. The technical remedy has been known for a long time yet is rarely applied: only 32 percent (HTTP Archive Web Almanac) of images carry width and height attributes. Those two values are exactly what the browser needs to know the aspect ratio and reserve the space before any image data arrives. In addition, CSS can lock image areas in cards and grids to a fixed ratio, so photos with different crops occupy the same area. The target value for layout stability is 0.1 (HTTP Archive Web Almanac) and is usually met without particular effort once image areas reserve their space. Why this value belongs next to loading time and responsiveness among the central metrics is explained in our article on static delivery and the Core Web Vitals. The same principle applies to anything else that claims space after the fact: embedded content, advertising slots or a consent banner. Once the area is reserved in advance, the text stays where it is, even when the content arrives later.
/* Dimensions in the HTML let the browser reserve space */
img {
max-width: 100%;
height: auto; /* keeps the aspect ratio */
}
/* Image areas in cards and grids are ratio-locked */
.card__image {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover; /* crop instead of distortion */
background: #eef5f3; /* calm surface before loading */
}
/* Portraits in the team grid get a ratio of their own */
.team__portrait {
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: 50% 30%;
}An image without reserved space is not a design element, it is an announced layout shift.
Alt text that genuinely helps
Alt text is the written version of an image. It is read aloud by screen readers, it appears when an image cannot be loaded, and for search engines it is the most important clue about what the picture shows. Reality looks sober: on 53.1 percent (WebAIM Million) of the home pages analysed, images are missing alt text, and across all images it is absent in 16.2 percent (WebAIM Million) of cases. Among the texts that do exist, another 10.8 percent (WebAIM Million) are questionable or repetitive — file names, the word image, or a copy of the caption. With an average of 66.6 images (WebAIM Million) per home page, that adds up to a great deal of inaccessible information. The requirement itself is unambiguous: non-text content needs a text alternative, as set out in success criterion 1.1.1 of the guidelines (W3C, WCAG 2.2). Since 28 June 2025 (Federal Agency for Accessibility, Germany), the rules of the German Accessibility Strengthening Act have applied to a large share of digital offerings in business transactions; what exactly falls under them and which exemptions exist is broken down in our article on the Accessibility Act and WCAG 2.2 AA. The side effect is welcome: precise alt text describes the picture in words that also count in image search. Combined with properly marked-up page content, as described in our article on structured data in search results, this produces a picture of your site that machines can interpret. The key distinction is between informative and purely decorative images: a photo that carries a message needs a description, while a background surface without information value receives an empty alt attribute and is deliberately skipped instead of adding noise for screen reader users.
| Image situation | Weak alt text | Better alt text |
|---|---|---|
| Photo of a technician at work | IMG_20240718.jpg | Technician replacing a heating valve in a basement |
| Team portrait on the about page | Image | Sandra Berger, head of customer advice |
| Logo linking to the home page | Logo | Home page of Nordlicht joinery |
| Chart with measured values | Chart | Loading time drops from 4.1 to 1.3 seconds after the switch |
| Decorative background area | abstract green background image | Empty alt attribute, the image is skipped |
| Product photo in a shop grid | Product 1 of 12 | Oiled oak table, 180 by 90 centimetres |
- Describe what can be seen in the picture, not that it is a picture
- Keep it short: one or two sentences are enough in most cases
- Name the purpose when the image acts as a link or a button
- Avoid phrasings such as photo of or graphic showing
- For charts, state the key message rather than every individual figure
- Give purely decorative images an empty alt attribute
- Do not repeat the caption word for word
- Review alt text whenever an image is replaced, not only when it is first added
Image as a link
When an image is also a link, the alt text describes the destination rather than the motif. For a logo in the header it therefore reads along the lines of home page plus company name.
Charts and infographics
State the message the chart is meant to support. The complete figures belong in a table or in the running text right below, where they can also be copied.
Decorative extras
Dividers, gradients and mood surfaces carry no information. They receive an empty alt attribute so screen readers skip them instead of reading out file names.
Text inside an image
If a graphic contains written words, they have to appear in full in the alt text. Better still, place the text as real HTML above or next to the image.
Portraits
For people, name and role are usually enough, as long as appearance is irrelevant. Where the activity matters in context, add what the person is doing.
Galleries and grids
In image series every motif needs its own text. Numbered placeholders help nobody and are flagged as questionable by testing tools.
Keeping image rights and provenance in view
Images are protected by copyright regardless of how easily they can be found online. Embedding someone else's photo without a licence risks warning letters and damages, even when it happened by accident or the image is removed again quickly. The only clean route is a documented one: your own photographs, commissioned photography with usage rights agreed in writing, or licensed images with the licence record archived. Pay attention to the scope of those rights, because a licence for a website does not necessarily cover print material or social networks, and some licences require visible attribution of the author. If people are recognisable in a picture, personality rights come into play as well, which calls for consent that names the purpose and remains revocable. For staff photos, that consent belongs in the personnel file and should be reviewed again when someone leaves. AI-generated images do not remove the duty of care either: they can contain protected trademarks, recognisable buildings or faces that resemble real people, so their use should be documented. Which statements about responsibility and data processing belong on every site in any case is described in our article on the imprint and the privacy policy. A simple naming convention helps as well: descriptive file names such as workshop-heating-service.jpg instead of IMG_4711.jpg make it easier for a team to identify a picture, speed up searching the library and give search engines an additional clue about the content. They still do not replace the alt text.
- Record the origin of every image: own photograph, commissioned work, or licence with number and date
- Note the scope of usage rights, in particular duration, media and permission to edit
- Add required author credits in the intended place and carry them over during relaunches
- Obtain and file written consent for people who are recognisable in a picture
- For AI-generated motifs, document the tool, the date and the intended use
- Strip location and camera data from the metadata before images are published
- When an image is replaced, archive the old record instead of overwriting it
How XICflow delivers images and maintains alt text
In XICflow an image is uploaded once into the media library and is then provided in several sizes and in a modern format. When the pages are generated, the matching markup follows from it: variants for different screen widths, a fallback for older browsers, fixed dimensions so space is reserved, and the decision whether an image is loaded with priority or with a delay. Because the pages are delivered statically, this work happens once during generation rather than on every request. For alt text, the media library offers a dedicated field per image that is maintained together with the title and applies to every place the image is used. On request, AI image recognition suggests a description that you can accept, shorten or replace — the editorial decision stays with you, because only you know the context of the page. Images without alt text can be filtered in the overview, so gaps become visible before they show up in an audit. On multilingual sites the alt text is maintained per language, so the description matches the respective version. What that means in terms of scope is shown on our pricing and plans page, and how the approach differs from traditional manual work is explained in our background on how we work. Publishing produces consistent markup across every page, so image embedding does not vary depending on when a particular subpage was created.
Variants at build time
One original produces several output sizes in a modern format including a fallback. The browser makes the choice, and nobody has to scale files by hand.
Dimensions in the markup
Width and height are present on every image, and image areas in cards and grids are ratio-locked. The space is reserved before the image data arrives.
Alt text per image
One field in the media library serves every place the image is used. Changes therefore take effect on each page where the motif appears.
Suggestion from image recognition
On request, a description is drafted from the picture content. It is meant as a draft and is reviewed editorially before it goes live.
Making gaps visible
Images without alt text can be filtered in the overview. An undefined pile of work turns into a manageable task list.
Maintained per language
Each language version gets its own alt text so description and page content match. The same applies to image titles and captions.
A review plan for your image library
- Open every page and note which image is the largest visible element in each case
- Remove the delay from those images and give them a high loading priority instead
- Check the file sizes actually loaded and look closely at outliers above 200 kilobytes
- Determine display widths per image slot and derive two to four variants from them
- Convert photos to a modern format and provide a fallback
- Add missing width and height attributes and lock image areas to a fixed ratio
- Work through the alt text, replace file names and placeholders, empty it for decorative images
- Document origin and licence per image and request missing records
- Measure again after the changes and compare the result with the starting point