Glide: Easy Dynamic on-Demand Image Resizing
Glide is an image processing library built on top of Intervention. Its purpose is to facilitate on-demand image processing. That’s a fancy way of saying it creates images as they’re requested if they don’t exist.
For example, you might have a large, high quality portrait for your user profile. But when opening on a mobile device, downloading a 10 MB image is not only wasteful, it is slow. Instead, you could add a media query into your CSS, like so:
@media (min-width: 400px) {
.profilePic {
background-image: url('/images/myprofile.jpg');
}
}
@media (max-width: 400px) {
.profilePic {
background-image: url('/images/myprofile-320.jpg');
}
}
This would make all devices under 400px of width load the smaller background image, thus downloading faster. But manually resizing every image you might need in your app is tedious, time consuming, and error prone. That’s where Glide comes in.
Glide can be configured to respond to missing image requests (such as the non-existant myprofile-320.jpg from the example above) by creating them from a predetermined source. In a nutshell, if the requested image doesn’t exist, but its source does, the requested image gets created from it. What’s more, the image can be saved into a cache, so that future requests don’t invoke the library and waste precious CPU resources on re-rendering.
Let’s configure it.
If you’d like to follow along, feel free to use our no-framework application and Homestead Improved for quickly setting up an environment and sample application to test this in.
Bootstrapping
Step one is installing Glide:
composer require league/glide
Then, we need to configure the Glide server. In the NOFW project above, this happens in app/config.php where all the services are configured for future injection via PHP-DI.
Continue reading %Glide: Easy Dynamic on-Demand Image Resizing%
LEAVE A REPLY
You must be logged in to post a comment.