Images with different sizes and quality?

Images with different sizes and quality?
0

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.

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

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

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

Thanks for your reply

thanks so much for the reference. I will read it

thanks so much for the ideas. I will try them

1 Like

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