Should one resize an image in the browser?
I have already read in some places that we should not resize the images that we ask from the server in the browser. But I recently saw that it is good to have a large image with a low quality so that when these images are downloaded on a retina screen they get a reasonable quality.
But I need a small image to put on mine. So my question is: how do I do it? I take a large image and resize it in my CSS, or I take an image of the exact size I need?
1 answers
Should not. But there are cases and cases where you can resize in moderation.
You can't take a 2000x2000 image and match it in HTML to 300X200. First, on account of the proportion that will be modified. To decrease it, you can use a system to manage thumbnails (ex: intervention Image ).
However, even then it is sometimes not enough.
For example, a responsive website, where the same image appears in a 720px and 320px column. You can use Intervention to generate the image in 720px and, if you use Bootstrap, use a class called "img-responsive", which adapts the width according to the parent container.
In both cases, still if possible, use image optimizers such as @JorgeB. cite. I personally use a software called ImageOptim , which is free. It gives an optimized in the file without loss of quality.