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

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) - classic format, which is good for logos and images requiring transparency

Joint Photographic Experts Group (JPEG) - classic format, which is good for photos and backgrounds

• this is the only format which doesn't support transparency
• it has smaller size than PNG
• hints: .jpg and .jpeg are totally same. .jpg was introduced for Windows, since file extensions were limited to 3 characters there

Progressive JPEG - advanced JPEG, which supports progressive load. browser displays a blurry image initially, gradually improving its quality

• progressive load - concept of displaying an image gradually. it can be blur-to-clear or according to some custom pattern. e.g. straight lines first
• interlacing - technique of encoding image data in multiple passes. it makes progressive load possible from technical side
• Progressive JPEG image is encoded using scans of increasing quality. e.g. 4x4 -> 8x8 -> etc.
• baseline loading - while loading, browser displays image by segments - from top to bottom. this is behaviour for simple non-interlaced images

GIF - format for simple animations

• it only supports 256 colors
• transparency is 1-bit. i.e. either fully transparent or not at all

WebP - modern alternative to PNG, JPEG, GIF. it provides better compression, saving about 30% in file size

• it supports transparency and animation

AVIF - another modern format. it provides best compression

ICO - format for favicons

• it supports transparency

HEIC - format for iOS photos. it is high-efficient, but browser support is limited
BMP - legacy format
TIFF - format for high-quality print, but not for web

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

Useful

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