Hello,
I made the image height and width to be “auto” and now it shows up properly on all devices with the image being compress. But, this leads to one issue - when I run the site through Google Page Speed or GTMetrix it tells me that the images should have a height and width associated with it so that the browser doesn’t need to do the calculation.
Is there a way if can leave the image dimension on the tablet and phone view to be auto but have the dimensions fixed for the desktop view?
If not then what’s the best way to give dimensions to the image but also have it render well in the tablet and phone view?
Hi, you can create the fixed width dimension on the Deskop view mode, then change to tablet view and update your CSS class for the image, and change the dimensions to auto. Then that will only affect tablet on down to mobile view.
At each viewport, you can test how things look. For example, you might want to give your images fixed dimensions at the tablet, mobile landscape or mobile portrait views, if that works better with your design, or leave those as auto.
You can setup different CSS styles for each viewport, and styles cascade to the next lower viewport, so you can make your changes at Tablet view, and those will be in effect down to mobile portrait view.
I hope this helps you and ask if you have any more questions. We also have our tutorials you can check out:
Thanks. But this doesn’t seem to work. I created an image class on the desktop view and gave it the dimensions. Then I switched to the Tablet view and changed the dimension of the image style to be auto.
When I switch back to the Desktop view I see that its changed backed to AUTO.
Ok I think it worked. I was earlier changing the dimensions under “Settings”. I did it under “Styles” and the Tablet view retains the value.
Why is there a width and height in Settings as well as Styles. This is confusing and others might have the same issue while trying to change a cascading style dimension.
The width and height inside the image settings are for the <img> tag. You don’t need a class to change the dimension there. But you do need a class to add width and height in the settings tab. One’s HTML and one’s CSS. It is a bit confusing, but it’s not always necessary to use CSS to add width and height to an image (keeps the code cleaner and the site more performant).