HTML image tag (tag)

 

The <img> tag is used to add images (images) to HTML files.

<img> is mainly used with the src attribute to specify the image address, usage example:

<img src="https://example.com/media/photo.jpg" with="600" heigh="400" alt="一張圖片">

The effect is as follows:

<img> is an empty element without closing tag.

The <img> tag has the following attributes (attributes)

src

Specify the image address (URL), only this attribute is required.

width

An integer value that specifies the width of the image in pixels (pixels). The specified advantage is that it can avoid the jitter when the page is rendered, because the browser does not need to wait for the image to download to calculate the image width.

heigh

An integer value that specifies the height of the image in pixels (pixels). The specified advantage is that it can avoid the jitter when the page is rendered, because the browser does not need to wait for the image to download to calculate the image height.

alt

Picture alternative text (alternate text), when the picture cannot be displayed, the browser will display this text. This text description is also very helpful for SEO, so it is recommended that all pictures need to have alt.

title

You can specify a paragraph of text, which will be automatically displayed when the mouse moves over the picture.

Pictures responsive (Responsive images) - srcsetand sizesproperty

The srcset and sizes attributes (attribute) are used to make the browser automatically determine when in different screen widths (display width) or different screen resolutions (pixel density, display density) such as high-definition retina screens, and automatically load Images of different sizes, this technique is also commonly used in Responsive web design (RWD) or mobile mobile web design.

srcset

The srcset attribute is used to specify multiple images of different sizes. The specified size can use the actual image width or screen resolution pixel density as the unit.

The grammar of srcset is ""file path URL" and a space "unit of size"", and use comma-separated to separate pictures of different sizes.

For example, if you want to use the actual image width as the unit, the unit syntax is the image width followed by w:

<img srcset="image-480w.jpg 480w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     src="image-fallback.jpg"
>

The width is an integer number, representing the original width of the real picture. The actual unit is pixel. Don't be confused by the unit syntax w of srcset.

Continuing to explain the above example further, we tell the browser that there are three different image sizes with widths of 480, 800 and 1200 pixels, and tell the browser that it can choose the most suitable image by itself, and what information the browser uses to determine which one Which image size is most suitable? It is the typesetting width of this picture, which is determined from the img width set in your CSS style, or from the width attribute of the img tag!

When you use srcset, it is recommended that you also set the width or the sizes attribute mentioned below at the same time, the purpose is to help the browser have enough information to determine which size image should be downloaded.

What happens if the old browser (IE) that does not support srcset? Browsers that do not support srcset will simply ignore the srcset attribute and only read the src attribute value; on the contrary, browsers that support srcset will ignore the src attribute.

---

Furthermore, we can also use the screen resolution, which is pixel density, as the unit. For example, the resolution of the retina screen of the current smart phone has a resolution higher than that of the ordinary screen 2x 3x 4x. In terms of the impact on web design, That is, if you directly use the pictures from the desktop website and put them on your mobile phone, it will become "mushy"!

If you don't know what pixel density is, use a simple way to explain that there are actually a few solid pixels behind a CSS pixel. You can imagine that a higher-definition screen uses more and denser pixels to display the picture.

We can specify images of different sizes according to different pixel density. The unit syntax is a pixel density number followed by x, for example:

<img srcset="flower-1x.jpg 1x,
             flower-2x.jpg 2x,
             flower-3x.jpg 3x"
     src="flower-fallback.jpg"
>

The above example tells the browser that when the pixel density of the device is 1 (that is, the normal screen), use flower-1x.jpg. If the pixel density is 2 (for example, iPhone 8), use flower- 2x.jpg This picture, if the pixel density is 3 (for example, iPhone X), use the flower-3x.jpg picture.

With a pixel density xas a unit, with respect to the actual width of the picture wwhen the unit, as long as the benefits of the browser knows pixel density devices to know which to go to download pictures, very simple and fast decision logic.

sizes

The sizes attribute is used to assist the srcset attribute to prompt the browser to tell the browser what size image should be used under different screen size (media query) conditions.

But if your srcset uses pixel density as the unit, you don't need to specify sizes.

The value of sizes refers to the actual size of the original image. It is only used to tell the browser which size image to download. It is not used to typeset the width and height of the image in the screen. If you want to typeset the image, you still use CSS.

The grammar of sizes is ""media query conditions" leave a space "the actual width of the recommended picture"", and use comma-separated to separate different conditions.

Give a practical example:

<img srcset="cat-160.jpg 160w,
             cat-320.jpg 320w,
             cat-640.jpg 640w,
             cat-1280.jpg 1280w"
     
     sizes="(max-width: 480px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     
     src="cat-fallback.jpg"
>

The width unit can be any unit available in CSS, such as px, vw or even calc().

In the above example, sizes tells the browser that when the screen width is less than 480px, the original image width needs to be 100vw screen width; when the screen width is less than 900px, the original image width needs to have 33vw screen width; when the media query condition is not specified, like The 254px in the example is the default value when the aforementioned conditions are not met, that is, the original width of the image needs to be 254px.

The browser will judge from the leftmost condition to the rightmost (last) condition in order from all the sizes conditions. When the condition is met, it will use this value and will not continue to judge further down, so the order in sizes Very important.

If the pixel density of the screen is not 1, the browser will automatically multiply the pixel density as the original width of the image. For example, when the pixel density of the ritena screen is 2, the above 100vw browser will interpret as 200vw; 33vw will interpret as 66vw; 254px will become 508px.

More advanced, if you want to download completely different pictures in different situations, such as processing the vertical portrait and landscape landscape for mobile web pages, or loading pictures in different formats in different browsers, you can use <picture> tag.

Lazy loading images- loadingproperties

The lazy load technique is to not load pictures that are not visible outside the user's viewport, and then dynamically load the pictures after the picture will appear before the user's line of sight. Lazy load can be used to improve web page performance while saving unnecessary Bandwidth cost.

Before every use JavaScript to write code to implement lazy load, but because of lazy load too common, and now the new browser has built-in support directly, only need to add the <img> on the loadingproperty, and specify the property value lazy!

Usage example:

<img src="image.png" loading="lazy">