ToDo: frame the question
Also the reason you’re doing this is for search engines to give you traffic, but I’d like to reframe it - it’s really about you giving users a better experience. And naturally search engines will reward you that...
- You should use source sets to serve smaller files (WebP, SVG, etc) to all users with modern browsers and fall back to JPEG or PNG on older browsers. This will make the site faster for users - saving everyone bandwidth and improving rendering time by 30%, or more in some cases.
This also goes for video where you can use WebM instead of MP4 or even GIF.... but IMHO it’s better to host video on YouTube then host your own - only problem is YouTube doesn’t have an upload API - so not that feasible for user generated content sites. Totally feasible for small Wordpress / Shopify / Medium etc publishers.
This idea of using modern compression and falling back even goes for text files - HTML/CSS/JS etc - so make sure you’ve got brotli/gzip tuned on and these files are minimized... but this is handled automatically for most people reading this.
- You can also use the <source>‘s media attribute to serve smaller files to mobile devices and larger files to users with 4K monitors. Todo: add snippet
- Continue to use alt text to describe your image to users using accessibility browsers (visually disabled users, for example) - search engines also use this alt text for context about the image. You can test the alt text by telling your browser not to download images - alt text will show up in their place. (Todo: add image of lynx browser)
- Use proper file names for the images so that if a user downloads it they aren’t stuck with a huge random string named file in their downloads folder. - Search engines also use this file name for some context as well. Todo: screenshot of downloads folder
- Prefer using <img> tags over css background images, again for accessibility reasons. CSS images won’t print, don’t have alt text.
When to use IMG vs. CSS background-image?
In what situations is it more appropriate to use an HTML IMG tag to display an image, as opposed to a CSS background-image, and vice-versa? Factors may include accessibility, browser support, dyna...
For body/background images you can often get away with more compression as well - since these aren’t the focus of the page, users will usually not notice the loss of quality in more highly compressed images