0

Hi I have a background on my site but it is a 8k image and that takes forever to load when I am on slow Wi-Fi. Also, if I am on my phone it does not have a 8k screen so that does not matter. So is there a method that it does not load the full resolution when I am on a smaller display?

  • 2
    This will help you https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images probably a good idea not loading a 8k image even on desktop – Huangism Mar 09 '20 at 19:49
  • You could load a different image file using secset – richard nelson Mar 09 '20 at 19:54
  • Some good info here also: [Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) – Chris L Mar 09 '20 at 20:16

1 Answers1

1

For background images, store different resolutions for each screen size, and use css media queries to set the background url based on the screen width:

.element {
    background: url("...bg_large.jpg");
}

@media screen and (max-width: 768px) {
    .element {
        background: url("...bg_small.jpg");
    }
}
PJohnson
  • 180
  • 1
  • 7