Use picture in html

The picture element

The previous module demonstrated how the srcset attribute allows you to provide different-sized versions of the same image. The browser can then decide which is the right version to use. If you want to change the image completely, you’ll need the picture element.

In the same way that srcset builds upon the src attribute, the picture element builds upon the img element. The picture element wraps around an img element.

picture> 
img src="image.jpg" alt="A description of the image.">
</picture>

If there is no img element nested inside the picture element, the picture element won’t work.

Like the srcset attribute, the picture element will update the value of the src attribute in that img element. The difference is that where the srcset attribute gives suggestions to the browser, the picture element gives commands. This gives you control.

source #

You can specify multiple source elements inside a picture element, each one with its own srcset attribute. The browser then executes the first one that it can.

Image formats #

In this example, there are three different images in three different formats:

picture>
 source srcset="image.avif" type="image/avif">
 source srcset="image.webp" type="image/webp"> 
img src="image.jpg" alt="A description of the image." 
width="300" height="200" loading="lazy" decoding="async">
</picture>

The first source element points to an image in the new AVIF format. If the browser is capable of rendering AVIF images, then that’s the image file it chooses. Otherwise, it moves on to the next source element.

The second source element points to an image in the WebP format. If the browser is capable of rendering WebP images, it will use that image file.

Otherwise the browser will fall back to the image file in the src attribute of the img element. That image is a JPEG.

This means you can start using new image formats without sacrificing backward compatibility.

In that example, the type attribute told the browser which kind of image format was specified.

Image sizes #

As well as switching between image formats, you can switch between image sizes. Use the media attribute to tell the browser how wide the image will be displayed. Put a media query inside the media attribute.

picture>
 source srcset="large.png" media="(min-width: 75em)">
 source srcset="medium.png" media="(min-width: 40em)"> 
img src="small.png" alt="A description of the image." 
width="300" height="200" loading="lazy" decoding="async">
</picture>

Here you’re telling the browser that if the viewport width is wider than 75em it must use the large image. Between 40em and 75em the browser must use the medium image. Below 40em the browser must use the small image.

This is different to using the srcset and sizes attributes on the img element. In that case you’re providing suggestions to the browser. The source element is more like a command than a suggestion.

You can also use the pixel density descriptor inside the srcset attribute of a source element.

picture>
 source srcset="large.png 1x" media="(min-width: 75em)">
 source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)"> 
img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async" 
srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

In that example you’re still telling the browser what to do at different breakpoints, but now the browser has the option to choose the most appropriate image for the device’s pixel density.

Cropping #

If you only need to serve differently sized versions of the same image, srcset is your best option. But if an image doesn’t look good at smaller sizes, you can try making a cropped version of the image instead.

The different images might have different width and height ratios to suit their context better. For example, on a mobile browser you may want to serve a crop that’s narrow and tall, whereas on a desktop browser, you might want to serve a crop that’s wide and short.

Here’s an example of a hero image that changes its contents and its shape based on the viewport width. Add width and height attributes to each source element.

picture>
 source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
 source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

Remember that you can’t change the alt attribute depending on the image source. You’ll need to write an alt attribute that describes both the full size image and the cropped image.

You probably won’t need to use the picture element for most of your responsive images—the srcset and sizes attributes on the img element cover a lot of use cases. But for those situations when you need more fine-grained control, the picture element is a powerful tool.

There’s one kind of image where you might not need either solution: icons. That’s what’s next.

Where the srcset attribute gives ________ to the browser, the &LTpicture> element gives ________.

suggestions, commands commands, suggestions

The picture element provides control, making it great for art direction.

Oops, you got it backwards.

Some capabilities of the &LTpicture> element are:

Alternative cropping Alternative formats Alternative sizes Alternative densities Alternative ratios

eg: landscape images or portrait images depending on the viewport.

eg: smaller and easier to download avif or webp files if possible.

eg: larger images for larger monitors.

eg: providing rich pixel quality for HD screens.

Picture element does not have ratio features.

Next and previous lessons

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.

Источник

HTML Images

Images can improve the design and the appearance of a web page.

Example

Example

Example

HTML Images Syntax

The HTML tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.

The tag is empty, it contains attributes only, and does not have a closing tag.

The tag has two required attributes:

Syntax

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

Example

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example

If a browser cannot find an image, it will display the value of the alt attribute:

Example

Tip: A screen reader is a software program that reads the HTML code, and allows the user to «listen» to the content. Screen readers are useful for people who are visually impaired or learning disabled.

Image Size — Width and Height

You can use the style attribute to specify the width and height of an image.

Example

Alternatively, you can use the width and height attributes:

Example

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.

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 styles sheets from changing the size of images:

Example

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Example

Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

Example

Notes on external images: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed.

Animated Images

HTML allows animated GIFs:

Example

Image as a Link

To use an image as a link, put the tag inside the tag:

Example

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

The image will float to the right of the text.

The image will float to the left of the text.

Tip: To learn more about CSS Float, read our CSS Float Tutorial.

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 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

Note: Loading large images takes time, and can slow down your web page. Use images carefully.

HTML Exercises

HTML Image Tags

Tag	Description
	Defines an image
	Defines an image map
	Defines a clickable area inside an image map
	Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник