Submitted over 2 years ago

Loopstudios landing-page with CSS Grid

Osaro Iyoha•1,080

@osaaroh

Preview site View code

This is a solution for...Loopstudios landing page

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

WIth this challenge i learned how to change img source in css with content:url() like so:


.gallery {
        grid-template-columns: 1fr;

    }
    .gimg__deep-earth{
        content:url("../images/mobile/image-deep-earth.jpg");
    }

If there's another/better way, let me know.

Community feedback

Sahand Masoleh•1,210
@sahand-masolehPosted over 2 years ago
Hey there!

What you're doing right now is loading the desktop version of all images first, and then loading the mobile versions and replacing them with your media query. So if anyone opens your page on a mobile device, this will just waste bandwidth, storage, and performance. You check out the network tab of your devtools and see that all images are loaded.

The built-in way of avoiding this in HTML is using the srcset attribute with either the picture tag or the img tag with media queries directly in your HTML. That way the browser can decide which image to load.

In short, don't update images hard-coded in your HTML with CSS, choose where you want to define your images (HTML or CSS), put all versions there, and use the provided methods to choose the appropriate version.
Marked as helpful
2
Osaro Iyoha•1,080
@osaarohPosted over 2 years ago
@sahand-masoleh thanks for this. Will use the srcset attribute going forward
1

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord