Your pages would look very plain without any images, and an image can be used to communicate a lot of information to a user visually. Adding an image to your page is quick and easy with HTML. Remember, images are void tags (there is not closing tag/it is not a tag that requires a pair). Images are also inline elements.
Required Image Attributes
Image tags have two required attributes. The source (location) of the image and the alternative text (alt) which describes the image as though the person on your site cannot see it. Both of these attributes must be present on each image tag on your page in order for your code to validate.
<img src="" alt="">
Other Image Attributes to Include
While the width and height attributes are not required in order for you images to be valid, they are important for your SEO and usability. These attributes accept a single, numerical value with no units, and should use the actual width and height of your edited image. The values are pixel values. Including these values tells the browser how much space to leave on your page for an image while it is loading your content, and prevents the site content from jumping around while the page loads. The image below would display at 100px wide by 100px tall on the page.
<a href="#" aria-label="Go to site home page"><img src="images/logo.png" alt="" width="100" height="100"></a>
Image Sizes
You should also edit your images so that they are the size that you need for your page. Respect the image’s aspect ratio (not using that will result in your image looking distorted). Leaving your image files sizes too large means that your page will take much longer to load, and trying to display an image at a bigger size that it should be will result in it looking blurry and of low quality. Editing these file sizes improves usability and SEO. You can use Adobe Photoshop, the Preview app on your Mac, and many other programs to edit an image’s size.
Image Accessibility
Because images can only be viewed by sighted users, and mean nothing to the bots crawling the web and adding information to search engines, it’s important to keep in mind that there are things you need to do to ensure that your images can help all users.
Descriptive Alternative Text
When writing alt text for your images, imagine that the user cannot see the image at all. Describe it in a way that a person who had never seen the image before could picture it in their head by reading your description.
If your site sells shoes, the alt text for your shoe images should not be “shoes” or “tennis shoes” or something equally not helpful or descriptive. Would you buy a pair of shoes without ever seeing them after that description? Hopefully not. The descriptive alt text is important to users browsing your site with a screen reader, and it helps improve your SEO, because text is easily understood by bots.
Descriptive File Names
It is also important to make sure that your image files are named properly, as that is also text that can be interpreted by bots. Naming your files something like “image.png” or “screenshot.png” isn’t helpful. Naming them something like “golden-retriever.jpeg” helps you to recognize what the image might contain.
Images as Content
The notes above are important for the images on your site that your users will view and that they need to be able to view in order to properly understand your page content. Think of things like product photos or location photos. If a user wants to see or purchase your products, they need to know what they look like and your page would not be the same without them, as it wouldn’t make sense.
This type of image needs both a source (using a relative link) AND alternative text (that is descriptive). The example below would display an image of device mockups with different screens from a responsive website on them. All images are placed into the “images” folder inside of my project and linked relatively to the current page.
The relative link tells this to the browser: “Open the folder named “images” then find the image named “responsive-website.jpeg” and display it.
<img src="images/responsive-website.jpeg" alt="responsive website shown
displayed on multiple devices. This site displays modern furniture
against neutral colors and has a clean look overall" width="400" height="300">
Decorative Images
Decorative images are a bit different. In one case, you would add them to your HTML, and we’ll discuss that below.
Decorative Images In HTML
When adding an image to your site that doesn’t need to be described to the user, you’ll generally want to add it using CSS. However, sometimes you want to add them in your HTML because they are needed there instead. This happens in cases where you’re adding a link to your page that is wrapped around an image only and doesn’t have any link text.
In the case where you’re adding an image to a link in place of any text, you will not add any alternative text to the image. Instead, you will add an aria-label attribute to the anchor tag wrapped around the image. The link will still work the same way for any user, but for those who are navigating your site with a screen reader, the text inside the attribute will tell them what happens when they click on the link.
<a href="#" aria-label="Go to site home page"><img src="images/logo.png" alt="" width="100" height="100"></a>
Decorative Images In CSS
For images that are truly only for decoration on your page, you should add them using CSS (covered in a future module). A decorative image is one that you could literally remove from your page and the user wouldn’t be missing anything. Think of things like background patterns, or decorative image backgrounds. These do not need alternative text, as they are purely to make your site look good. This is why we add them with CSS. They are part of the design, not the content.
GIT Coding Club 