Images cheat sheet

Vector graphic: good for graphics with few colours, animations; can manipulate with code.

Very scalable and retina ready.

Export settings: Styling: Presentation attributes, Font: Convert to outline, Images: Link, Object IDs: Layer names, Decimal: 1, Check minify, Uncheck responsive.

Raster graphic: good for photos and complex imagery.

For retina: determine max dimensions on website, double the original graphic size, compress to around 20%.

Link inside an SVG to get masks & transparency.

Export settings: Compression: ~65% (~20% for double-sized retina), Progressive, Uncheck embed color profile, Internet Standard RGB, Metadata: None.

Raster graphic: good for graphics with few colours.

PNG-24 has millions of colours & 256 levels of transparency.

PNG-8 has 256 colours—Photoshop’s implementation is incorrect, use ImageAlpha.

Not really retina capable: use SVG instead.

Export settings: Interlaced, Uncheck embed color profile, Internet Standard RGB, Metadata: None.

Small icons used in different places on browsers.

Use a tool like Icon Slate or X Icon Editor to convert the PNGs into an .ico file.

ICO sizes: 16×16, 32×32 & 48×48.

PNG sizes: 152×152, 144×144 (transparent).

Limited to 256 colours, can be animated.

Try to avoid using.

Use only for animations but using video is still preferred.

For inserting content-related images.

Use the alt="…" to describe the image, blank alt for decorative images.

If a formatted description is needed use aria-details="…"

Use the srcset="…" & sizes="" attributes for responsiveness.

For images that need captions.

Use the <img> and <figcaption> tags inside.

Use only <figure> with a caption, or if the image can be removed from its location and still make sense, e.g. “Refer to Figure 1”.

Used for art direction of responsive images: different crops on different screens, etc.

Needs the <source> and <img> tags inside.

<img src="pluto.jpg" alt="Photo of Pluto">

<figure>
  <img src="pluto.jpg" alt="">
  <figcaption>Photo of Pluto taken with the Hubble Telescope</figcaption>
</figure>

<!-- .ico should have 16, 32, 48 px sizes -->
<link href="/favicon.ico" rel="shortcut icon">
<link href="/favicon-196.png" rel="icon" type="image/png">

<!-- Very optional -->
<meta name="application-name" content="Your Site Name">
<link rel="apple-touch-icon-precomposed" href="/favicon-196.png">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-TileColor" content="#ef0303">

<img
  src="small.jpg"
  srcset="larage.jpg 2000w, medium.jpg 1000w, small.jpg 320w"
  sizes="(min-width: 38em) 50vw, 100vw"
  alt="A giant squid swimming deep in the sea"
>

<picture>
  <source media="(min-width: 60em)" srcset="high.jpg">
  <source media="(min-width: 35em)" srcset="medium.jpg">
  <img src="small.jpg" alt="A giant squid swimming deep in the sea">
</picture>

<picture>
  <source media="(min-width: 60em)" srcset="large@2x.jpg 2x, large.jpg 1x">
  <source media="(min-width: 35em)" srcset="medium@2x.jpg 2x, medium.jpg 1x">
  <img src="small.jpg" srcset="small@2x.jpg 2x, small.jpg 1x" alt="A giant squid swimming deep in the sea">
</picture>

Link an image and display in behind the text of an element.

The path is relative to the CSS file, and usually starts with ../

background-image: url("../images/icon.png");

Separate multiple images with a comma (,).

background-image: url("../images/star.svg"), url("../images/hex.svg");

The first image is the one that will be on top, each image further along will be a lower layer.

Move a background image around inside the element.

Accepts px, % or keywords.

Horizontal position must come first, vertical position second.

/* 10px in from the left, 25px down from the top */
background-position: 10px 25px;

/* Stuck to right side, in the vertical center */
background-position: right center;

/* Move up from the bottom with calc(): 25px up from the bottom */
background-position: center calc(100% - 25px);

Horizontal keywords: left, center, right

Vertical keywords: top, center, bottom

Control how the background image patterns.

no-repeat, repeat, repeat-x, repeat-y, space, round

/* Don’t repeat in either direction */
background-repeat: no-repeat;
/* Repeat only horizontally */
background-repeat: repeat-x;
/* Repeat only vertically */
background-repeat: repeat-y;
/* Get browser to determine how to repeat the image well */
background-repeat: space;
background-repeat: round;

background-repeat: space — do not crop the image, but put space around the repeated ones.

background-repeat: round — scale the image up so there’s always a full version, no cropping.

Or, use horizontal & vertical values like background-position

background-repeat: no-repeat repeat;

Scale the background image inside its element.

Accepts px, %, keywords, or auto.

Width always must come first, height second.

/* Scale to 256 pixels wide & tall */
background-size: 256px 256px;

/* Scale to 128 pixels wide, automatically determine the correct height */
background-size: 128px auto;

/* Scale to 50% the width of the element, auto height */
background-size: 50% auto;

/* Keywords for automatically scaling the image */
background-size: cover;
background-size: contain;

background-size: cover — fill the whole element, cropping the image.

background-size: contain — make sure the whole image is visible, unused areas will show the background-color

Prevent the image from moving when the browser is scrolled, a parallax-like effect.

background-attachment: fixed;

The default value, that all images are, is scroll

Combine everything into a single line instead of separate background-* properties.

background should follow this order:

• background-image

• background-position / background-size

• background-repeat

• background-color

/* This can be written on a single line too */
background:
  url("../images/star.svg")
  left top / 32px auto
  round
  indigo
  ;

Or with multiple background images:

background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6)), url("../images/star.svg") left top / 32px auto round indigo;

The browser will generate a background-image gradient for you.

background-image: linear-gradient(to right, purple, indigo);

Angle the gradient by adjusting the first value:

background-image: linear-gradient(33deg, purple, indigo);

Also radial gradients, with the keywords circle or ellipse followed by a position

background-image: radial-gradient(circle at center, purple, indigo);

Control the gradient colour positions using colour-stops.

Each colour can have it’s own stop value.

/* Two purples separated by a sharp black line */
background-image: linear-gradient(33deg, purple 0%, purple 49%, black 49%, black 50%, indigo 50%);

Also works for radial-gradient()

Create a gradient that repeats itself multiple times within an element.

/* Black/yellow warning stripes */
background-image: repeating-linear-gradient(45deg, yellow, yellow 10%, black 10%, black 20%);

Also repeating-radial-gradient()

The path to the image file.

border-image-source: url("../images/border.svg");

How to slice the image into 9 pieces—called 9-slicing.

Same order as margin, padding: top, right, bottom, left.

/* 36px in from every edge */
border-image-slice: 36px;
/* 36px in from top/bottom; 24px in from left/right */
border-image-slice: 36px 24px;
/* 36px from top, 24px from right, 12px from bottom, 17px from left */
border-image-slice: 36px 24px 12px 17px;

Tells the browser how to handle the long central edge regions.

repeat, stretch, round, space

Same as background-repeat: horizontal first, vertical second.

/* Same in both directions */
border-image-repeat: repeat;
/* Round horizontally, space vertically */
border-image-repeat: round space;

border-image-repeat: space — do not crop the slice, but put space around the repeated ones.

border-image-repeat: round — scale the slice up so there’s always a full version, no cropping.

The border image width will automatically scale to the width of the border

This can overwrite that value to scale the image inwards from the box.

Follows the same scheme as margin, padding

/* 36px wide in every direction */
border-image-width: 36px;
/* 36px wide on top/bottom; 24px wide on left/right */
border-image-width: 36px 24px;
/* 36px wide top, 24px wide right, 12px wide bottom, 17px wide left */
border-image-width: 36px 24px 12px 17px;

How far to expand the border image outside the edge of the box dimensions.

Follows the same scheme as border-image-width

border-image-outset: 12px 16px;

Combine everything into a single line instead of separate border-image-* properties.

border-image should follow this order:

• border-image-source

• border-image-slice

• border-image-width

• border-image-outset

• border-image-repeat

border-image: url("../images/border.svg") 36px repeat;

How a border image is sliced.

Using the image on the example image…

.box {
  border-image: url("../images/border.svg") 36px repeat;
}

/* Or longhand… */
.box {
  border-image-source: url("../images/border.svg");
  border-image-slice: 36px;
  border-image-repeat: repeat;
}

Because border-images are just images, we can use gradients!

.box {
  border: 8px solid indigo;
  border-image-source: linear-gradient(to bottom, blue, indigo);
  border-image-slice: 1;
}

.img-flex {
  display: block;
  width: 100%;
}

.image-replacement {
  overflow: hidden;
  direction: ltr;
  text-align: left;
  text-indent: 100%;
  white-space: nowrap;
}

.btn {
  display: inline-block;
  background-color: purple;
  background-image: linear-gradient(to bottom, purple, indigo);
  border-radius: 6px;
}