The SitePoint PHP blog has continued their series covering the creation of an online image gallery application. The series has included several tutorials covering performance and optimization improvements. In this latest article they continue that trend focusing on optimizing the resizing of the images.

We’ve been building a sample application — a multi-image gallery blog — for performance benchmarking and optimizations. At this point, our application serves the same image regardless of the resolution and screen size it’s being served in. In this image resizing tutorial, we’ll modify it to serve a resized version depending on display size.

They start by listing out the requirements for the improvement: make all images responsive and the addition of the code to generate the resized image. Next it discusses the state of responsive images on the web and shows the first additions to the templates for the "srcset" value. They create some helper methods in Twig to get the image URL and "srcset" value. Next up, the tutorial helps you install the league/glide package and use it to create a script to manually "serve" the resized image information back to the user.