How to load an image in HTML/CSS

Using an IMG tag

<img src="path/to/image.jpg" alt="">

Setting a background

<div style="background-image:url(path/to/image.jpg)" ></div>

Using the picture tag

<picture> <source srcset="path/to/mage.webp" type="image/webp" > <img src="path/to/image.jpg" alt=""> </picture>

This will load a webp format in browser that suppport it, and a jpg image as fallback. Webp is a format that offer better compression than jpg combined with transparancy. Unfortunately it is not supported yet by Firefox or Safari.

An IMG tag is needed, the picture tag will not show anything, it will just let you set several `url` choices for image type or media selector.

Setting the background in a pseudo-element

div::before{
 background-image: url(path/to/image.jpg);
 }

Using an IMAGE tag

<image src="path/to/image.jpg" alt="">

Yes, you can use an image tag as well, this will be interpreted as `img` tag in the DOM.

Using the picture tag with an image tag

<picture>
 <source srcset="path/to/mage.webp" type="image/webp" >
 <image src="path/to/image.jpg" alt="">
 </picture>

Setting the content in a pseudo-element

div::before{
 content: url(path/to/image.jpg);
}

Yes, you can load in image in HTML by setting to content property to an URL.

This entry was posted on Tuesday, March 6th, 2018 at 3:05 pm and is filed under Webtechnology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.