In the previous blog post in this series, we talked about why we use Susy to handle our flexible grid layout. Part 2 discusses using Gulp for Image Optimization.
You can have a flexible grid system, but if your media assets are not optimized for screen size, your design isn’t completely responsive. Optimization include:
Gulp is a build system that runs tasks necessary for building a web site. One of these tasks is creating responsive images. Gulp can help with this task by taking image files from the original source, run them through an image resizing and optimization process and we can use that to call the correct image for the size screen being used. The result is that whenever a new image is uploaded to the site, a resized version is created and is ready to be served.
Gulp can also make performance better in any type of device by optimizing the CSS not just by compressing it, but by providing tools to make the CSS files lighter and more readable and resulting in a faster load.