Images cheat sheet

Image formats

  • SVG

    • 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.

  • JPG

    • 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.

  • PNG

    • 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.

  • Favicons

    • 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).

  • GIF

    • Limited to 256 colours, can be animated.

    • Try to avoid using.

    • Use only for animations but using video is still preferred.

HTML tags

  • <img src="…" alt="">

    • 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.

  • <figure>

    • 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”.

  • <picture>

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

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

HTML examples

  • Image tag

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

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

    • <link href="/favicon.ico" rel="shortcut icon">
      <meta name="application-name" content="Your Site Name">
      <link rel="apple-touch-icon-precomposed" href="/favicon-152.png">
      <meta name="msapplication-TileImage" content="/favicon-144.png">
      <meta name="msapplication-TileColor" content="#ef0303">
      
  • Responsive & retina image tag

    • <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

    • <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>
      
  • Retina 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>
      

CSS background images

  • background-image

    • 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.

  • background-position

    • 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

  • background-repeat

    • 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;
      
  • background-size

    • 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

  • background-attachment

    • 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

  • Shorthand syntax

    • 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;
      

CSS gradients

Always provide a background-color when using gradients.

  • Gradients

    • 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);
      
  • Gradients with stops

    • 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()

  • Repeated gradients

    • 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()

Border images

Use an image around the edges of the element instead of a plain border. Border-image generator.

  • border-image-source

    • The path to the image file.

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

    • 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;
      
  • border-image-repeat

    • 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.

  • border-image-width

    • 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;
      
  • border-image-outset

    • 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;
      
  • Shorthand

    • 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;
      
  • Image slicing example

    • How a border image is sliced.

    • An example of a 9-sliced image

  • Example CSS

    • 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;
      }
      
  • Gradient border image

    • 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;
      }
      

Common CSS code snippets

  • Flexible images

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

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

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