Using images makes your web pages visually more attractive to the visitors. Pictures help to better convey the essence and content of a web document: that's why today you will learn how to add images to HTML files.
The <img> tag and its attributes
The <img> tag allows you to insert an image on a web page. It has a mandatory attribute src, which is used to specify the path to the desired graphic file:
<img src="assets/image.jpg">In the example above, assets/image.jpg is a link to the desired image.
Another useful attribute of the <img> tag is alt. It is not obligatory, but its indication is considered good practice.
The alt attribute sets an alternative text for images. It allows users to get text information about the image if the function of uploading images is disabled in their browser. Images are always uploaded later than the browser receives information about them, so alt is also useful in case of slow Internet connection. Also the alt attribute is important for people with visual impairment who use screen readers. Consider the example of this attribute:
<img src="products/sneakers.jpg" alt="White sneakers on the platform">Here, the phrase "White sneakers on the platform" is an alternative text.
Alternative text can be displayed on the page in another case: if the path to the image is incorrectly specified. You can check it by trying to execute code from the example.
You can also attach an image from all over the internet. Let's see how:
<img src="https://images.com/photo-1677629828138" alt="Not clickable, a random free image from internet">src and alt are not the only attributes available for the <img> tag: the full list of attributes can be found on the MDN web site.
<img> is an inline element. It is often placed inside a block-level element, for example, <div>.
Formats
There are several different image storage formats, and they all have their pros and cons. Let's briefly consider the most common formats:
JPEG (Joint Photographic Experts Group) is most commonly used to process and store photos. It is recognized by all browsers and devices, and it provides a controlled degree of compression.
PNG (Portable Network Graphics) provides the ability to compress files with little or no loss of quality and supports transparency. It is mainly used to store pictures, diagrams, and other graphic elements with transparency.
SVG (Scalable Vector Graphics) provides the ability to scale files without changing their quality, supports transparency, and allows you to save both still and animated images. Usually, it is used to create logos, icons, and simple illustrations.
ICO (Windows icon) is used in situations when you need small pictures of a fixed size, such as labels on the desktop, and small icons on tabs that are called favicons. The format supports transparency and allows only small-sized drawings. A picture of this format is displayed next to the site address or bookmark in your browser.
GIF (Graphics Interchange Format) supports simple animations and transparency and also provides compression without loss of quality. For animation sequences, you should prefer WebP, AVIF, or APNG image file formats.
WebP (Web Picture Format) is a better choice for images and animated images. Also, WebP provides better compression than older formats like JPEG and PNG.
AVIF (AV1 Image File Format) is a new image format and few new browsers support it. Because of its high performance, it'd be a good choice for images and animated images.
APNG (Animated Portable Network Graphics) is a better choice for lossless animation sequences and as GIF is not more performant, APNG is used in such places.
The older image formats like JPEG, GIF, and PNG have recorded poor performance as compared to the newer image file formats like WebP, AVIF, etc. However, the browsers that do not support the newer formats are already unpopular among users and we should adopt to newer file formats as and when possible.
Conclusion
Bright pictures on a website serve a few important purposes: they help visually divide the content, and motivate users to take action such as buying a product or reading an article. Now you know how they can be added to a web page and what formats are suitable for graphic files with different content.
Try not to overuse images on the site and be wise about their size and location, since the competent design is one of the main factors that help to keep the target audience engaged.
Read more on this topic in Say Goodbye to Blurry Images with srcimg on Hyperskill Blog.