Web Design

Web Design

Picture Element

Poll

Put each HTML element with the correct definition:

<img>

<map>

<area>

<picture>

• Defines a container for multiple image resources

• Defines an image

• Defines an image map

• Defines a clickable area inside an image map

Lesson Objectives

• Display picture using Bandwidth.
  

• Select and add images of all formats.

• Design different pictures for different devices or screen sizes

The HTML <picture> Element

• The HTML <picture> element gives web developers more flexibility in specifying image resources.

   

• The <picture> element contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.

The HTML <picture> Element

Each <source> element has a media attribute that defines when the image is the most suitable.

Example:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_picture1

Picture Element

Note: 

Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags match.

Open Ended

When Do you think it is suitable to use the <picture> elements instead of the <img> element?

Watch This Video

https://www.youtube.com/watch?v=QINlm3vjnaY

When to use the Picture Element

There are two main purposes for the <picture> element:

1. Bandwidth

2. Format Support

Bandwidth

If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source> element with matching attribute values, and ignore any of the following elements.

Format Support

Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.

Example

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_picture_format

Multiple Choice

In the Previous Example the picture displayed on the Webpage is :

• img_avatar.png

• img_girl.jpg

• img_beatles.gif

Note: 

The browser will use the first <source> element with matching attribute values, and ignore any following <source> elements.

Open Ended

Exercise 1:

Use the <picture> element to display different pictures that celebrate the Woman's National Day . Remember to use the srcset attribute.

Open Ended

what are the two main purposes for using the image element?

Multiple Choice

Can I use an image without giving credit to the website and owner of the photo?

• yes

• no

Multiple Choice

Why should the srcset attribute be used in an HTML picture element?

• To find an alternative image if the one you want isn't working

• To send the user to another webpage where they might find the right image

• To choose the image that best fits the current view and/or device.

• It allows a user to report an image that isn't working on a website

Multiple Choice

After I save an image to my computer, what should I do before I can add that image to my website?

• click add image and then upload the picture.

• click and drag the image from my desktop.

• nothing, it automatically goes to my links column.

Multiple Choice

Why should the alt attribute be used in an HTML image element?

• To find an alternative image if the one you want isn't working

• To send the user to another webpage where they might find the right image

• It is a brief description of an image if for some reason the user cannot see the image

• It allows a user to report an image that isn't working on a website

Multiple Choice

Which is the correct way of adding a url to an image HTML element?

• <img src="globe">

• <img scr="globe.png">

• <img src="globe.png">

• img src=globe.png>