I want to set a responsive image in my webpage using tailwind css. I have provided sufficient classes to make it work on different screen sizes. Now I am getting the following error in page-speed.
How can I eliminate the warning?
Try to use Tailwind aspect ratio.
It work fine
You can eliminate this warning by adding width and height to your images like this:
<img loading="lazy" src="assets/image/brainstorm/svg" alt="brainstorm" width="400" height="200" class="w-5/6 mx-auto" />
Basically adding width and height directly to html img tag prevents layout shifts, even if img is not loaded yet. It's especially important when img is lazy-loaded. More info here
Just adding height and width attributes and classes won't work, you have to crop the images as well to its exact dimension. For example if you have set 100px height and width, the image height and width should also be 100px.
Background
This warning exists to prevent layout shift when images load. Currently, the images have the classes w-5/6 mx-auto. This is enough to make the images responsive, but before the images are loaded, the browser doesn't know how tall the image is. Hence, when the image loads, there will be layout shift.
You then need to tell the browser how wide and tall the image should be before it loads. There a few ways of doing this.
With known dimensions
If you know the height of the image, I'd recommend following fromaline's answer.
<img src='assets/image/brainstorm.svg' alt='nature' class='w-5/6 mx-auto border' width='300' height='300' />
Because we've defined the display width with w-5/6, the image will be responsive. The width='300' and height='300' properties are then used for the aspect ratio.
Here's a link from the Tailwind playground to show you how it's both responsive and removes layout shift: https://play.tailwindcss.com/rjz9ylFNl5?size=482x720
With unknown dimensions
If you don't know the width and height of your images and you need them to be responsive, you need to essentially create a container with a fixed aspect ratio. I'd recommend looking at the aspect ratio plugin.
<div class='w-5/6 aspect-w-16 aspect-h-9 mx-auto'>
<img src='assets/image/brainstorm.svg' alt='nature' class='object-cover w-full h-full' />
</div>
Again, a link to a Tailwind Playground demo: https://play.tailwindcss.com/2zmPJixbrO?size=584x720
Related
So, I have a container div and an Image component in it. I want the image height be equal to the 100% of container height, and the width of container to be automatically decided based on the width of image according to its aspect ratio. When I use a normal img tag, this works without a problem, but in case of Next Image component, the image is left with a width of 0px. Because it wants me to define a fixed width for the container. ? How can I achieve what I want ?
What I'm doing is this:
for the div:
div {
height: 50px;
width: auto;
}
for the Image component:
<Image src="..." alt="..." layout="fill" />
As far as i know, Image in next js has one good great advantage, a lazyload preserving the space the image will use once is loaded without destroying the layout.
Now, that would be impossible if we dont pass the size of the image in advance.
Idk the limits of that. So, i am betting on this reason.
And thats the reason why i use a lot of img, instead of Image. But if you know the exact size... better use Image.
PS. Google developers participated on the feature development i just describe.
I think the most straight forward way is to just define the width of the div in ems or rems and define the same for the image as well so that it is the exact length and the parent element has a ratio with the image and the div itself.
Have a great Day :)
I am trying to fit images in div. However, the 3rd Image is quite big in height and appears to be big as compared to other Images.
I have tried giving height and width to the 3rd Image but the results are not best looking. Is there any solution to fit the image and make it responsive in same way as other two do?
Here is my Code:
Since you are using Bootstrap 3, you need to add:
.img-responsive
class to your image...
Something like this:
<img class="img-responsive" src="your image">
.img-responsive (Bootstrap 3) is equivalent to .img-fluid in Bootstrap 4.
It will give max-width of 100% to your image, and it will set height to auto - exactly what you want with your image.
I have a div with 1184x308px and inside I have dynamics images logo (vertical and horizontal). How can I do to the image fill the div without stretch?
If your image is not big enough to fill the space as it seems you want then you cannot just simply have css styles with width: 100% height: auto; without stretching it. One option you could use to serve the right image at the right screen size is using srcset but it is not too well supported and you will probably want to use picturefill
To use srcset on it's own you would use this:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="dynamics">
It can be a bit tricky but a quick google on srcset should help you out or this is good info on it.
I use Unveil.js to lazy load images. To save time/space, I use a base64 placeholder image:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://unsplash.it/1000/500?image=631" width="1000" height="500" data-unveil="true" />
The problem I'm experiencing is how the placeholder image gets resized. It seems to always maintain an aspect ratio of 1 which is a problem for responsive sites.
So if the image tag above is inside of a <div> with width 50% and the <div>'s calculated width is 500px (total viewport width is 1000px) then the image will overflow the <div> unless I use max-width: 100%; height: auto; and then a non-data URI image will correctly scale and maintain its aspect ratio.
However, the data URI image always remains square, regardless of width/height attributes in the <img> tag or CSS rules. This causes some jumping around on slower servers because the image that gets lazy loaded by Unveil.js is not always square.
I setup a quick fiddle to demonstrate the sizing differences (without Unveil.js): http://jsfiddle.net/silb3r/7bnfqkko/1/
And one with Unveil.js: http://jsfiddle.net/silb3r/2eff5thm/ (you may need to manually throttle your connection to see the issue)
Is anyone familiar with a way to ensure that the data URI maintains the aspect ratio of the original image? Preferably without adding more jQuery, but I am open to anything.
Thank you for any suggestions.
Well, your CSS overwrites the width and height set via HTML attributes, and so the intrinsic image dimensions come into play, and those are 1×1 pixels. And therefor setting height:auto naturally results in a square image, no matter what.
If you know the aspect ratio for your images beforehand (and you seem to do, assuming those width and height HTML attribute values you used are not completely arbitrary – otherwise, a few lines of server-side code could read them from the image files, if it needs to be more dynamic), then you can use what’s called the “padding-top hack” to create a placeholder that will use the correct aspect ratio.
i have several svg's included in and image tag on my homepage.
My svg's are resized to the parent div container, which is 30em's wide.
My problem now is that i have svg's are not of the same width and all of them are scaled to a width of 30em.
See this example:
jsfiddle.net/xpgz44oL/
The displayed font-size should be the same for every svg.
How can i achieve this?
Assuming the original drawings were done at the same scale, you could look at the viewBox widths and set each image to that width (or a multiple of that width if you want them bigger).
<div>
<img src="http://www.austrokamin.at/media/dw/zeichnungen/laengenelement-1000mm-dw-zeichnung.svg" width="158.95px"/>
<img src="http://www.austrokamin.at/media/dw/zeichnungen/dachdurchfuehrung-20-35-grad-dw-zeichnung.svg" width="239.19"/>
</div>