The HI Life w/ Lime, Big Gulp

Introduction to Gulp.js 7: Base64 Encoded Images

This is the 7th part of my series Introduction to Gulp.js. Today I will use Gulp.js to replace a lot of my URLs to small images with Base64 encoded images.

Base64 encoded images

The last task executed by my build task is one, which replaces the URLs of small images in my CSS files with Base64 encoded images. This way the images get embedded into the CSS file and don’t need an additional server request. If the images are not too large this will speed up loading my website a lot.

I use a lot of small size patterns on my website because I doesn’t like the Flat Design approach a lot. The real world isn’t flat. Nowhere. There is always structure, pattern, shade and light. The patterns I use are from the fantastic website Subtle Pattern. They have a few hundred really nice subtle patterns.

To load the background pattern I use SCSS like this:

The generated CSS looks like this:

After the task ran, the CSS will look like this:

For this task I will need another Gulp.js plugin:

$ npm install --save-dev gulp-base64@0.1.2

I add a new configuration entry and create the task:

gulp/config.js

I only replace images with the ending PNG and only if maximal 20 KB of size. This way my high resolution images don’t get embedded into the CSS file.

gulp/tasks/development/base64.js

We are now finished with the development build task.

Source Code

View Source on GitHub

Conclusion

This concludes the 7th part of my series Introduction to Gulp.js. We learned how to replace URLs to PNG images with Base64 encoded images. And we are now finished with our build task.


This article was first published on stefanimhoff.de
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.