HTML. Embedding images. What to test?

We all can agree that images make content more vivid and visual. Plain text does not attract much user attention, causes boredom, and makes it difficult to perceive information. That is why it is very important to emphasize images, both the background one and the image that complements the content.

Before you can learn how to test images on web pages and what you should pay attention to when testing them, you need to understand how images ended up on the page. In other words, you need to know how images are inserted, what tags, parameters, and image formats are used, etc.

So to insert a graphic image in HTML you need to use the <img> tag. This tag has two mandatory attributes:

• srс – allows specifying the path to the file;
• alt – used as an alternative text instead of the image in case it is not loaded.

Syntax:

<Img src = "image name.jpg" alt = "alternative text">

If the image is taken from another web resource instead of being in the root folder of the project, the image from the tag can be a link, and the <img> tag is put inside the <a> tag.  

Syntax:

<a href="page.html"> <img src = "image URL" alt = "coming soon"> </a>

Alternative text for informative images should have the same meaning as the image.

How to test?

If the image is not displayed on the web page and there is no alternative text, it is necessary to check the image using the developer tool. To do this, open DevTools (press F12 in Chrome), click on the icon in the inspector  and select the element you want to check. The attribute may display an empty value alt = "", which means that this image is only used as a decoration for the site and does not provide any information to the user.

If there is such a picture display on the site, you can immediately open a bug, as most likely the reason is an incorrectly written path:

The align attribute of the <img> tag is one of the ways to align images. Images can be aligned relative to text or other images on a web page. There is a disadvantage of this attribute - it is not supported in HTML5, so it is better to use CSS instead.

For example, using such attributes as margin, line-height, etc. in CSS, you can experiment with pixels if icons are not visually aligned with each other.

Image sizes

Without setting the dimensions, the image is displayed on the page in the original format. Using the height and width attributes in HTML and XHTML or CSS, you can resize an image. If only one of the attributes is set during resizing, the other will be automatically adjusted to keep the image proportions.

Graphic file formats:

Let's look at existing formats and their usage: 

• JPEG – suitable for photos;
• GIF – perfect for image compression;
• PNG – has the best features of GIF and JPEG formats;
• APNG – based on the PNG format, supports transparency and permits animation;
• SVG – an image is made of a certain set of geometrical shapes in XML format. Images of this format can be resized without losing quality;
• BMP –an original raster image based on a rectangular pixel grid;
• ICO – a format for storing file icons in Microsoft Windows. You can find the icon images here.

The background image is a part of the image that does not change after specific operations (for example, changing the browser window extension, or displaying software on different devices). The background image should look neutral, not stand out among other content images, and not conflict with the main style of the project and its theme.

Images play an important role on a website. People perceive most of the information visually. As a rule, website visitors are attracted to graphic elements first. They entertain the user, facilitate the perception of information, set the right accents, and form a general opinion about the content. That's why it's so important that the quality, design style, and size of images look perfect on the pages, especially since it's not difficult to test.