Web Images: Best Practices and HTML Code In One Useful Guide
Images are everywhere on the web. They are the most commonly shared content on social media and every modern web page contains at least one image while most contain a handful, a dozen, a hundred, or more. Yet despite their popularity, many websites are not using images to their full potential.
- 1 History of the img tag
- 2 Five Tips for Using Images on the Web
- 3 Two Other Ways to Add Images to a Web Page
- 4 Conclusion
- 5 Related Elements
- 6 Tutorials and Resources
History of the
Prior to 1993, the web was not a very friendly place for images. But in 1993 the
img tag was proposed and Mosaic, the first browser to display images inline with text, was launched. Before Mosaic and the
img tag images were loaded in a separate window or downloaded and opened with an image viewer. However, with Mosaic and the
img tag added to HTML, the mid-1990s saw rapid growth in the popularity of the web. While the massive growth of the web in the early 1990s cannot be attributed entirely to improved support for images, it was one of a few factors that marked the transition of the web from being a network for researchers to a communications platform for the masses.
Five Tips for Using Images on the Web
Adding images to your website is great, but using images correctly is better. Images can improve the appearance of your site and can help explain concepts that are difficult to put into words. However, used improperly, images can be ineffective, create accessibility issues, and even land you in legal trouble. To help you avoid those pitfalls, here are our top five recommendations for using images on the web.
Only Use Images You Have the Right to Use
Have you ever heard someone say this before?
“Did you know you can use Google image search to find any image you want?”
While that may technically be true, it’s a terrible way to find images for your website. Many images are protected by copyright laws, meaning that using them without permission can land you in very hot water facing legal and financial penalties. This isn’t something we’re making up or exaggerating. Let the misfortune of teach you an important lesson: only use images you’re sure you have the right to use. There are a few stock image sites that proudly proclaim that you can use their images free-of-charge without any attribution whatsoever. Stick to these sorts of sites for your images or buy images from stock photo sites. Wherever you source your images, be sure to follow licensing and attribution guidelines very carefully for every single image you post.
Keep Your Content and Website Accessible
If you are using an image that adds meaning or functionality to a web page, think about the experience of visitors using a text-only browser or screen reader. Will they be able to use the website and fully understand the web page content? Use the
alt attribute to assign alternate text to your images to ensure your content and website are accessible.
Always Provide Alternate Text
As we just mentioned, alternate text is what website visitors rely on if they can’t see your image. However, the use of
alt text goes beyond just adding a short description to your images. Did you know there are times when you should use the
alt attribute but leave it empty? It’s true! If you have an image on your site that is purely aesthetic and does not contribute meaningful content to the site, use the empty attribute
alt="" so that text-only browsers and screen readers will know to skip it entirely. The
alt attribute should be used on every single
img on your website. To learn more about this topic read our article on the rules of
Know When to Use the Background-Image CSS Property
There are two ways to add images to a web page.
- With the
- With the
When should you use each? Use
img when the image is part of the content of the web page and use
background-image when the image is a part of the page presentation or visual design. While these guidelines cover the majority of images uses, if you want more specific guidelines you can find a great discussion on the topic at StackOverflow.
Optimize Images for the Web
Image files can be very large, and web pages containing multiple large images tend to load very slowly. Web pages that load slowly often have visitors who choose to click away from the site once they realize that it is loading slowly. Optimizing images for the web can reduce web page load times dramatically and give a boost to website traffic as fewer visitors are lost due to slow page loading. Take the time to learn about optimizing images for the web to ensure your website visitors have the best experience possible.
Two Other Ways to Add Images to a Web Page
HTML5 includes two new elements which can be used to add greater meaning to images and to give developers greater control over how visual elements are rendered different devices. These two elements are the
figure elements. These elements each have a specific purpose and aren’t intended to be used as a general-purpose replacement for the
img tag. Instead, think of these two elements are special-case elements you can use in unique situations to add greater meaning to certain kinds of images.
picture element is used to identify the version of a picture that should be used based on the results of a media query. It is particularly useful when there are specific reasons why a certain version of a picture should be used rather than another for a specific screen size. If all you’re trying to accomplish is to provide multiple image sizes for a variety of screen sizes and resolutions, the
img tag and
srcset attribute are a better option since they allow the browser to identify the best picture for the device. Use the picture element when the picture options available to the browser are not identical resized versions of each other and are different in some way. For example, if you have an image with a text overlay, when the image shrinks the text may need to increase in size relative to the image to remain readable on smaller screens. This is a great time to use the
picture element so that you can explicitly tell the browser which image to use. On the other hand, if you just want to provide a smaller version of an image for use on smaller screens use the
img tag and
srcset attribute. Learn how to use
srcset here. The
picture element is not yet fully supported by all browsers. So if you use this new HTML5 element, be sure to provide an
img fallback for visitors using unsupported browsers.
figure element is an HTML5 feature used to identify an item on a web page that is relevant to the rest of the web page content, but does not depend on appearing in a specific position on the page. Content contained between
figure tags should be able to be moved to a different position on the page without affecting it’s meaning or the meaning of the rest of the page content. The way the HTML specification puts it is that “the figure element represents a unit of content…that is self-contained”. Graphs, charts, and images are all common
figure elements, but virtually any type of content, including videos, audio, and text can be nested between
figure tags. The
figcaption tag may optionally be added within the
figure element to assign a caption to the content of the figure.
What would the web be without cat memes and pictures of your friends on social media? A much more boring place, that’s for sure. Take the time to learn how to use images properly and you may find that your website’s traffic rewards your efforts generously.