CODEWITHSUNDEEP
cssimagesizeresponsive
Mike -- No longer here
Mike -- No longer here

Reputation: 2092

Making responsive image in responsive box without causing visible content issue in pagespeed

My basic objective is to have a black box with an image (prepared by javascript) loaded inside it. I want both the image and the box to be responsive (scale properly in all resolutions), but I want the largest width of the image to be a certain size. So far here is my code:

<html>
<head>
    <style>
        #mybox{
            background: #000;
            padding: 10px;
        }
        #picturesettings{
            max-width: 365px;
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="mybox">
        <div id="mypicture">
        </div>
    </div>
    <script>
        var mypicture=document.getElementById('mypicture');
        var newpicture=document.createElement('IMG');
        newpicture.id="picturesettings";
        newpicture.alt="new picture";
        newpicture.src="/path/to/image.jpg";
        mypicture.appendChild(newpicture);
    </script>
</body>
</html>

My objective is successful except that the picture loads after everything else loads which will trigger a "prioritize visible content" issue in google's page speed insights because the outer box will need to be resized once the picture is loaded.

Is there a way where the picture can load so that the initial sizing of the outer box only needs to be done once instead of twice?

See this URL if you want to see the "prioritize visible content issue" in it.

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fnew.clubcatcher.com%2Fm%2Fpictures%2Fstudio-entertainment-theatre%2F2016may06%2F1

It is my website in which the box is sized depending on the size of the image.

I feel my only solution is to make the black box height the maximum height so that the photo will nicely fit inside regardless of its size, but the problem with that implementation is that users on devices with very small screen widths will see the picture at a decent size, but they will see a bunch of black space that they must scroll through to get to the text which is also what I don't want.

Is there any way I can fix this?

Upvotes: 1

Views: 94

Answers (1)

Claudiu D.
Claudiu D.

Reputation: 486

why not giving a height to the DIV and put the image as BG like that there will be no white space under it, i would imagine something like the #mybox with a border: 10px solid #000; and then have the image as background to #mybox and give it a background-size: cover; also u can modify the height of the box with media queries for other screen sizes if it does not look good.

Upvotes: 1

Related Questions