Images

<img>

<img> - image tag

  • e.g. <img src="/lion.jpg" alt="Lion" />


src - source. required

  • when src is dynamically changed, browser displays previous image until new one is downloaded, instead of displaying white area
  • tricks:
  • <img src={`https://foo.bar/image?date=${new Date().getTime()}`} /> - force browser to update image with the same URL
  • such trick is helpful when changeable image uses static endpoint


alt - alternative. text which is used for screen readers and when image is not loaded. is crucial for accessibility

width
height

  • both take integer without a unit as value. e.g. height="300"

Responsive Images

responsive images - the process of fetching proper image for specific viewport width. it solves the following problems:

  • art direction problem - image looks nice on desktop, but is too big for small screen, since details are hard to see
  • resolution switching problem - high resolution screens require larger images on the same viewport width
  • bandwidth wasting problem - heavyweight image is loaded for mobile, where its quality is not noticeable (subset of resolution switching problem)
  • art direction problem is fixed with <picture> element
  • resolution switching problem is fixed with <img>'s srcset & sizes attributes

art direction problem can also be fixed with "display: none", but in that case all images will be loaded by browser, since HTML is being parsed before CSS applied

srcset & sizes

srcset - set of images browser is allowed to choose between. it contains comma-separated URLs with descriptors

  • 960w - width descriptor. it states for browser what size each image is
  • width descriptors only work in pair with "sizes" attribute. alternatively "srcset" is ignored
  • 2x - x-descriptor. this image will be loaded, if device has a high resolution display, with 2 or more device pixels per 1 CSS pixel
  • x-descriptors don't require "sizes" attribute
  • width descriptors and x-descriptors should not be mixed
  • width descriptor adds automatic optimization for Retina, since width descriptor is always calculated into a x descriptor. e.g. 480w 2x = 960w
  • 1x - default descriptor, which is used when no any descriptors are mentioned
  • src - references default (fallback) image. it is used in pair with srcset


sizes - defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose

  • (max-width: 600px) 480px - width of the slot the image will fill when the media condition is true
  • 800px - default width, which is chosen when none of the media conditions are true
  • 50vw - vw are possible, but percentages are not


Browser Algorithm

  1. browser finds matching media condition
  2. browser checks the slot size and loads the image that has the same size as slot or the first one which is bigger
  3. image is being chosen considering screen resolution. if it is low or high, image of respective intrinsic size is chosen
  4. "srcset" sources as well as "sizes" conditions followed after the first matching one are ignored
<img
  srcset="lion-sm.jpg 480w, lion-lg.jpg 800w"
  sizes="(max-width: 600px) 480px,
    800px"
  src="lion-lg.jpg"
  alt="Lion"
/>

<picture>

<picture> - wrapper containing a set of <source> elements and <img> element

  • <source> - provides one of sources for the browser to choose from. first matched source is applied
  • <img> contains default image. it is chosen if no media query matches, therefore it should be last
  • besides, <img> is a fallback for browsers that don't support <picture>
<picture>
  <source media="(min-width: 1024px)" srcset="lion-lg.jpg" />
  <source media="(min-width: 768px)" srcset="lion-md.jpg" />
  <img src="lion-sm.jpg" alt="Alternative" />
</picture>

Raster Images

raster images - are defined using a grid of pixels

  • raster image file - contains information about each pixel, i.e. where it should be placed and what color is it
  • resolution - amount of pixels in a row and in a column

Formats

Portable Network Graphics (PNG)

Joint Photographic Experts Group (JPEG)

  • has smaller size than PNG
  • ?JPG

Progressive JPEG - type of JPEG image that is encoded in multiple scans of increasing quality

  • when loaded by browser, it first displays a low-quality blurred version of the image
  • interlacing - default behaviour when image is being displayed with segments, from top to bottom


bmp
webp & avif - modern formats with small size
gif

Vector Images

vector images - are defined using algorithms. vector image file contains shape and path definitions that the computer uses to render the image

vector object - is a complex of geometric shapes, such as points, lines, curves, and polygons, defined on a Cartesian plane

  • e.g. svg is vector object. see SVG for more

Useful

<figcaption> - figure caption. allows to add a caption to the image

<figure>
  <img src="link" alt="Alternative" >
  <figcaption>
</figure>

sprite - is a collection of images put into a single image. proper image is being set with the help of positioning

  • this technique is used for optimization


Exchangeable Image File Format (EXIF) - is a standard that specifies how metadata about a multimedia file can be embedded within the file

  • e.g. pixel width & height, density, shutter speed, aperture, ISO settings, capture date, etc. - EXIF data for an image

MDN - Responsive images

;