Generally, Image styles are used to set presets for image processing. By using the Drupal default image styles feature, we can crop, desaturate, resize, rotate, and scale the images. We can also add various effects before an image is displayed on your Drupal site. When an image is displayed with a style, a new image file will be created and the original image is left unchanged. By default, Drupal has come up with three image styles: thumbnail, medium, and large.
Why we need Image style:
Let’s say if we are having our site with more images there we need to have a different dimension of the same images need to display within our site. Consider a News magazine website, there Image will play a major role, this will cover the audience. So what they will do is, on the home page, they need to have a different proportion image when the need user clicks on the Image or link the user will be redirected to the detail page, from there the end-user can see larger or different styled images. So in this scenario, this Drupal media module default feature “Image style” will help us to have a different image.
So do we have to create the same image with different dimensions? no instead of that, we can use the built-in Drupal media module feature “Image style”. So if you are navigating at admin > configuration > media, there you can see a pre-configured Image style like Large, Medium, and Thumbnail with respective dimensions. So this Image style will be available in the field settings when you are creating an Image field in the content type. So you have to enable this Image style if required. So assume that we have created a content type with Image style, then we are going to create content in this content type means we need to upload an image right. So that image will be uploaded in the specified path after if you want to see the same image with different image style means you have to call the respective Image style in the render arrays so that Drupal will look for the specified Image style and render the Image with configured values.
In Drupal 7:
In Drupal 7, to render an image with a particular style we need to call a functioning theme(), there we need to pass the image URI and image style you want to render (ex. here we can use thumbnail) along with optional parameters if needed
$image = theme('image_style', array('style_name' => 'thumbnail', 'path' => 'public://image.png'));
So how do we do it in Drupal 8?
First of all, image styles in Drupal 8 are configuration entities, so that we can create and export the image styles and we can do many other things since it is configurable. Here we won’t call theme functions like Drupal 7 how we are getting it directly above. What we need to do is always return render arrays and expect them to be rendered in a theme layer. SO that the theme layer will convert the render associate array into readable HTML content. Also, returning as a render array helps with things like caching, etc.
Finally, if we want to have an image URL with the image style applied, we need to load the image style config entity and from there we can get the URL, look at the below snippet
$style = \Drupal::entityTypeManager()->getStorage('image_style')->load('thumbnail');
$url = $style->buildUrl('public://image.png');
So that is it. This will generate a URL for the image with the image style applied. This is how you can have a different Image style and render it in subsequent pages.
