I have read in some places that we should not resize the images we ask of the server in the browser. But I have recently seen 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 are of reasonable quality.
But I need a small image to put on mine. So my question is: How do I? I take a large image and resize it in my CSS, or do I get an image of the exact size I need?
You should not. But there are cases and cases where you can resize in moderation.
You can not get a 2000x2000 image and fit it in HTML to 300x200. First, because of the proportion that will be modified. To decrease it, you can use a system to manage thumbnails (eg Intervention Image ).
But sometimes it's not enough.
For example, a responsive site, 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 adjusts the width according to the parent container.
In both cases, even if possible, use image optimizers like what @BorgeB. quoted I personally use software called ImageOptim , which is free. It gives an optimized file without loss of quality.
