HTML Images

To embed an image in the HTML page, we use the <img> tag. It's an empty one, so you don't have to worry about closing it. The src and alt attributes usually are the first thing in the <img> tag. The most common image file formats supported by all browsers are APNG, GIF, ICO, JPEG, PNG, WEBP, and SVG^.[1]

The required src (an abbreviation for "source") attribute lives inside the <img> tag. Its primary role is to specify where the image is stored on the computer and usually contains a URL. You have to make sure the image stays right at the location you indicated in your code. Otherwise, your users will end up with the broken link icon and the alt text, which can be frustrating.

Here's a memory trick for you: "src" is short for source. It means that after <img src=" " you fill in the URL of an image, which can either be a relative and concise path or absolute and detailed.

The alt attribute, aka alt description, provides a text explanation for an image if users, for some reason, cannot view it. It could be a slow connection or an error in the src attribute. Not to mention, alternative text is a lifesaver for screen reader users. In a nutshell, this device reads HTML code aloud to visually impaired individuals or those with learning disabilities, making the content accessible to everyone.

Ensure that the alt text is relevant to both the image and the entire page. Your aim is to provide a description that is as detailed and precise as possible. This way, if the image is missing or inaccessible to users, they can still grasp the intended message.

Next, confirm that the alternative text aligns with the website's topic and incorporates relevant keywords. Lastly, remember that screen readers and search engines already recognize images, so there's no need to redundantly state "Picture of..." or "Image of..." in the alt text.

Screen-reading tools typically stop reading alt text at the point of 125 characters, so keep the alt text short but informative.^[2]

The alt is short for alternative text. Don't expect it to show on mouseover — it's not a tooltip. Alt attributes exist for screen readers and search engines while crawling the page. Generally, we should try to make it descriptive yet concise, and avoid being too subjective or making it funny or witty.

The width and height attributes define image measurements in pixels. It's important to specify these image properties. Otherwise, the web page might flicker while the image loads, which may cause frustration or increase eye strain.

To specify image width and height, you can use the style attribute. It goes after the alt attribute and defines images in pixels. Why do we need the style attribute if we already have width and height attributes? Well, they're all relevant and valid, but the style attribute prevents CSS from altering the size of images.^[3]

As we already mentioned, the src attribute identifies the image location. When dealing with assets like images, developers often prefer including them in a folder containing their HTML document. If it's on your computer in a sub-folder, you should mention the folder name using a forward slash in the src attribute. The syntax may look like this: <img src="/folder name/filename.jpeg">.

The same logic applies if you use images from your own website. Usually, the best option is to use relative URLs in the src attribute rather than absolute URLs. It prevents the URLs from breaking if you change a domain.

If we use images from other servers or websites like image stocks, we need to specify the full route to their location. The absolute URL is the most straightforward and the only way to link an external image. You should write down the protocol, the domain, and the path to the image.

Using images from other resources implies some risk of copyright violation. Either get the author's permission or use visual assets only from open sources like Unsplash, Pexels, or Pixabay.

Moving pictures became a reality with the arrival of GIF images. To insert them on an HTML page, all you need to do is specify the image location in the src attribute and set the dimensions (width and height). You can also consider WebP, AVIF, or APNG formats for animation sequences.

An image can work as a link and open a popup window or show a full-sized picture in a new tab. To do so, you need to insert the <img> tag inside the <a> element, making sure you specify the src attribute, alt text, and appropriate properties of width and height.

With CSS properties, we can make an image float by using text flows. In other words, the float property aligns the image to the left or right of its container or another floating box, allowing text and inline elements to flow around it.

What's wrong with the align property? Well, there's no such thing! 🤷🏽‍♂️ The text-align property, as opposed to the float attribute, doesn't affect the image but rather the content around it.

The float property applies to the image and takes a seat inside the style attribute. Remember to specify whether you want the image to float to the right or the left of a text. Plus, you can set the margin in pixels for all sides of the image box if you don't want the text to stick too closely.

Any element on the HTML page can have an image background. For this matter, we don't need the <img> tag. Instead, we use the HTML style attribute and the CSS background-image property. You can decorate the whole page this way if you apply the style attribute to the <body> element.

Linguistically, there's not much difference between the words "image" and "picture." In the HTML world, it's a completely different ball game. The <picture> element allows developers to specify multiple image sources so that the browser can choose the one that better fits the current view or device. To define which image is the most suitable in this or that case, we use a media attribute. It sets image dimensions that are more proper for a specific screen or device.

One more difference between <img> and <picture> tags is that the <picture> element requires a closing tag and is actually a "parent" for the <img> tag.