Why is my image small on mobile?

Hi, I have a div with an image that shows on mobile but not on large screens. Even though I’m not displaying the image on large screens, the image still loads, which I understand. To help mitigate the load time for that image on large screens, I deferred the image loading which works perfectly.

Here is the HTML:

<img class="samplepic2" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Sample" data-src="http://www.modovis.com/wp-content/uploads/2016/01/CHAIR1-1.jpg" />

Here is the result on mobile which looks perfect:

I now want to reduce the image load time on large screens even further by not only deferring the image load, but only loading a data image in its place on large screens 1x pixel ratio and leaving the full image on mobile 2x pixel ratio. Below is my HTML for which I attempted and then the result.


<img class="samplepic2" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" srcset="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs 1x, data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs 2x" alt="Discovery" width="110" height="110" data-srcset="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= 1x, http://www.modovis.com/wp-content/uploads/2016/01/CHAIR1-1.jpg 2x" data-src="http://www.modovis.com/wp-content/uploads/2016/01/CHAIR1-1.jpg" />


Why is the image small? Thank you for any insight.

My Page.

It’s small because you are adding 20% of padding to it thus reducing its available width by 20%.

@media (max-width: 800px) and (orientation: portrait){
.samplepic2 {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;

If you remove the padding the image will stretch back to the 110px width that you specify.

If you want space outside the image then use margins not padding.

Hi Paul,

But that padding you reference was there before and worked fine. Its the same image. The only change I have made was to have a data image show in its place on large screens.

Are you sure?

It looks to me as though you are now specifying the size at width:110px in the img tag whereas in your original rule you have no width in the html.

Obvioulsy I can’t tell what you had before but if you remove the padding and the width then that small mobile image will stretch to fit.

Like this screenshot after I have done same in devtools:


Paul, you are absolutely correct, I completely overlooked that. I removed the height and width and now its working perfectly. Thank you so much for taking the time :grin:


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.