Mobile First: Appear image only on the desktop

Question

Mobile First: Appear image only on the desktop

Navigation

#1 by (3 votes)

4

What is the best way to make an image appear only on the desktop ? Usually I add media query to put display: none when opening in mobile . But this image is processed by the cell phone, it just is not displayed.

What is the best way to do this without having this performance loss?

css mobile

asked by anonymous 24.11.2017 / 14:35

1 answer

Difference between select a. or b [closed] How to convert an object vector to another object?

score 3 · Answer 1

You can do this using srcset . It will only call the image that is set to screen resolution.

Here is a practical example. And below are the Developer Tools screenshots. link

Hereyoucanreadmoreaboutthistechnique. link

Example code shown above.

OBS: Run the snipper first and it will load the 800px image, then go to "All Page" to see loading a larger image!

body {
  margin: 1rem;
  background-color: #333;
}
img {
  display: block;
  width: 100%;
}
figure {
  max-width: 40rem;
  margin: 1rem auto;
  padding: 0.5em;
  background-color: LightCoral;
}

<figure>
  <picture>
    <source media="(min-width: 2000px)" srcset="https://scriptura.github.io/Images/LotusTest.jpg, https://scriptura.github.io/Images/LotusTest.jpg 2x" sizes="100vw"/>
    <source media="(min-width: 1500px)" srcset="https://scriptura.github.io/Images/LotusTest2000.jpg, https://scriptura.github.io/Images/LotusTest.jpg 2x" sizes="100vw"/>
    <source media="(min-width: 1000px)" srcset="https://scriptura.github.io/Images/LotusTest1500.jpg, https://scriptura.github.io/Images/LotusTest2000.jpg 2x" sizes="100vw"/>
    <source media="(min-width: 800px)" srcset="https://scriptura.github.io/Images/LotusTest1000.jpg, https://scriptura.github.io/Images/LotusTest2000.jpg 2x" sizes="100vw"/>
    <source media="(min-width: 600px)" srcset="https://scriptura.github.io/Images/LotusTest800.jpg, https://scriptura.github.io/Images/LotusTest1500.jpg 2x" sizes="100vw"/>
    <source media="(min-width: 400px)" srcset="https://scriptura.github.io/Images/LotusTest600.jpg, https://scriptura.github.io/Images/LotusTest1000.jpg 2x" sizes="100vw"/>
    <source media="(min-width: 300px)" srcset="https://scriptura.github.io/Images/LotusTest400.jpg, https://scriptura.github.io/Images/LotusTest800.jpg 2x" sizes="100vw"/>
    <source srcset="https://scriptura.github.io/Images/LotusTest300.jpg" sizes="100vw"/><img src="https://scriptura.github.io/Images/LotusTest.jpg"alt="Lotus"/>
  </picture>
</figure>