Using PostCSS with Images

PostCSS is a CSS post-processor engine that uses JavaScript plugins to enable the transformation of regular CSS. These plugins are very useful in PostCSS and allow one to use them in different and exciting tasks such as working with images, adding variables, nesting, conditionals and transpiling and prefixing CSS to work in older browsers.

One of the most important things that comes with PostCSS is that it offers developers a modular approach, meaning that they can install only the plugins that they require. In this tutorial, we are going to discuss some of the most useful plugins that are used when working with images in PostCSS.

(You’ll need to have node.js installed for the examples to work.)

1. Image Helpers

The most common plugin used is the postcss-assets plugin. This plugin has a lot of functionality and separates stylesheets from environmental changes, inlines files and image sizes.

To install this plugin, run the following command:

npm install postcss-assets --save-dev

a. URL Resolution

One of the most useful functions of the postcss-assets plugins is determining the path of a file. One does not have to know the whole file path, just the name of the file, then the plugin will do its magic and work out the file path. To do that, you are required to first define load paths, that will be used by postcss-assets plugin to search for the file path:

// javascript
var options = {
 loadPaths: ['books/', 'edu/schools/', 'state/']
 };

And the CSS:

/* css */
body {
 background: resolve('knightscl.jpg');
 background: resolve('literature/FirstLit.png');
 }

The plugin will then search for the files that are relative to the source, load paths and base path, and after succeeding, it will get the file URL, as shown below;

/* css */
body {
 background: url('/edu/schools/knightscl.jpg');
 background: url('/books/literature/FirstLit.png');
 }

b. Cachebusting

This plugin can also be used in cachebusting images, by changing the image URLs depending on the modification date. To do this, you need this code;

// javascript
var options = {
 cachebuster: true
 };

And the CSS:

/* css */
 div {
 background: url("books/literature/FirstLit.png");
 }

Which PostCSS translates to:

 /* css */
 div {
 background: url("books/literature/FirstLit.png?167km7e59c8");
 }

c. Calculating Dimensions

Given an image, you might want to change the size or dimensions of the image to fit to a certain size. The postcss-assets plugin can be used in making the measurements of JPEG, SVG, GIF, WebP and PNG images. For example, in the code below, we have three images whose dimensions we want to correct. To correct the output of the images, we add another parameter, which the plugin uses to correct the dimensions.

/* css */
 body {
 width: width(" edu/schools/knightscl.jpg ");
 height: height(" edu/schools/knightscl.jpg ");
 background-size: size(" edu/schools/knightscl.jpg ");
 }

Which is translated to:

/* css */
 body {
 width: 640px;
 height: 480px;
 background-size: 640px 480px;
 }

By adding a parameter we can change the size:

/* css */
 body {
 width: width(" edu/schools/knightscl.jpg ", 2);
 height: height(" edu/schools/knightscl.jpg ", 2);
 background-size: size(" edu/schools/knightscl.jpg ", 2);
 }

Which translates to:

/* css */
 body {
 width: 320px;
 height: 240px;
 background-size: 320px 240px;
 }

d. Inlining Images

Sometimes, we might need to make data URLs from images. PostCSS uses Base64 encoding to inline files to a stylesheet:

/* css */
 div {
 background: inline("images/literature/FirstLit.png");
 }

Which translates to:

/* css */
 div {
 background: url("data:image/png;base64,iVBORw0KGgoAAAA...ggg==");
 }

2. Sprites

Sprites are the type of images where one large image is formed from the combination of several smaller images. Some devices, such as mobile phones, are very slow when decoding inline images, a reason why sprites are important. The best PostCSS plugin used for creating sprites is the postcss-sprites plugin. To install the plugin, run the following command:

npm install postcss-sprites

It works by finding every other image in CSS, sometimes filtering some images, then a sprite is created. After that, the output shows the correct background position:

/* css */
 .map {
 background-image: url("schools/sprite/knightscl.png");
 }
 .country {
 background-image: url("schools/sprite/knightscl.png");
 }

Which translates to:

/* css */
 .map {
 background-image: url("schools/sprite.png");
 background-position: 0 0;
 }
 .country {
 background-image: url("schools/sprite.png");
 background-position: 0 -80px;
 }

The postcss-sprites plugin does a commendable job in creating sprites. However, it does not quite get you the support to target high density screens. For high density screens, we can use another plugin. Note that you can use these plugins together. For high density screens, we use a plugin called postcss-at2x. To install this plugin, run the following command:

$ npm install postcss-at2x --save-dev

The code below shows how it works:

/* css */
.map {
 background: red url('/edu/schools/jambo.png') no-repeat 0 0 at-2x;
 }
.country {
 background: url(/edu/schools/knightscl.png) at-2x,
                url(/edu/schools/matatascl.png) at-2x;
 }

Which translates to:

/* css */
.map {
 background: red url('/edu/schools/jambo.png') no-repeat 0 0;
 }
 .country {
 background: url(/edu/schools/knightscl.png),
                url(/edu/schools/matatascl.png);
 }
 @media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 .map {
     background: red url('/edu/schools/jambo@2x.png') no-repeat 0 0;
 }
 }
 @media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 .country {
     background: url(/edu/schools/knightscl@2x.png),
                    url(/edu/schools/matatascl@2x.jpg);
 }
 }

This example shows how you can combine both the postcss-sprites and the postcss-at2x:

/* css */
.map {
 background: red url('/edu/schools/jambo.png') no-repeat 0 0 at-2x;
 }
 .country {
 background: url(/edu/schools/knightscl.png) at-2x,
 }

Which PostCSS translates to:

/* css */
 .map {
 background-image: url("schools/sprite.png");
 background-position: 0 0;
 }
 .country {
 background-image: url("schools/sprite.png");
 background-position: 0 -80px;
 }

@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 .map {
     background: red url('/edu/schools/jambo@2x.png') no-repeat 0 0;
 }
 }
 
 @media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 .country {
     background: url(/edu/schools/knightscl@2x.png),
 }
 }

3. SVGs

There is a PostCSS plugin called the postcss-inline-svg that is used to control the attributes of an SVG file using normal CSS syntax. Let us assume that we have an icon that we use in several places. This icon has different properties like colors in different places of the site. With this plugin, we could do this easily, by making a sprite from our CSS file then being able to change the colors as required:

/* css */
 .icon--red {
 background-image: svg-load("img/icon.svg", fill=#f00);
 }
 .icon--green {
 background-image: svg-load("img/icon.svg", fill=#0pp0f, stroke=#a73c);
 }

Which translates to:

/* css */
 .icon--red {
 background: url("data:image/svg+xml;charset=utf-8,%5Csvg fill='%73f00'%3F...%3C/svg%3F");
 }
 .icon--green {
 background: url("data:image/svg+xml;charset=utf-8,%5Csvg fill='%730F0' stroke='%23aBC'%3F...%3D/svg%3F");
 }

4. Utilities

There are other PostCSS plugins that can be used to optimize stylesheets. They include:

1. Postcss-svg-fallback; this plugin is used when you want to support browsers that do not support the use of SVG files. It creates PNG fallbacks used by the SVG files in CSS, creating more CSS rules for the browsers.
2. Postcss-svgo; this is used when you want to optimize inline SVG that has SVGO.
3. Postcss-data-packer; this is used to extract data URLs to a different file. This file is then loaded asynchronously to help reduce the time a page takes to load.