HTML Image <img>

The HTML image tag allows you to add images to your web pages.

Images are an important component of any web page and help with the visual aesthetics of a page.

They provide a good way to break up text and allow for the insertion of diagrams, infographics and charts for example to support your text.

To add an image to an HTML page, we use the img tag and load in our file using the src or source attribute <img src” />

<img src=”/wp-content/uploads/Mykonos-2.jpg” />

There are a number of additional attributes that you will also want to include.

 

1. ALT attribute

Within the img tag, it’s important for SEO and for accessibility to provide a description of the image using the alt attribute, know for alternate text.

This allows search engines to better understand what the picture is and also provides a fallback in the browser if the image doesn’t load.

 

2. Title attribute

You can also add a title attribute to the image which will display on hover.

The title can be used to provide extra info about the image.

While the alt and title tag can be a little confusing as they’re similar, try your best to differentiate them.

So your tag would look like:

<img src=”/wp-content/uploads/Mykonos-2.jpg” alt=”Mykonos sunset” title=”Mykonos from the windmills”/>

Hover over the image

Mykonos sunset

 

3. Width and Height attributes

It’s also important to set the width and the height of the image.

While there has been debate about the importance of including these dimension attribute, it’s actual important for SEO.

You don’t want your page loading an image that is 1000 x 666 and have the browser scale it down to 300 x 200.

Scaling images in the browser increases the load time, so try to use the exact image size that you will be displaying and add in your width and height attributes.

With responsive design, this may not always be possible, so you can also use CSS styling and attributes such as max-width: 100% and height: auto if you do need to resize for every screen size.

 

4. File Type and Size

Load times have always been an important aspect for web pages, however they are becoming more and more important, especially with Google placing greater importance on load time or what they call PageSpeed in their ranking algorithm.

In terms of size, as noted above, size your images for the actual dimensions they’ll display if possible.

When saving, compress your images and possibly save on a quality lower than 100% – this may require some trial and error to find the smallest file size with the best acceptable quality still.

If you’re using a CMS like WordPress, you can use a plug-in such as Smush, which will compress and optimize your images when you upload them, as well as allow you to lazy load them.

What’s lazy load you ask?

When an HTML page typically loads, it will load images that are way down the page that the user hasn’t even scrolled to, so the concept behind lazy load is to load images as the user scrolls down the page and gets close to them.

This helps with page load times and avoids loading images way down the page when the user may not even scroll that far down.

In terms of types of files, the main ones are:

JPG
Use for vibrant photography type images, can display millions of colors and can be compressed yet still look crisp.

PNG
Use for images with clean lines and clean shifts from color to color, for example a screenshot of an Excel sheet, or a screenshot of an application your using.
Main difference from JPG is that it allows for transparency however usually results in a larger file even when compressed.

GIF
Main benefit of using a GIF is when you want an animated image, to show transitions or steps or something of that nature.
Keep its usage to animations as it doesn’t perform well in the other cases.