Images
A web page’s appearance and design can be enhanced with images.
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Italian Trulli" title="Images 2" data-lazy-src="pic_trulli.jpg"><noscript><img decoding="async" src="pic_trulli.jpg" alt="Italian Trulli" title="Images 2"></noscript>
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Girl In A Jacket" title="Images 3" data-lazy-src="img_girl.jpg"><noscript><img decoding="async" src="img_girl.jpg" alt="Girl In A Jacket" title="Images 3"></noscript>
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Flowers In Chania" title="Images 4" data-lazy-src="img_chania.jpg"><noscript><img decoding="async" src="img_chania.jpg" alt="Flowers In Chania" title="Images 4"></noscript>
HTML Images Syntax
An image can be embedded into a web page using the HTML <img> tag.
Technically, photos are linked to web pages rather than put into them. The relevant picture is held in place by the <img> tag.
The <img> tag lacks a closing tag, is empty, and just has attributes.
The <img> tag necessitates two attributes:
- src: Indicates the image’s path.
- alt: Indicates a different text for the picture.
Syntax
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Alternatetext" title="Images 5" data-lazy-src="url"><noscript><img decoding="async" src="url" alt="Alternatetext" title="Images 5"></noscript>
The src Attribute
The path (URL) to the image is specified via the mandatory src property.
Remark: Upon loading a webpage, the image is loaded from a web server by the browser and inserted into the page. Because of this, ensure that the image remains in the same location with respect to the website; if not, your visitors will see a broken link icon. If the browser is unable to locate the image, the alt text and the broken link indicator will be displayed.
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Flowers In Chania" title="Images 4" data-lazy-src="img_chania.jpg"><noscript><img decoding="async" src="img_chania.jpg" alt="Flowers In Chania" title="Images 4"></noscript>
The alt Attribute
If the viewer is unable to view an image due to a sluggish connection, a mistake in the src element, or because they are using a screen reader, the necessary alt attribute offers an alternate text for the image.
The image should be described by the alt attribute’s value:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Flowers In Chania" title="Images 4" data-lazy-src="img_chania.jpg"><noscript><img decoding="async" src="img_chania.jpg" alt="Flowers In Chania" title="Images 4"></noscript>
A browser will show the value of the alt attribute if it cannot locate an image:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Flowers In Chania" title="Images 8" data-lazy-src="wrongname.gif"><noscript><img decoding="async" src="wrongname.gif" alt="Flowers In Chania" title="Images 8"></noscript>
Image Size - Width and Height
The width and height of an image can be specified using the style attribute.
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Boy In A Jacket" style="width:500px;height:600px;" title="Images 9" data-lazy-src="img_girl.jpg"><noscript><img decoding="async" src="img_girl.jpg" alt="Boy In A Jacket" style="width:500px;height:600px;" title="Images 9"></noscript>
Alternatively, you can use the width and height attributes:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20600'%3E%3C/svg%3E" alt="Girl In A Jacket" width="500" height="600" title="Images 10" data-lazy-src="img_girl.jpg"><noscript><img decoding="async" src="img_girl.jpg" alt="Girl In A Jacket" width="500" height="600" title="Images 10"></noscript>
The width and height attributes always define the width and height of the image in pixels.
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 style sheets from changing the size of images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20126%20126'%3E%3C/svg%3E" alt="Html5 Icon" width="126" height="126" title="Images 11" data-lazy-src="html5.gif"><noscript><img loading="lazy" decoding="async" src="html5.gif" alt="Html5 Icon" width="126" height="126" title="Images 11"></noscript>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Html5 Icon" style="width:128px;height:128px;" title="Images 12" data-lazy-src="html5.gif"><noscript><img decoding="async" src="html5.gif" alt="Html5 Icon" style="width:128px;height:128px;" title="Images 12"></noscript>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></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:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Html5 Icon" style="width:126px;height:126px;" title="Images 13" data-lazy-src="/images/html5.gif"><noscript><img decoding="async" src="/images/html5.gif" alt="Html5 Icon" style="width:126px;height:126px;" title="Images 13"></noscript>
Images on Another Server/Website
Certain websites link to an image hosted on a different server.
In the src attribute, you must provide an absolute (full) URL in order to point to an image on another server:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Codingask.com" title="Images 14" data-lazy-src="https://www.codingask.com/images/codingask_green.jpg"><noscript><img decoding="async" src="https://www.codingask.com/images/codingask_green.jpg" alt="Codingask.com" title="Images 14"></noscript>
Animated Images
HTML allows animated GIFs:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Computer Girl" style="width:48px;height:48px;" title="Images 15" data-lazy-src="programming.gif"><noscript><img decoding="async" src="programming.gif" alt="Computer Girl" style="width:48px;height:48px;" title="Images 15"></noscript>
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Html Tutorial" style="width:44px;height:44px;" title="Images 16" data-lazy-src="smiley.gif"><noscript><img decoding="async" src="smiley.gif" alt="Html Tutorial" style="width:44px;height:44px;" title="Images 16"></noscript>
</a>
Image Floating
To make an image float to the left or right of text, use the CSS float property:
Example
<p><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Smiley Face" style="float:right;width:44px;height:44px;" title="Images 17" data-lazy-src="smiley.gif"><noscript><img decoding="async" src="smiley.gif" alt="Smiley Face" style="float:right;width:44px;height:44px;" title="Images 17"></noscript>
The image will float to the right of the text.</p>
<p><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Smiley Face" style="float:left;width:44px;height:44px;" title="Images 18" data-lazy-src="smiley.gif"><noscript><img decoding="async" src="smiley.gif" alt="Smiley Face" style="float:left;width:44px;height:44px;" title="Images 18"></noscript>
The image will float to the left of the text.</p>
Common Image Formats
Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
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
HTML Image Tags
images
img tag
src attribute
alt attribute
image size
width
height
style
folder
server
animated GIFs
image link
image floating
image formats
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
The HTML Image Element
In HTML, the “ tag is used to embed an image into a web page. The `src` attribute specifies the URL or file path of the image, and the `alt` attribute provides alternative text that describes the image.
Image Size and Styling
You can set the size of an image using the `width` and `height` attributes, or by applying CSS styles. It’s generally better to use CSS for sizing and positioning images.
Image Locations
Images can be stored locally in a folder on your web server, or they can be hosted on a remote server and referenced by their URL.
Image Formats
Common image formats used on the web include JPEG, PNG, GIF (including animated GIFs), and SVG. The format you choose will depend on the type of image and its intended use.
Linking Images
You can make an image into a link by wrapping the “ tag inside an “ tag. This allows users to click on the image and navigate to another page or resource.
Image Floating and Positioning
CSS can be used to float an image to the left or right of text, or to position it anywhere on the page using absolute or relative positioning.
Overall, the HTML “ tag provides a simple and effective way to incorporate images into your web content, with many options for sizing, styling, and linking.
The HTML image element, represented by thetag, is a fundamental component for displaying visual content on web pages. Thetag allows you to embed images into your HTML document, enhancing the overall user experience and visual appeal of your website.
The primary attributes used with thetag are the “src” and “alt” attributes. The “src” attribute specifies the URL or file path of the image you want to display, while the “alt” attribute provides alternative text description of the image, which is important for accessibility and SEO.
You can also control the size of the image by setting the “width” and “height” attributes, or by using CSS to style the image. Additionally, you can link the image to another web page or resource by wrapping thetag inside an tag.
Other useful attributes include “style” for applying custom CSS styles, and the ability to organize your images in folders on your web server. HTML also supports various image formats, such as JPEG, PNG, and animated GIFs.
Understanding the proper use of the HTML image element is crucial for creating visually engaging and accessible web pages that effectively communicate your message to your audience.
