Images with different sizes and quality?

1

hello campers.
when I put image on a web page for slider or other things and give it width: 100%, it looses its quality.

how could I solve this problem as a web designer? how to keep the quality of all images with different sizes?

and many thanks in advance.

2

I think this is a pretty tough one. To stretch an image very large and not lose quality, it must be a large image to begin with. Most sites will have the same img saved at various sizes. Then when a request is made, the css will detect the screen size and use the appropriate image.

Check out media queries for more on that.

2 Likes
3

You provide different images for different sizes. HTML already has full support for this:

<img> elements support this via the srcset property (which allows extra config via the sizes property)

And for more granular control, the <picture> element lets you provide a series of images for different sizes:

Overview on responsive images here:

3 Likes
4

Hello @optimistic,

I will agree with @Antone88 that it is a complex one.

In terms of web design, if you are given images at their sizes and for example, you want to make them bigger, it will be impossible to do so without losing image quality. That would still be the same case even if you used graphic software like Photoshop too.

So, the options to solve this is either:

1. If they are your images
You retake the pictures at its largest size. Once you do, duplicate all the images but resize them for different screen devices. Also, do image optimisation on each image.

2. If the images are not your (e.g. they are images stocks)
Well, it also goes down to a few options. You either will need a new picture if you do not want to change the layout or if you want to keep the images, you may have to change the layout.

I do have one idea, but I am not sure if this will work. If the image is a background image that takes the whole screen device, you can add a transparent colour overlay on top of the image. However, if that will cover the pixelated areas or not is questionable, but you have nothing to lose. :slight_smile:

2 Likes
5

Thanks for your reply

6

thanks so much for the reference. I will read it

7

thanks so much for the ideas. I will try them

1 Like
8

Good collection of resources.

This is something I need to get better at. I just throw a massive image at the page and squish it, but performancewise that’s absurd.

1 Like