Responsive and dynamic background image is best practice
For a long time, when I had to create a website with many different pages (and with each page having a hero section with a different background image), I did this:
<div class="hero" style="background-image: url(my-dynamic-img.jpg)"></div>
And the following css:
.hero {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
The image will be loaded dynamically for each page. For example, in a CMS, a client could change images on their own without changing the css
But now I understand that this is not good, because you end up downloading the same image to every device (mobile, tablet, desktop ...).
So I would like to give your opinion on how to do this: having 3 different images (hero-mobile.jpg, hero-tablet.jpg, and hero-desktop.jpg) for the same background and a good one automatically. The declaration of the three images must be in HTML, not in css (so the client can change it at any time)
source to share
Have you discovered the attribute srcset
? What it does srcset
is it allows you to add more than one image to a tag <img>
and set certain conditions on it. Depending on which condition is met, the corresponding image will be shown. Time for an example
If you wanted the image to be viewed at half the width of the users viewport, you would use
<img src="images/space-needle.jpg" sizes="50vw"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">
What it does is how it determines how big the width of the users viewport is, say the width of 500px, so your image images/space-needle.jpg 200w
will load for the user.
In this example, we specified that the image should be half the width of the screens sizes="50vw"
. It would not be possible to show a 600px or 400px wide image on a 500px wide widescreen and it is convenient to only display it in half of the viewport, so it picks the option 200w
.
There are many ways to specify conditions for image loading, device pixel ratio, screen size, browser size, etc.
Evolutionary links:
https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
https://www.udacity.com/course/responsive-images--ud882
source to share
Well, there are several ways to do this, but in your case, since you want the client to modify the HTML, you should use @media
in your css:
eg
Then in CSS you should have a media query for each
@media (min-width: 430px) {
.tablet {
display:block !important;
}
.mobile {
display: none !important;
}
.desktop{
display: none !important;
}
}
@media (max-width: 600px) {
.mobile {
display:block !important;
}
.tablet {
display: none !important;
}
.desktop{
display: none !important;
}
}
@media (min-width: 900px) {
.tablet {
display: none !important;
}
.mobile {
display: none !important;
}
.desktop{
display:block !important;
}
}
Example: https://plnkr.co/edit/Cet7wG4qrK9DcG1vlOVg?p=preview
source to share
we will use a media screen to display images on screens of mobile, laptop and desktop computers
.hero img{
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width:100%;
}
@media screen and (max-width: 500px){
.hero img{
display: block !important;
}
}
@media screen and (min-width: 501px) and (max-width:880px){
.hero1 img{
display: block !important;
}
}
@media screen and (min-width: 881px){
.hero2 img{
display: block !important;
}
}
<div class="hero" >
<img src="https://cdn.pixabay.com/photo/2013/06/09/18/50/tulip-123795_960_720.jpg" alt="" style="display: none">
</div>
<div class="hero1">
<img src="https://cdn.pixabay.com/photo/2012/03/03/23/13/tulips-21598_960_720.jpg" alt="" style="display: none">
</div>
<div class="hero2">
<img src="https://cdn.pixabay.com/photo/2016/10/07/14/01/tangerines-1721620_960_720.jpg" alt="" style="display: none">
</div>
source to share