How to increase image resolution in gallery?

liquidcms

2/28/23, 11:56 PM

Not sure if I am asking the correct question here as I am more of a PHP coder than a graphics designer. My client's site has a Views img gallery which displays 3 columns wide on desktop and 1 wide on mobile. The image resolution on mobile is not very good and I am trying to increase it. I suspect it is the same resolution on desktop but no one is concerned about that.

I think the correct solution here is to use a larger img style for the image and then adjust with CSS to shrink it to fit the device (responsive). But if I do that, the images do not size to fit in the 3 wide columns on desktop.

Does this all make sense? Is there a module to do this properly. I have looked at Responsive Images and Styles and Picture modules but they sound like simply make images which resize but don't allow starting with a larger img to start with (larger style).

0 + 0

Patrick Kenny

2/28/23, 12:59 AM

Picture module with responsive images is the standard approach for this. (Proof: It is in D8 core.) "then adjust with CSS to shrink it to fit the device (responsive). But if I do that, the images do not size to fit in the 3 wide columns on desktop." -> This sounds like you are using CSS incorrectly, but it's impossible to say without any code.

Score:0

Drupal

jbarrio

3/1/23, 5:56 PM

One thing is defining the responsive image styles to set specific breakpoints and another thing is to improve the quality of the uploaded pictures. For instance, the Image toolkit allows you to set the JPEG quality of the manipulated images, resulting in better image quality at expense of higher network transfers.

I would try to avoid as much as possible shrinking images by CSS because this works but you are opening the door to a slow page: imagine someone uploads a carousel of 5MB pictures and you are displaying 220px thumbnails in mobile -> the page size will become unusable.