1

I have a website with the code:

#part1{
    background-image: url('grass_v001.png');
}

However, the grass_v001.png is a very large file, and takes several too many seconds to load on the browser (slow load times = a less professional look). Is there a way to lower the quality of the image solely through css? I'd rather not work in JS or Jquery for this, but I will if I need to. Thanks!

2 Answers 2

1

For CSS, you can use image-set to deal with this.

Create a few smaller sized versions of your image, and provide them in the image set - then let the browser pick the appropriate one. This way, larger screens that can make good use of the higher resolution will get served that, and smaller screens can use the faster, lower resolution image.

The image-set() CSS functional notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.

Resolution and bandwidth differ by device and network access. The image-set() function delivers the most appropriate image resolution for a user's device, providing a set of image options — each with an associated resolution declaration — from which the browser picks the most appropriate for the device and settings. Resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load.

image-set() allows the author to provide options rather than determining what each individual user needs.

Example

#part1 {
    background-image: image-set(
        url('grass_v001_small.png') 1x,
        url('grass_v001_large.png') 2x
    );    
}

You'll want to also add a duplicate '-webkit-' vendor prefix for some browsers (you should consider CSS processors to handle this for you).

#part1 {
        background-image: image-set(
            url('grass_v001_small.png') 1x,
            url('grass_v001_large.png') 2x
        );
        background-image: -webkit-image-set(
            url('grass_v001_small.png') 1x,
            url('grass_v001_large.png') 2x
        );    
    }
0

You could scale the image proportionally to itself with just HTML and CSS but the browser would still load the whole image into memory.

You would need to use some photo editing software to change the resolution of the image and image format to JPEG, which has a better compression algorithm than the PNG image format.

HTML:

<div class="img_resz">
    <img src="img.jpg">
</div>

CSS:

.img_resz img 
{
    width: 90%;
}
3
  • This will still result in the full size of the image being loaded (still takes the same amount of time) and then downscaled by the browser (which usually actually looks worse than pre-downscaled images). He should pre-scale the image down into multiple lower resolutions and use image-set.
    – Dois
    Commented Mar 19, 2022 at 1:16
  • Thank you! I'm going to need to rerender it though. Is there a way to transfer a png to a jpeg?
    – Codeitfast
    Commented Mar 19, 2022 at 1:34
  • I think you can transfer a png to jpeg using backend api. Commented Mar 19, 2022 at 1:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.