What is alt text and how do I write it?
Alt text is a short description attached to an image. Screen readers speak it, search engines read it, and it shows when the image fails to load. Describe what the image shows in a few plain words, as you would to someone on the phone.
- Good: “Hand-tied bouquet of pink peonies in a glass vase”.
- Poor: “image1.jpg”, or a string of keywords.
- Purely decorative images should have an empty alt, so screen readers skip them.
Which format and size should images be?
Use WebP or AVIF for photographs; they are far smaller than JPEG at the same quality. Never upload an image wider than it will be displayed: a 4,000-pixel photo shown in a 600-pixel column wastes most of its download.
Why should every image have a width and height?
With them, the browser reserves the right space before the image arrives. Without them, text jumps down the page as each image loads, which is the layout shift that Core Web Vitals measures and visitors find irritating.
What is lazy loading?
An instruction to load an image only when the visitor scrolls near it. Use it for images further down the page. Do not use it for the main image at the top, which should load immediately.