Follow these practical steps to improve image discoverability, accessibility, and performance.
1. Use Descriptive Image File Names
Before uploading an image, rename the file to describe its actual content. Avoid generic names such as IMG_1234.jpg or image-final.png.
For example:
- Generic: IMG_1234.jpg
- Descriptive: cataract-surgery-procedure.jpg
Use concise, meaningful words separated by hyphens. Include a keyword only when it accurately describes the image. Avoid repetitive keyword stuffing in file names.
2. Write Accurate Alt Text
Alt text describes the relevant information conveyed by an image. It should be specific, concise, and appropriate to the image's purpose.
For example:
- Poor alt text: best cataract surgery eye hospital cataract doctor
- Better alt text: Ophthalmologist examining a patient's eye before cataract surgery
Do not force keywords into every image description. Decorative images that do not convey meaningful information should generally use an empty alt attribute, allowing assistive technologies to skip them.
3. Choose the Right Image Format
Selecting an appropriate image format can help balance visual quality and file size.
- WebP: Often provides good compression for photographs and other web images.
- AVIF: Can offer efficient compression with good visual quality, depending on the image and browser support.
- JPEG: Commonly used for photographs and widely supported.
- PNG: Useful for graphics requiring lossless quality or transparency.
- SVG: Suitable for scalable vector graphics, such as logos and icons.
Choose the format that meets the image's visual requirements and your website's compatibility needs.
4. Compress Images Without Sacrificing Quality
Image compression reduces file size so webpages can transfer images more efficiently. Use an image optimization tool or your website's image processing system to compress files before publishing.
Avoid applying a single file-size limit to every image. The appropriate size depends on its dimensions, visual complexity, display requirements, and quality needs.
Always inspect compressed images to ensure that important visual details remain clear.
5. Use Responsive Images
Responsive images allow browsers to select suitable image resources based on the user's screen and display requirements.
HTML features such as srcset and sizes can help browsers choose an appropriate image variant. This avoids unnecessarily downloading a large desktop image on a small mobile screen when a smaller version is sufficient.
Also specify image dimensions when possible to help browsers reserve the correct space and reduce unexpected layout shifts.
6. Optimize Image Loading
Images that appear immediately when a page loads should not be delayed unnecessarily. For example, a prominent hero image may be important to the page's Largest Contentful Paint (LCP).
Lazy loading is generally useful for images positioned below the initial viewport because the browser can defer downloading them until they are closer to being displayed.
However, avoid applying loading="lazy" to an important above-the-fold image that needs to load quickly.
7. Provide Relevant Image Context
Place images near the text they illustrate. Use descriptive captions when they provide useful information, and ensure that the page title and surrounding content accurately reflect the image.
For websites with many images, such as online stores or photography websites, an image sitemap can help search engines discover image URLs that might otherwise be difficult to find.