ADAPTIVE GRAPHICS

We already know that pages can be responsive. But what about images?

Can the browser magically redraw one small image into a perfect sharp version for every device?

Not really.

But developers can prepare graphics in smart ways so that images:

• fit different screen sizes
• stay sharp on high-density screens
• do not become unnecessarily heavy

That is what adaptive graphics is about.

1. Main idea of adaptive graphics

Adaptive graphics means preparing and loading images so they look good on:

• small and large screens
• normal and high-density screens

This includes two main problems:

1. Screen size problem

The image must fit different layout widths.

2. Pixel density problem

The image must stay sharp on retina or high-density displays.

Adaptive graphics
|
|- fit the available space
|    +- fluid / responsive image size
|
+- stay sharp on dense screens
     +- 1x / 2x / 3x image versions

One image challenge
|
|- too wide for phone?
|- too blurry on retina?
+- too heavy to load?

2. Physical pixels

Physical pixels are also called:

• device pixels
• hardware pixels

They are the smallest real dots on a screen.

Each physical pixel has:

• its own color
• its own brightness

Screen surface

[■][■][■][■]
[■][■][■][■]
[■][■][■][■]

Each square = one physical pixel

3. Screen resolution

Screen resolution means: how many physical pixels the screen has.

Example:

1920 × 1080

This means:

• 1920 physical pixels in width
• 1080 physical pixels in height

Screen resolution

width  = 1920 px
height = 1080 px

+-----------------------------------------+
|                                         |
|              screen area                |
|                                         |
+-----------------------------------------+

Total number of pixels:

1920 × 1080 = 2,073,600 pixels

4. Pixel density

Pixel density tells us how many physical pixels fit into one inch.

It is measured in:

ppi = pixels per inch

Main idea:

• higher density = more pixels in the same physical area
• more pixels = smaller pixels
• smaller pixels = sharper image

Low density screen:
[■][■][■]
[■][■][■]

High density screen:
[■][■][■][■][■][■]
[■][■][■][■][■][■]

Same physical area, more pixels inside it

1 inch of screen

Low density:
| ■  ■  ■  ■ |

High density:
|■■■■■■■■■■■■|

5. CSS pixels

CSS pixels are not the same as physical pixels.

CSS pixels are an abstract unit used by the browser to size elements.

When you write:

width: 200px;

those are CSS pixels.

Main idea:

• CSS pixels are used in HTML and CSS
• physical pixels are real screen dots

CSS / HTML layout
        uses
     CSS pixels

Screen hardware
        uses
   physical pixels

6. Relation between CSS pixels and physical pixels

On regular screens:

• 1 CSS pixel ≈ 1 physical pixel

On high-density screens:

• 1 CSS pixel may contain several physical pixels

Normal screen:

1 CSS px
   down
1 physical px

High-density screen:

1 CSS px
   down
2 × 2 physical pixels

Regular density:
+----+
| 1  |
+----+

High density:
+----+----+
| 1  | 2  |
+----+----+
| 3  | 4  |
+----+----+

Same 1 CSS pixel area, but 4 hardware pixels inside it

7. Example: a 2×2 CSS-pixel block

Imagine an element that is:

2 × 2 CSS pixels

On a normal screen:

• it takes 2 × 2 physical pixels

Normal screen

CSS size: 2 × 2
Physical result:

[■][■]
[■][■]

On a density-2 screen:

• each CSS pixel uses 2 × 2 physical pixels
• so the element becomes 4 × 4 physical pixels

Density 2 screen

CSS size: 2 × 2
Physical result:

[■][■][■][■]
[■][■][■][■]
[■][■][■][■]
[■][■][■][■]

Important idea:

Double density
= twice as many pixels horizontally
= twice as many pixels vertically
= 4 times more total pixels

8. Raster images

Raster images are images made of bitmap pixels.

Examples:

• .png
• .jpg
• .gif

Each bitmap pixel has:

• color information
• position information

Raster image

[■][■][■][■]
[■][■][■][■]
[■][■][■][■]

Each square = one bitmap pixel

Main idea: a raster image has a fixed number of real image pixels.

9. Why raster images blur on dense screens

Suppose an image file is prepared for a normal screen.

If the browser has to show that same image on a high-density screen, it may need to stretch each bitmap pixel across more physical pixels.

That causes blur.

Image file pixel on normal screen:
[■]

On dense screen, browser stretches it:
[■■]
[■■]

Result:
less sharp

Original bitmap:
small amount of image data

Dense screen:
needs more detail than original image contains

So:

Not enough bitmap pixels
-> browser enlarges them
-> image looks blurry

10. Retina-ready graphics

High-density screens need specially prepared raster images.

This is often called:

retina-ready graphics

Text and vector graphics scale well by nature. But raster graphics need extra preparation.

Main rule: if the image should appear at a certain CSS size, its actual bitmap size should be larger for dense screens.

11. Retinization

Retinization means preparing larger raster images for dense screens.

Example: We want an image to appear at:

200 × 300 CSS pixels

Then we prepare:

For 1x screen:

200 × 300 bitmap pixels

For 2x screen:

400 × 600 bitmap pixels

For 3x screen:

600 × 900 bitmap pixels

Target display size:
200 × 300 CSS px

Needed bitmap sizes:
1x -> 200 × 300
2x -> 400 × 600
3x -> 600 × 900

Formula idea:

bitmap size = CSS size × density

12. Example with 1x, 2x, and 3x images

Suppose all images are displayed at:

320 × 240 CSS pixels

Prepared files:

• 320 × 240 -> 1x
• 640 × 480 -> 2x
• 960 × 720 -> 3x

Displayed size on page:
320 × 240 CSS px

Available files:
1x -> 320 × 240
2x -> 640 × 480
3x -> 960 × 720

What happens on dense screens:

• 1x image becomes blurry
• 2x image looks much better
• 3x image looks very sharp

13. Why 2x is often enough

In practice, developers often prepare:

• 1x
• 2x

Why not always 3x?

Because:

• 3x files are much heavier
• most users do not notice a big difference between 2x and 3x
• bigger files slow down loading

1x -> light, but blurry on retina
2x -> good balance
3x -> sharp, but heavy

Image sharpness vs file weight

1x  -> lower sharpness, low weight
2x  -> strong sharpness, medium weight
3x  -> slightly more sharpness, high weight

14. Retinization process

The process is usually:

1. Export the image at normal size
2. Export it again at 2× size
3. Optionally export it at 3× size
4. Save the larger versions with suffixes

Typical naming:

photo.jpg
photo@2x.jpg
photo@3x.jpg

Design source
   down
Export 1x
   down
Export 2x
   down
Export 3x (optional)

15. Fluid images

Now let’s look at the second big problem: screen size.

Suppose an image is:

1200 × 600

That may look good on a wide desktop screen.

But on a small phone:

• it may overflow
• it may create a horizontal scrollbar
• it may break the layout

Desktop:
+-------------------------------------------+
|              big image fits               |
+-------------------------------------------+

Phone:
+------------------+
| image too wide ->| overflow
+------------------+

16. What responsive / fluid images solve

Responsive images help images:

• shrink when needed
• fit smaller containers
• avoid overflow

The simplest technique is making the image fluid.

Code:

img {
  display: block;
  max-width: 100%;
}

17. Why display: block is used

Images are inline by default.

Inline images can leave a small gap below them because of text baseline behavior.

Using:

display: block;

removes that gap.

Inline image:
[image]
small gap below

Block image:
[image]
no inline gap below

18. Why max-width: 100% is used

This is the key part.

max-width: 100% means:

• the image can shrink if the parent is smaller
• but it will not grow wider than its own original size

Parent width = 800px
Image width  = 1200px

With max-width: 100%
-> image shrinks to 800px

Large parent:
+------------------------------+
|      image at natural size   |
+------------------------------+

Small parent:
+--------------+
| image shrinks |
+--------------+

Important rule:

max-width: 100%
prevents overflow
but avoids unnecessary stretching

19. Fluid image inside a container

Imagine a container .thumb.

If the container changes width, the image also changes width.

Wide container:
+--------------------------+
|        image fills       |
+--------------------------+

Narrow container:
+------------+
| image fills|
+------------+

So one image can adapt to the width of its parent.

This is the basic fluid image technique.

20. One image for all devices: benefits and limits

Fluid images solve:

• width adaptation

But they do not fully solve:

• sharpness on high-density screens

Fluid image solves:
✓ overflow problem
✓ width fitting problem

Fluid image alone does NOT fully solve:
✗ retina sharpness problem

So for best results, we often need:

• fluid sizing
• plus multiple density versions

21. Responsive images with srcset

To let the browser choose the right image for screen density, use:

srcset

Example:

<img srcset="./img/photo.jpg 1x, ./img/photo@2x.jpg 2x" />

More complete version:

<img
  srcset="./img/photo.jpg 1x, ./img/photo@2x.jpg 2x"
  src="./img/photo.jpg"
  alt="Image description for all versions"
/>

22. How srcset works

srcset gives the browser a list of available image versions.

Each image is followed by a descriptor:

• 1x
• 2x
• 3x

srcset list
|- photo.jpg      1x
+- photo@2x.jpg   2x

Meaning:

• normal screens should use the 1x version
• retina screens can use the 2x version

23. Browser choice with srcset

The developer gives options. The browser chooses the best one.

Developer provides:
1x image
2x image

Browser checks screen density
        down
Loads only the needed file

Example:

Screen density = 1x
-> load photo.jpg

Screen density = 2x
-> load photo@2x.jpg

This is smart because the browser does not need to download both.

24. Why src is still needed

The src attribute is still required as a fallback.

Example:

src="./img/photo.jpg"

Why? Because older browsers may not understand srcset.

Modern browser:
uses srcset

Older browser:
uses src

So:

src = safe fallback
srcset = smarter modern choice

25. Network loading idea

In developer tools, you will usually see:

• only one chosen image gets loaded

Available:
photo.jpg
photo@2x.jpg

Actual browser load:
only one of them

This saves bandwidth.

26. Background images and retina

Raster background images also need retina-ready handling.

Example:

.box {
  width: 200px;
  height: 300px;
  background-image: url("photo.png");
  background-size: 200px 300px;
}

Main idea: the background image should be displayed at the element’s intended CSS size.

Element size:
200 × 300 CSS px

background-size:
200px 300px

27. Why background-size matters

If the background image is larger or smaller than the visible element area, background-size controls how it is fitted.

For retina-ready backgrounds:

• the loaded file may be larger
• but the visible rendered size stays equal to the element size

Loaded image file:
400 × 600 bitmap px

Displayed background size:
200 × 300 CSS px

That gives sharper visual detail on dense screens.

28. Background images in flexible boxes

If the element does not have fixed width and height, use:

.box {
  background-image: url("photo.png");
  background-size: cover;
}

cover means:

• the background fully covers the box
• some parts may be cropped
• the box is completely filled

Background-size: cover

+----------------------+
|\\\\\\\\\\\\\\\\\\\\\\|
|\\\\ image covers \\\\|
|\\\\ entire box   \\\\|
+----------------------+

29. Checking pixel density in CSS

In CSS, pixel density can be checked with media features like:

• resolution
• min-resolution
• max-resolution

Most often, for retina handling, developers use:

min-resolution

30. Retina background swap with media query

Example:

/* Base styles and 1x image */
.box {
  width: 200px;
  height: 300px;
  background-image: url("photo.png");
  background-size: 200px 300px;
}

/* Override the image path
   if the screen density is at least 2x */
@media (min-resolution: 192dpi) {
  .box {
    background-image: url("photo@2x.png");
  }
}

31. How this background swap works

Base case:

• use photo.png

Retina case:

• if density is at least 2x
• replace it with photo@2x.png

Normal screen:
.box -> photo.png

Dense screen:
.box -> photo@2x.png

Step 1:
show 1x background by default

Step 2:
if resolution >= retina threshold
override image path

32. Why 192dpi means 2x

Standard screen density is treated as:

96dpi

So for density 2:

96 × 2 = 192dpi

1x -> 96dpi
2x -> 192dpi
3x -> 288dpi

So:

min-resolution: 192dpi

means:

• use this rule for screens with density 2 or higher

33. Content images vs background images

There are two common responsive image strategies:

For content images:

• use <img>
• use srcset

For background images:

• use CSS background-image
• use resolution media queries

Image in HTML content
-> <img srcset="...">

Image as decoration / background
-> background-image + media query

34. Big comparison diagram

Adaptive graphics problems
|
|- screen size problem
|    +- solve with fluid / responsive sizing
|
+- pixel density problem
     +- solve with 1x / 2x / 3x resources

Technique                          Use case
---------------------------------------------------------
max-width: 100%                    fluid content images
srcset                             retina-ready content images
background-size: cover             flexible background fitting
min-resolution media query         retina-ready background swap

35. Example workflow for a content image

Step 1: Decide how large the image should appear in CSS

Example:

Display size: 300 × 300 CSS px

Step 2: Export image files

photo.jpg      -> 300 × 300
photo@2x.jpg   -> 600 × 600

Step 3: Write HTML

<img
  src="./img/photo.jpg"
  srcset="./img/photo.jpg 1x, ./img/photo@2x.jpg 2x"
  alt="Photo"
/>

Step 4: Make it fluid if needed

img {
  display: block;
  max-width: 100%;
}

Choose CSS size
   down
Export 1x and 2x
   down
Use src + srcset
   down
Add fluid CSS

36. Example workflow for a background image

Step 1: Set base background image

Step 2: Set background size

Step 3: Override with a retina version in a resolution media query

Base 1x background
   down
Set display size / cover
   down
Add min-resolution query
   down
Swap to @2x file

37. Common mistakes

Mistake 1: Using one small raster image for all screens.

Problem: blurry on retina displays.

small image
   down
dense screen
   down
blur

Mistake 2: Using a very large image everywhere.

Problem: unnecessary file weight and slower loading.

huge image
   down
small phone still downloads it
   down
wasted bandwidth

Mistake 3: Forgetting max-width: 100% on content images.

Problem: image may overflow small containers.

Mistake 4: Using srcset but forgetting src.

Problem: older browser fallback is missing.

Mistake 5: Using a retina background image without controlling background-size.

Problem: background may not display at the intended visible size.

38. Mini cheat sheet

Physical pixels  -> real screen dots
CSS pixels       -> layout units in CSS
High density     -> more hardware pixels in same area
Raster image     -> bitmap image (jpg, png, gif)
Retinization     -> preparing larger raster files
1x / 2x / 3x     -> image versions for density levels
max-width: 100%  -> fluid content image
srcset           -> browser chooses best image version
background-size  -> controls visible background size
min-resolution   -> checks screen density in CSS

39. Final summary

Adaptive graphics means preparing images so they:

• fit different layout sizes
• stay sharp on different pixel densities
• load efficiently

Important things to remember:

• physical pixels are real hardware dots
• CSS pixels are abstract layout units
• high-density screens need more bitmap detail
• raster images can blur on dense screens if only 1x files are used
• retina-ready graphics are made by exporting larger image versions
• fluid images are created with display: block and max-width: 100%
• responsive content images often use srcset
• responsive background images often use background-size plus min-resolution media queries

Super short memory line:

Adaptive graphics = fit the space + stay sharp on dense screens