What is image style?
In Drupal, an image style refers to an effect—such as cropping and colour adjustment—applied to an image uploaded by a user.
If you want a more in-depth understanding of this topic, check out the FAQ section below:
Question #1: What image style types are available in Drupal?
There are a lot of image style types available in Drupal, including:
- Thumbnail
- Medium
- Large
- Crop
- Desaturate
- Resize
- Scale
- Rotate
Let us go over each one in more detail:
The thumbnail image style, as the name suggests, allows you to quickly transform an image into a thumbnail. This is particularly useful if you run an online store and need thumbnail versions of all your product photos.
Medium, on the other hand, is pretty self-explanatory as well. It simply allows you to quickly create a medium-sized version of an image. This is the version displayed along with an article’s teaser.
The same goes for the large image style. It just allows you to create a large version of an image, which is what is displayed along with the full article.
The crop image style allows you to cut out parts of an image, leaving only the section you want to use.
Desaturate, despite its name, does not simply lower the saturation of an image. Instead, it turns it into a full-on grayscale one.
The resize image style allows you to change the size of an image to whatever dimensions you want. Take note, however, that it will not automatically retain the original dimensions of your image. This means that it is possible to end up with a distorted image if you are not careful.
In contrast, the scale image style allows you to resize an image while also keeping its original dimensions.
Finally, rotate, as the name suggests, simply allows you to change the orientation of an image.
Question #2: What are the benefits when using it in Drupal?
The biggest benefits of using an image style in Drupal are:
- It allows you to make quick changes to your images
- It allows you to keep your original images intact
Let us go over each one in more detail:
First, image styles in Drupal are designed to help you quickly create quick changes to the basic attributes of an image without having to actually do any image editing work. All you have to do is select the styles you want and Drupal will take care of applying all the changes.
Second, when you use image styles in Drupal, the system creates versions of your original images instead of directly altering them. This means you can just keep creating new styles without having to constantly re-upload a ‘clean’ version of your images.
For more information on how to manage image style in Drupal, check this article from HostKnox website.
Question #3: What is the responsive image style in Drupal?
The responsive image style in Drupal, as the name suggests, allows you to set your images up to adapt to the screen resolution of whatever device your visitors use to access your website.
To be more specific, it allows you to do two things:
- Tell web browsers to pick an appropriately sized image based on the user’s device and screen resolution
- Tell web browsers to pick the appropriate image to display at different breakpoints
Take note that we are not simply scaling images up or down here. Instead, we are telling web browsers to actually pick a different image depending on the device and breakpoint, which can significantly improve your page load speeds.
But what exactly is the difference?
Well, simply scaling the same image up or down means that its file size remains the same. So, a 1 MB image would still be 1 MB even when it is scaled down to 1×1 pixel.
In contrast, the responsive image style in Drupal chooses the smallest suitable copy of an image for the device requesting it. This means that even if you had a 1 MB image that is designed to look amazing on a desktop computer, you can tell web browsers to pick, say, a 100 KB copy for mobile devices with significantly smaller screens.