Well-designed images and infographics are the key to engaging and retaining your site visitors. You can create a good user experience by ensuring your images load properly on different devices and screen sizes. Knowing how to add an image in HTML and make it responsive is an essential part of a web developer’s toolkit.
The HTML <img> element displays a static image by embedding the image directly into a site page. The content of the image tag is “replaced” by an external resource, which is the image.
For instance, <img src ="https://www.mywebsite.com/computer.jpg"/> references the file stored on the My website server named “computer.jpg” and fetches the image content from that location.Image tags are void elements, which means they can’t have child content or an ending tag.
These tags are also self-closing, so they don’t need another closing tag to complete the reference call.
Typically, you can have a minimal <img> tag with just the src and alt attribute to add the original image and its alt text to the site page. If you want to customize your image, you can also style it with various attributes such as height, width, etc..
A site image is flexible — you can customize the appearance and behavior of the image through predefined HTML attributes. These attributes let you change the image's dimensions and metadata without editing software. Some of the most important HTML attributes for customizing your image include:
Apart from these 4 major attributes, you can also add more contextual information to your HTML images via other attributes:
Crossorigin — lets you fetch content and images hosted on third-party websites (i.e., not on your server)Loading — specifies conditions or constraints for image loading
Longdesc — contains a URL to a detailed image description
Referrer policy — lets you control how much information the browser shares about the referrer
Srcset — provides multiple versions of an image, each tailored for different screen resolutions or pixel densities
Usemap — associates an image with a client-side image map
Src (i.e., source) is a core attribute of the image tag. Src specifies the source of the image to display via a relative or absolute URL path to the image file. During the page render, the browser loads the image content from this source path by sending a request.
<img src="computer.jpg"/>
<img src="images/computer.jpg"/>
The alt attribute (i.e., alternate text) specifies the text that screen readers pick up and that is displayed if the source image fails to load. Alt text is also critical to ensure the accessibility of a site. Screen readers pick up the image’s alt text, which makes your site more accessible by people who are blind or have a visual impairment. It’s also helpful to people with sensory processing or learning disabilities.
Additionally, alt text improves user experience by providing image context in case of network or image issues. Search engines also parse this attribute to gather information about the image and understand its relevance. The more descriptive your alt text is, the better search engines can understand the context of the image.Here’s an example of alt text combined with a source tag:
<img src="computer.jpg" alt="A computer on a table"/>
Width and height attributes determine the dimensions of the image. Although these attributes are optional, you can use them to specify strict dimensions for your image to improve loading times and avoid shifts in the site page’s layout. If you don’t specify these attributes, the image defaults to its original size, which may be an issue in the case of larger images.Typically, these attributes use pixels as their primary unit, but you can customize this as well.
Example:
<img src="computer.jpg" width="500" height="300" />
The title attribute adds a tooltip when a site visitor hovers over the image. You can use it to provide additional information or context about the image.
Example:
<img src="computer.jpg" alt="A computer on a table" title="A room containing a table and a laptop" />
There are 2 ways to link to an image from a site page:
• Provide a full path or address (URL) to a file on the Internet
• Provide the file path relative to the location of the current site page
The src attribute contains a URL pointing to the image you want to embed in the page. Without an src attribute, an <img> element has no image to load.For example, if your image is called hero-banner.jpg and it’s in the same directory as your HTML page, you could add the image like this:<img src="hero-banner.jpg" alt="featured product hero banner"/>If the image is in an “images” subdirectory, then you'd embed it like this:<img src="images/hero-banner.jpg" alt="featured product hero banner" />
You could also embed the image using its absolute URL, like this:<img src="https://www.mywebsite.com/images/hero-banner.jpg" alt="featured product hero banner" />
Pro tip: We don’t recommend using absolute URLs because they’re not as maintainable as relative URLs. If you move your site to a different domain in the future, you’ll need to update all your absolute URLs to include the new domain. Instead, we recommend you host the images on your site’s server, and use relative URLs for your images.
Once you’ve added a picture in HTML on your site page, you can then customize the image. For instance, you can set the height and width of your hero banner to screen width:
<img src="hero-banner.jpg" height="720" height="1280">
And then you can add alternate text to the image:<img src="hero-banner.jpg" height="720" height="1280" alt="featured product hero banner">
Now if you want to see your image on the site page, you can deploy your code and refresh your page. In case you want to adjust your image multiple times, this process can get a bit cumbersome. Webflow generates this HTML code as you add images and build on the Designer canvas.
Learn how to add images to your site in the Webflow Designer.
You can add images visually using drag and drop tools in the Webflow Designer. Webflow generates production-ready HTML and CSS code as you add and style image elements.In Webflow, you can:
Try this in Webflow →Most users have a wide digital footprint that extends across multiple devices with massively different screen sizes. You’ll want to ensure your site — and consequently, images in your site — account for these devices and render correctly in them. Adding images via code requires writing the <img> tag with the necessary attributes.
<img src="hero-banner.jpg" height="720" height="1280" alt="featured product hero banner">
Along with images, you can add other interactive elements and media to your site such as videos, forms, sliders and more. You can also use style properties like box shadows and borders to make your media elements look more modern.
