1
I have read in some places that we should not resize the images we request from the server in the browser. But I saw recently that it is good to have a large image with a low quality so that when these images are downloaded on a retinal screen they will be of a reasonable quality.
But I need a small image to put in mine. So my question is: How do I do? I take a large image and resize it in my CSS, or grab an image of the exact size I need?
-1
It shouldn’t. But there are cases and cases where you can resize in moderation.
You cannot take a 2000x2000 image and adjust it in HTML to 300x200. First, because of the ratio that will be modified. To decrease it, you can use a system to manage thumbnails (e.g.: Intervention Image).
However, sometimes it is 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 adapts the width according to the parent container.
In both cases, even if possible, use image optimizers like the one @Jorgeb. cited. I personally use software called Imageoptim, which is free. It gives an optimized file without loss of quality.
Browser other questions tagged css html5 css3 image responsive
You are not signed in. Login or sign up in order to post.
The ideal would be to send the server an image with the exact size, so that the browser (browser) is not downloading more resources (larger image = heavier) than it will actually need. Here’s a good tool to optimize images, it’s not directly related to the size but it’s useful, I use it
– Miguel
@Miguel what tool?
– Jorge B.
Opps, lol @Jorgeb. I forgot to link: https://kraken.io/web-interface
– Miguel