While the bulk of content on the web is text, images play an important role. Images support your content and can help illustrate concepts more clearly or provide an interesting break from content. They can also encourage people to read your content, but not every visitor to your site necessarily has images enabled.
In this post we’ll be talking about the best practices when it comes to using images on the web.
To insert an image into an html document we use the <img> tag. We need at least the src and alt attributes, and preferably the width and height attributes as well.
Image tag attributes
There are four important image tag attributes. The only required attribute is the ‘src’ attribute, however the other three mentioned here are important as well.
The src attribute is pretty straightforward, it tells the browser the location of the file.
The alt attribute is used to describe the image. This description will be visible before the image loads (like on a slow connection), by screen readers (blind users or users with poor site), or if an image referred to by the src attribute cannot be found.
width & height
The width & height attributes are important to specify so the browser knows before beginning to render how much space the image will need. However, this may also depend on the layout of the site and if responsive/fluid images are being used.
Optimizing for Search
There are a couple important factors to consider when optimizing images for a website. Here we’ll talk about the alt tag and image size and compression.
Optimizing your alternate text for images
The alt attribute is very important, not just for search but to ensure your website is accessible to all users. Well written alternate text is human readable (not just a list of keywords) and concise (aim for less than 10 words). Search engines will use this text to index your images. While it’s not the only technique that may be used (surrounding context, file name, and other factors may contribute as well), it is best practice to always include alt text.
Optimizing image size
Site speed is important to both users and search engines. If your site does not load quickly enough users are more apt to click the back button and look somewhere else. If your site is really slow search engines like Google are likely to rank your site lower or even not index it at all.
Images often make up the bulk of the size of a page, so it’s important to ensure that the correct image format and compression is used.
When saving an image for the web you will want to make sure it’s saved at the size it will be shown on the web. I’ve often encountered images taken directly from a camera uploaded to a website and re-sized by the web browser. The sizes can differ wildly, but this can easily be the difference between downloading a 12 megabyte image vs a 40 kilobyte image.
It’s very simple to open your image up, re-size to a smaller size, and save as a .jpg. In software like The Gimp, when saving as a .jpg you will be given the option of choosing compression quality and be able to preview the result.
This week was just a brief overview of what to consider when using images on the web. I’ve gone through the basics, but there is plenty more to learn out there, such as responsive images, svg format images, image sprites, and more image optimization tips.