Images in HTML
The <img> Tag
src: Specifies the path to the
image
alt: Specifies an alternate text
<img src="img_girl.jpg" alt="Girl in a Jacket" width="500" height="600"> for an image
width and height specify the
width and height of an image
respectively
Responsive Images
We should use Responsive
images for these Two
scenarios:
1. Fetch Lower Quality images
on low-resolution screens
to load images faster.
2. To tackle the Art Direction
Problem
DPR (Device Pixel Ratio)
The device pixel ratio is the
ratio between physical pixels
and logical pixels.
For instance, the iPhone 4 and
iPhone 4S report a device pixel
ratio of 2, because the physical
linear resolution is double the
logical linear resolution.
The srcset attribute
srcset: One or more strings
separated by commas,
<img srcset="img_girl_lowq.jpg 1x, indicating possible image
img_girl_highq.jpg 2x sources for the user agent to
img_girl_very_highq.jpg 3x"
a alt="Girl in a Jacket" use
src="img_girl_very_higq.jpg">
Art Direction Problem
Art Direction Problem involves
displaying different images for
different screen sizes
focussing on the important
part of the image rather than
just changing the resolution of
the image.
srcset and sizes
sizes: One or more
strings separated by
<img srcset="img_girl_small.jpg 400w, commas, indicating
img_girl_large.jpg 600w" alt="Girl in a Jacket"
a set of source sizes.
sizes="sizes="(max-width: 400px) 400px,
(max-width: 600px) 600px,
800px"
src="img_girl_large.jpg">
