HTML Images

A brief overview of HTML images is provided in this article, including how to add images to a web page, how to format and style images, and best practices for optimizing images for the web.

With HTML images, you can create clickable areas on an image.

Tip: Images can improve the design and the appearance of a web page.


<!DOCTYPE html> <html> <body><img src="" alt="Italian Trulli"></body> </html>


<!DOCTYPE html> <html> <body><img src="" alt="Girl in a jacket"></body> </html>


<!DOCTYPE html> <html> <body><img src="" alt="Flowers in Chania"></body> </html>

The <img> Tag: Syntax and Attributes

The Html Images <img> is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holdingspace for the referenced image.

The Html Images <img> is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

  • src – Specifies the path to the image
  • alt – Specifies an alternate text for the image


<!DOCTYPE html> <html><body><br> <br> <br><img src="" alt="alternatetext"> <br></body></html>

Specifying Image Sources: File Paths and URLs

When we talk about Html Images, the required src attribute specifies the path (URL) to the image.

Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.


<!DOCTYPE html> <html> <body><img src="" alt="Flowers in Chania"></body> </html>

Image Formats: Understanding JPEG, PNG, and GIF

When it comes to working with images on the web, understanding the different image formats available is crucial. Each format has its own characteristics, strengths, and ideal use cases. In this article, we will delve into the three most commonly used image formats: JPEG, PNG, and GIF.

JPEG (Joint Photographic Experts Group):

JPEG is a widely used image format, particularly suited for photographs and complex images with a wide range of colors. It achieves high compression rates, allowing for smaller file sizes while maintaining a good level of quality. JPEG achieves compression by selectively discarding image data that is less noticeable to the human eye. However, this compression technique results in a loss of some image details, which is known as lossy compression.

JPEG is excellent for displaying realistic images with smooth gradients, such as photographs or complex graphics. It supports millions of colors and is the preferred format for images where visual quality is of utmost importance. However, due to its lossy compression, it is not suitable for images with sharp edges, text, or transparent backgrounds, as it may result in artifacts and quality degradation.

PNG (Portable Network Graphics):

PNG is a popular image format that supports lossless compression, meaning it retains all the original image data without any loss in quality. This makes PNG ideal for images with sharp edges, text, logos, and illustrations. It also supports transparency, allowing for images with transparent backgrounds.

One of the key advantages of PNG is its ability to maintain the highest quality while preserving image transparency. This makes it suitable for web graphics, icons, and images that require a clean and crisp appearance. However, the tradeoff is that PNG files tend to have larger file sizes compared to JPEGs, especially for complex images with many colors. Therefore, it is recommended to use PNGs selectively for specific elements that require transparency or lossless quality.

GIF (Graphics Interchange Format):

GIF is primarily used for simple animations and graphics with limited colors. It supports a maximum of 256 colors, making it suitable for logos, icons, and graphics that require transparency and animation. GIF files utilize a lossless compression algorithm, which preserves all image details without any loss in quality.

GIF’s animation feature allows for a series of frames to be displayed in a loop, creating the illusion of movement. This makes it popular for creating small animated images or banners. However, due to its limited color palette, GIF is not suitable for displaying photographs or complex images with a wide range of colors. Additionally, GIF files tend to have larger file sizes compared to JPEG or PNG files, which can impact website loading times.

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:


<!DOCTYPE html> <html> <body><img src="" alt="Flowers in Chania"></body> </html>

If a browser cannot find an image, it will display the value of the alt


<!DOCTYPE html> <html> <body><img src="" alt="Flowers in Chania"></body> </html>

Tip: A screen reader is a software program that reads the HTML code, and allows the user to “listen” to the content. Screen readers are useful
for people who are visually impaired or learning disabled.

Image Title

Image tooltips with title text can be added to images using the title attribute. The tooltip will appear when the mouse is hovered over the image.

See example Below:


<!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="" alt="HTML5 Icon" title="html5" style="width:128px;height:128px;"> </body> </html>

Image at Background

HTML style attributes and CSS background-image properties can be applied to include a background image to an HTML element.

See example below:


<!DOCTYPE html> <html> <head> <style> body { background-image: url(''); background-repeat: no-repeat; } </style> </head> <body> <h2>Background No Repeat so that is would be displayed only once</h2> </body> </html>

Image Size – Width and Height

You can use the style attribute to specify the width and height of an image.


<!DOCTYPE html> <html> <body><img src="" alt="Girl in a jacket" style="width:500px;height:600px;"></body> </html>

Alternatively, you can use the width and height attributes:


<!DOCTYPE html> <html> <body><img src="" alt="Girl in a jacket" width="500" height="600"></body> </html>

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:


<!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body><img src="" alt="HTML5 Icon" width="128" height="128"><img src="" alt="HTML5 Icon" style="width:128px;height:128px;"></body> </html>

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:


<!DOCTYPE html> <html><body><img src="" alt="HTML5 Icon" width="128" height="128"><img src="" alt="HTML5 Icon" style="width:128px;height:128px;"> </body></html>

Images on Another Server/Website

When we talk about Html Images some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:


<!DOCTYPE html> <html> <body><img src="" alt="HTML5 Icon" width="128" height="128"><img src="" alt="HTML5 Icon" style="width:128px;height:128px;"></body> </html>

Notes on external images: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

Responsive Images: Creating a Mobile-Friendly Experience

In today’s mobile-centric world, creating a seamless and enjoyable user experience across devices is essential. One crucial aspect of achieving this is ensuring that images on your website are responsive, meaning they adapt and optimize their display based on the user’s device and screen size. In this article, we will explore techniques for creating responsive images that provide a mobile-friendly experience.

–> Understand Responsive Design Principles:

To effectively implement responsive images, it is crucial to have a solid understanding of responsive design principles. Responsive design aims to create a flexible and adaptive layout that adjusts to different screen sizes. This involves using CSS media queries and fluid grid systems to control the layout and styling of your web page. Responsive images are a vital component of this approach, ensuring that images adapt alongside other page elements.

–> Use the srcset Attribute:

The srcset attribute is a valuable tool for responsive images. It allows you to provide multiple image sources and let the browser decide which image to download based on the device’s capabilities and viewport size. By providing different resolutions or sizes of the same image, you can ensure that the appropriate image version is displayed for each device.

–> Implement the sizes Attribute:

The sizes attribute works hand in hand with srcset to further optimize responsive images. It specifies the sizes of the image container at different breakpoints or screen sizes. This helps the browser determine the most suitable image to download and display. By setting appropriate sizes based on the layout, you can prevent unnecessary large image downloads on smaller screens, improving performance.

–> Leverage the picture Element:

The picture element provides even more control over responsive images. It allows you to define different sources and media conditions for various viewport sizes or devices. Within the picture element, you can specify multiple source elements with different media queries, each pointing to different image sources. The browser will then select the most appropriate image based on the available sources and media conditions.

–> Consider Image Compression:

While optimizing for responsiveness, it’s important to balance image quality and file size. Compressing images can significantly reduce their file size without compromising visual quality. There are various tools and techniques available for image compression, such as using compression software, optimizing image formats, and reducing unnecessary metadata. Finding the right balance between file size and image quality is crucial for optimal performance.

–> Test and Debug:

After implementing responsive images, it’s essential to thoroughly test and debug their behavior on different devices and screen sizes. Use browser developer tools, device emulators, or physical devices to ensure that the images are resizing and adapting correctly. Pay attention to image clarity, loading times, and any potential layout issues that may arise.

Animated Images

HTML allows animated GIFs:


<!DOCTYPE html> <html> <body><img src="" alt="Computer Man" style="width:48px;height:48px;"></body> </html>

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text in Html Images:


<!DOCTYPE html> <html> <body><p><img src="" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p><p><img src="" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p></body> </html>

Tip: To learn more about CSS Float, read our CSS Float Tutorial.

To use an image as a link, put the <img> tag inside the <a> tag in Html Images:


<!DOCTYPE html> <html> <body><a href="default.asp"> <img src="" alt="HTML tutorial" style="width:42px;height:42px;"> </a></body> </html>

Common Image Formats

Here are the most common image file types when it comes to Html Images, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

AbbreviationFile FormatFile Extension
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format in Html Images.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg

HTML Image Tags

<img>Describe a picture
<area>Create a clickable area within an image map in Html Images
<map>Create an image map by defining it
<picture>Provides a container for multiple image resources

Our HTML Tag Reference can provide you with a comprehensive list of all the HTML tags that are currently available.

Benefits of Using HTML Images

Using HTML images in web design has numerous benefits. In addition to these benefits, there are a number of others as well:

Enhancing visual appeal: Images can enhance the visual appeal, engagement, and interest of a website. Your website design can be enhanced by incorporating high-quality images to create a more immersive user experience.

Communicating information: Images can be used to communicate information in a way that is more engaging and memorable than text alone. A product image or infographic can communicate complex information more effectively than a long block of text, for instance.

Creating a brand identity: The use of images can help a website maintain a consistent brand identity. A cohesive and memorable user experience can be created by using images that align with your brand’s color scheme, style, and messaging.

Improved website performance: Optimizing images for web use reduces loading times and reduces bandwidth consumption, thereby improving website performance.

Chapter Summary

  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
  • Use the CSS float property to let the image float to the left or to the right

Note: Loading large images takes time, and can slow down your web page. Use images carefully.

Don’t forget to share this article with your friends by clicking the links below if this article benefited you in any way.

We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *