Photo with low resolution in a carousel

I have a full screen carousel but its images are small so they are hard to see. What could I do with this?

Here is the pen

You could use a higher resolution image.

The image in your pen:

https://picsum.photos/id/884/800/450

Higher res:

https://picsum.photos/id/884/1900/1080

This will solve the immediate problem of the image looking pixelated.

In terms of performance, you might not want to send the higher quality images to devices with smaller screens. In this case you should look into using the srcset attribute.

I’m aware that the image I used in my pen is a low res image to emulate the images that I use in my project.

So you don’t have any higher res images that you can use then?

Tought something like this with object-fit wont solve the problem ?

<div style="width:100%;height:400px;">
  <img src="https://global.discourse-cdn.com/sitepoint/original/3X/e/5/e5c522d667c53fbfb0ada5f535969c16f9748c84.png" alt="Paris"  style="float:left;width:100%;height:100%;object-fit:cover;">
</div>

No, unfortunately.

That code has nothing to do with the resolution of the image but rather just stretches an image to fit a specified space.

If you are talking about the quality of the image then you need a high quality image to start with. You can’t make a low quality image appear as a better quality and indeed stretching an image larger than its natural size will just make a low quality image worse.

If its important for you to have good quality images then you need to start with a good quality image at the large size and then shrink it smaller with css. Of course this means a higher file size to start with and that may not be best for your users. There is always a trade off between quality and file-size so compromises often have to be made along the way.

As mentioned above you can use srcset to display different quality images dependent on device but you do need a range of the same image at various qualities and sizes to do this. It is not an easy fix and requires considerable work and attention to detail. Indeed for retina devices you are looking at supplying double the image size and quality to get a crisp display which means even larger file sizes.

I find it best to use one image that is well optimised and at a file-size that I can comfortably live with. However for artwork sites that are all about images then high quality images are likely a necessity. For carousels I doubt that the image is very important and most people switch off when they see a carousel anyway. :slight_smile:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.