FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/html5.jpg


@harish 515

Images in HTML


2021-11-17 16:11 · 7 min read

Images in HTML

If HTML we use img tag to insert image in our web page.
Image tags img do not have closing tags. The two main attributes you give to the img tag are src, the image source and alt, which is alternative text describing the image.

Images in HTML

ParametersDetails
srcSpecifies the URL of the image
srcsetImages to use in different situations (e.g., high-resolution displays, small monitors, etc)
sizesImage sizes between breakpoints
crossoriginHow the element handles crossorigin requests
usemapName of image map to use
ismapWhether the image is a server-side image map
altAlternative text that should be displayed if for some reason the image could not be displayed
widthSpecifies the width of the image (optional)
heightSpecifies the height of the image (optional)


 

Adding an image

To add an image to a page, use the image tag

Image tags img do not have closing tags. The two main attributes you give to the img tag are src, the image source and alt, which is alternative text describing the image.

<img src="images/hello.png" alt="Hello World">

Copy

You can also get images from a web URL:

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

Copy

 

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The img tag creates a holding space for the referenced image. It is also possible to embed images directly inside the page using base64:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

Responsive image using the srcset attribute

Using srcset with sizes

<img sizes="(min-width: 1200px) 580px,(min-width: 640px) 48vw,98vw"
srcset="img/hello-300.jpg 300w,
img/hello-600.jpg 600w,
img/hello-900.jpg 900w,
img/hello-1200.jpg 1200w"
src="img/hello-900.jpg" alt="hello">

Copy

sizes are like media queries, describing how much space the image takes of the viewport.

  • if viewport is larger than 1200px, image is exactly 580px (for example our content is centered in container which is max 1200px wide. Image takes half of it minus margins)
  • if viewport is between 640px and 1200px, image takes 48% of viewport (for example image scales with our page and takes half of viewport width minus margins).
  • if viewport is any other size , in our case less than 640px, image takes 98% of viewport (for example image scales with our page and takes full width of viewport minus margins). Media condition must be omitted for last item.

srcset is just telling the browser what images we have available, and what are their sizes

  • img/hello-300.jpg is 300px wide
  • img/hello-600.jpg is 600px wide
  • img/hello-900.jpg is 900px wide
  • img/hello-1200.jpg is 1200px wide

src is always mandatory image source. In case of using with srcset, src will serve fallback image in case browser is not supporting srcset.

Using srcset without sizes

<img src="img/hello-300.jpg" alt="hello"
srcset="img/hello-300.jpg 1x,
img/hello-600.jpg 2x,
img/hello-1200.jpg 3x">

Copy

srcset provides list of available images, with device-pixel ratio x descriptor.

  • if device-pixel ratio is 1, use img/hello-300.jpg
  • if device-pixel ratio is 2, use img/hello-600.jpg
  • if device-pixel ratio is 3, use img/hello-1200.jpg

src is always mandatory image source. In case of using with srcset, src will serve fallback image in case browser is not supporting srcset.

Responsive image using picture element

<picture>
<source media="(min-width: 600px)" srcset="large_image.jpg">
<source media="(min-width: 450px)" srcset="small_image.jpg">
<img src="default_image.jpg" style="width:auto;">
</picture>

Copy

Usage

To display different images under different screen width, you must include all images using the source tag in a picture tag as shown in the above example.

Result

  • On screens with screen width >600px, it shows large_image.jpg
  • On screens with screen width >450px, it shows small_image.jpg
  • On screens with other screen width, it shows default_image.jpg

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer