1

Adding Images
 Content 2

1 Adding Images with img 4 Responsive Images

2 Image Accessibility

3 Adding SVG Images

 Adding Images 3

• Images appear on web pages in two ways: embedded in the inline content or as
background images.

• If the image is part of the editorial content, such as product shots, gallery images, ads,
illustrations, and so on, then it should be placed in the flow of the HTML document.

• If the image is purely decorative, such as a stunning image in the background of the
header or a patterned border around an element, then it should be added through
CSS.
 Image Formats 4

• In general, images that are made up of a grid of colored pixels (called bitmapped or
raster images) must be saved in the PNG, JPEG, or GIF file formats in order to be
placed inline in the content.

• Newer, more optimized WebP and JPEG-XR bitmapped image formats are slowly
gaining in popularity, particularly now that we have markup to make them available to
browsers.

• For vector images such as the kind of icons and illustrations created with drawing tools
such as Adobe Illustrator, we have the SVG format.

• Images, such as TIFF, BMP, or EPS, you’ll need to convert it to a web format before
you can add it to the page. If, for some reason, you must keep your graphic file in its
original format (for example, a file for a CAD program), you can make it available as an
external image by making a link directly to the image file.
 The img element 5

• <img src=“url” alt=“text” height=“unit” width=“unit” />

• <img src=“images/car1.png” alt=“Corrolla” height=“200px” width=“350px” />

 Adding SVG Images 6

• SVGs stand for Scalable Vector Graphics and its popularity has been gaining
momentum thanks to nearly ubiquitous browser support and the need for images that
can resize without loss of quality. For illustration-style images, they are a responsive
dream come true.

• SVGs are an appropriate format for storing vector images and vectors are made up of
shapes and paths that are defined mathematically. And even more interesting, in SVGs
those shapes and paths are specified by instructions written out in a text file.

• They are images that are written out in text! All of the shapes and paths as well as their
properties are written out in the standardized SVG markup language.

• SVG has elements that define shapes like rectangle (rect), circle (circle), and paths
(path).
 Adding SVG Images… 7

• Here is the SVG code that describes a rectangle (rect) with rounded corners (rx and ry,
for x-radius and y-radius) and the word “hello” set as text with attributes for the font
and color
 Adding SVG Images… 8

SVGs offer some significant advantages over their bitmapped counterparts for certain
image types:
1) Because they save only instructions for what to draw, they generally require less data
than an image saved in a bitmapped format.
2) Because they are vectors, they can resize as needed in a responsive layout without
loss of quality.
3) Because they are text, they integrate well with HTML/XML and can be compressed
with tools like Gzip and Brotli.
4) They can be animated.
5) You can change how they look with CSS.
6) You can add interactivity with JavaScript.
 Responsive Image Markup 9

• A Just as we need a way to make whole web pages respond and adapt to various
screen sizes, we need a way to make images on those page “responsive”.

• When we say “responsive images,” we are talking about providing images that are
tailored to the user’s viewing environment.

• First and foremost, responsive image techniques prevent browsers on small screens
from downloading more image data than they need.

• They also include a mechanism to give high-resolution displays on fast networks

images large enough to look extra-gorgeous.

• In addition, they provide a way for developers to take advantage of new, more efficient
image formats.
 Responsive Image Markup… 10

• In short, responsive images work this way: you provide multiple images, sized or
cropped for different screen sizes, and the browser picks the most appropriate one
based on what it knows about the current viewing environment. Screen dimensions are
one factor, but resolution, network speed, what’s already in its cache, user
preferences, and other considerations may also be involved.

• The responsive image attributes and elements address the following four basic
scenarios:
1) Providing extra-large images that look crisp on high-resolution screens
2) Providing a set of images of various dimensions for use on different screen sizes
3) Providing versions of the image with varying amount of detail based on the device
size and orientation
4) Providing alternative image formats that store the same image at much smaller file
sizes
 Responsive Image Markup… 11

High-Density Displays(X-discreptor)

• The number of pixels per inch (ppi) is the resolution of the screen.

• Bitmapped images, like JPEG, PNG, and GIF, are made up of a grid of pixels. It used
to be that the pixels in images as well as pixel dimensions specified in our style sheets
mapped one-to-one with the device pixels.

• An image or box element that was 100 pixels wide would be laid out across 100 device
pixels. Nice and straightforward.
 Responsive Image Markup… 12

• Device-pixel-ratios
• The ratio of the number of device pixels to CSS
pixels is called the device-pixel-ratio.

• Common device-pixel-ratios on handheld devices are

1.325x, 1.5x, 1.7x, 2x, 2.4x, 3x, and even 4x (the “x”
is the convention for indicating a device-pixel-ratio).

• Devices use a measurement called a reference pixel

for layout purposes. Reference pixels are also known
as points (PT) in iOS, Device Independent Pixels (DP
or DiP) in Android, or CSS pixels because they are
the unit of measurement we use in style sheets.
 Responsive Image Markup… 13

• The iPhone 8 has a screen that is made up of 750 × 1334 device pixels, but it uses a
layout grid of 375 × 667 points or CSS pixels (a ratio of 2 device pixels to 1 layout
pixel—2:1 or 2x). A box sized to 100 pixels wide in CSS would be laid out across 200
device pixels on the iPhone8.

• The iPhone X has a screen that is made up of 1125 × 2436 pixels, but it uses a layout
grid of 375 × 812 points (a ratio of 3 device pixels to one point—or 3x). A box sized to
100 pixels is laid out across 300 device pixels on the iPhone X.

• Let’s say you have an image that you want to appear 200 pixels wide on all displays.
You can make the image exactly 200px wide and it will look fine on standard-
resolution displays, but it might be a little blurry on high-resolution displays. To get that
image to look sharp on a display with a device-pixel-ratio of 2x, you’d need to make
that same image 400 pixels wide. It would need to be 600 pixels wide to look sharp on
a 3x display.
 Responsive Image Markup… 14

• Introducing srcset
• When we use srcset with the img element, we are allowing the browser to make the
best image selection.

<img src=“image-url” alt=“” srcset=“image-url #x, image-url #x” />

<img src=“turkey-200px” alt=“” srcset=“turkey-400px 2x, turkey-600px 3x” />

• When to use x-descriptors

• X-descriptors tell the browser to make a selection based on screen resolution only,
with no regard for the dimensions of the screen or viewport. For this reason, x-
selectors are best used for images that stay the same pixel dimensions regardless of
the screen size, such as logos, social media badges, or other fixed-width images.
 Responsive Image Markup… 15

• Variable-Width Images (w-descriptor)

• chances are you’ll want image sizes to change based on the size of the browser
viewport. This is known as a viewport-based selection. And because you are the type
of web developer who cares about how fast pages display, you’ll want to limit
unnecessary data downloads by providing appropriately sized images.

• To achieve this goal, use the srcset and sizes attributes with the img element.

• The srcset gives the browser a set of image file options, but it uses a w-descriptor that
provides the actual pixel width of each image.
 Responsive Image Markup… 16

• Variable-Width Images (w-descriptor)

• chances are you’ll want image sizes to change based on the size of the browser
viewport. This is known as a viewport-based selection. And because you are the type
of web developer who cares about how fast pages display, you’ll want to limit
unnecessary data downloads by providing appropriately sized images.

• To achieve this goal, use the srcset and sizes attributes with the img element.

• The srcset gives the browser a set of image file options, but it uses a w-descriptor that
provides the actual pixel width of each image.
 Responsive Image Markup… 17

• Using the sizes attribute

• Whenever you use w-descriptors, you also need to use the sizes attribute to tell the
browser the approximate size that the image will appear.

• When a browser downloads the HTML document, the first thing it does is look through
DOM. Then, almost immediately, a preloader goes out to get all the images from the
server so they are ready to go. Finally, the CSS and the JavaScript are downloaded. It
is likely that the style sheet has instructions for layout and image sizes, but by the time
the browser sees the styles, the images are already downloaded. For that reason, we
have to give the browser a good hint with the sizes attribute whether the image will fill
the whole viewport width or only a portion of it. That allows the preloader to pick the
correct image file from the srcset list.
Responsive Image Markup… 18
 Responsive Image Markup… 19

• Art Direction (picture Element)

• So far, we’ve looked at image selection based on the
resolution of the screen and the size of the viewport.
In both of these scenarios, the content of the image
does not change but merely resizes.

• You might want to crop into important details of an

image when it is displayed on a small screen. You
may want to change or remove text from the image if
it gets too small to be legible. Or you might want to
provide both landscape and portrait versions of the
same image for different layouts.

• This scenario is known as an art-direction-based

selection and it is accomplished with the picture
element.
 Responsive Image Markup… 20

• Art Direction (picture Element)

 Responsive Image Markup… 21

• Alternative Image Formats (type

Attribute)

• More efficient image formats have been

developed—such as WebP, JPEG 2000,
and JPEG XR—that can compress
images significantly smaller than their
JPEG and PNG counterparts And once
again, some browsers support them and
some don’t.

• The difference is that today we can use

the picture element to serve the newer
image formats to browsers that can
handle them.
Thank you