Images often represent 50% of a page's weight. Optimizing them improves your SEO, loading speed, and accessibility.
The alt attribute (alternative text) describes the image content for:
Image search rankings
Screen readers
If image fails to load
Code example:
<img src="chocolate-cake.jpg" alt="Homemade chocolate cake decorated with strawberries" width="800" height="600">
Describe what the image shows, not what you want it to be.
✓ Good
alt="Team of developers working on a project in a modern office"
✗ Bad
alt="image1" or alt="photo"
If relevant, include your keyword in the alt text, but don't force it. Keyword stuffing is penalized.
Rename your images before uploading.
✓ Good
homemade-chocolate-cake.jpg
✗ Bad
IMG_20240115_123456.jpg
Defining dimensions prevents "layout shift" (CLS) during loading.
<img src="photo.jpg" alt="Description" width="800" height="600">
Load images only when they enter the viewport.
<img src="photo.jpg" alt="Description" loading="lazy">
Use WebP or AVIF for lighter images with the same quality.