Can anyone please let me know how to handle the images sizes(width and height) in all the ways such as potrait and landscape views for laptops, pc's, ipad and mobile screens. but without using the media queries.
One time I use to get larger images and some time I am getting smaller images, but I want to show all the images of same size using only normal css without using any media queries.
Please do the needful.
Usually it is preferred that the image resolution should be responsive for responsive layouts... it means that image size should be width:100% and height:auto in css and same for html, image will arrange on any of the screens....
Remember to add this line on the head tag above on your page:-
<meta name="viewport" content="width=device-width, initial-scale=1">
You can use a max-width style property as 100%, on bigger resolutions your image will contain it's normal size and on smaller windows like on mobile phones the image will become the width of your screen (container). The image will scale proportionally.
<img src="sample.jpg" style="max-width:100%;" />
<img src="img1.jpg" width="100%" height="100%" />
<img src="img2.jpg" width="100%" height="100%" />
...
you can set height and width in css itself
for eg if are using a div id as sample_div_img then use the following code
#sample_div_img img{
height:100px;
width:100px
}
in php / html
<div id='sample_div_img>
<img src='sample.jpg'>
</div>
one thing if image size is different from the mentioned in css, image may be looks blurring
Let me know any issues in this
Related
I was checking Core Vitals on PageSpeed insight and noticed its flagging Image elements do not have explicit width and height and suggesting Set an explicit width and height on image elements to reduce layout shifts and improve CLS.
I am not sure what it exactly means and what i can do properly to resolve this issue, specific to my case
<img src="someimage.jpg" width="100%" height="100%" alt="something" class="img-responsive">
My page is responsive and i am using bootstrap v3.x for this webpage as its is old page. since page is responsive and i am using class="img-responsive" which automatically resizes image with, but this impacts core vital such as CLS.
Since layout is responsive what is the best approach to define use image to avoid CLS issue.
I have noticed most of the CLS reported by Page Speed Insigh is for owl Carousal
Below is the copy of code which generate CLS issue for images
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12 lc-hp-col">
<div class="owl-carousel owl-theme" data-items="1" data-items-desktop="1" data-items-tablet="[991,1]" data-items-mobile="[767,1]" data-pagination-speed="200" data-auto-play="true" data-stop-on-hover="true">
<div class="item">
<img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+1">
</div>
<div class="item">
<img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+2">
</div>
<div class="item">
<img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+3">
</div>
<div class="item">
<img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+4">
</div>
<div class="item">
<img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+5">
</div>
</div>
</div>
</div>
</div>
CodePen link
Some article have suggested to use scrset for responsive images but this is not practical as we have to then upload multiple versions of same image.
<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons"
/>
NOTE: The sizes of your images are fix as of Bootstrap mechanic!
If you have a nearer look to your page your images are responsive but not fluent. That means the size does change in predfined steps when the vieport changes the width. Inbetween this steps the sizes for the images are allways the same even if the sizes are set in percentage. That's the mechanic of Bootstrap.
So, - your are able to set fixed values to the sizes of your images without changing the layout!!!
You will find the original steps Bootstrap uses (if not changed for the project) here:
https://getbootstrap.com/docs/3.4/css/#grid-media-queries
As you see Bootstrap standard is: if viewport width becomes more than 769px the size changes, same as on 992px and on 1200px.
Taken from the codepen example the sizes of your images are:
// Up from Vieport width:
768px = Image: 720x426px
992px = Image: 940x557px
1200px = Image: 992x588px
(Note: below viewport widht 768pxcodepen does not work. Have a look for the size(s) on original page.)
Knowing that you are able to advice fixed sizes to the images by media queries. You may do this using sass with the original tools of Bootstrap (see link above). Or do something like this:
/* below 768px take values from original page */
#media (min-width: 768px {
.owl-carousel img {
width: 720px !important;
height: 426px !important;
}
#media (min-width: 992px {
.owl-carousel img {
width: 940px !important;
height: 552px !important;
}
#media (min-width: 1200px {
.owl-carousel img {
width: 992px !important;
height: 588px !important;
}
NOTE: I am not quite sure if that css overwrites the Bootstrap markup. So maybe you have to give it an higher specificity i.e. by using div.owl-carousel div imgor something similar. And if height is not correct please readout all sizes from original page. Sometimes you will need to be more exact i.e. with height: 588.xxxx px.
Answer
The width and height we are talking about, are intended to be a fixed number to avoid the warning.
That's needed to reserve the (explicit) required space for the image while it's loading. If you give it a percentage, the browser cannot know the size it will need, so it will be changing, and cause the page layout to shift (that's what we try to avoid).
Edit
I'm not sure about what you mean with "it becomes even harder". No one said it's easy, as you have a complex problem.
You are trying to:
Serve a responsive carousel.
A carousel with responsive images.
Avoid warnings from Web Vitals about Layout Shifts.
Complex solutions for complex problems, that's what it is.
There is no real solution to this issue other than the srcset solution that you mentioned. The layout shift issue will likely be flagged unless you specify image dimensions.
I agree that the integration of multiple image sizes is difficult & cumbersome & perhaps not always justified. Even if you integrate the multiple sizes of images you can still have a layout shift if the images are set to scale responsively to ANY size rather than just a set of options.
The CLS is less likely to be flagged by Google (or to bother any users) if your images begin to load very quickly so that the image sizes are known before the layout has a chance to fully render (& thus shift). Defer anything you can to bring the images towards the front of the line.
This may be questionable but I implemented a tiny generated png to get the image data loaded very quickly like this:
<img class="img_scale"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="/img/img.jpg"
/>
You may also be able to use csscalc to estimate the percentage, pixel value or em value of a container for the image in order to greatly reduce the amount of shift. You probably can't eliminate it without using static sizes but you can cut it way down.
You can work around this problem by
Setting explicit <img width height> - for height value use your best guess what the most image heights will be
Later override the HTML element height attribute with the following CSS:
.my-img {
height: auto;
}
However note that this causes cumulative layout shift, CLS, event after the image is loaded, so you are essentially shifting the problem around. The CLS issue can be worked around by making sure the container element hosting the image has min-height set.
Here is the full source code for an example Svelte component where I worked around this problem.
When you use img src tag so you need to add width and height whatever actual image width and height attribute with img tag for an Example like this:
So it is not Create CLI in google page insights.
I am struggling to understand the srcset and sizes attributes in the <img> tag.
First of all, why is my code not working?
<img src="orange.jpg" alt="orange" srcset="coffee.jpg 600w, mycat.jpg 800w" sizes="(max-width:500px) 600px, 800px">
When i run this code, the mycat.jpg image loads regardless of how much i shrink the browser. Why?
I thought this code is supposed to mean that, if the viewport is up to 500px, then the 600px image should load, which is the coffee image, and if there isn't one, then the 800px image should load, which is the mycat image. So why is the mycat image loading regardless of the viewport?
Also, if the browser chooses which srcset image to load depending on the proximity of the sizes, then in what case does the src image (orange) loads?
Also, what happens if i add a wrong number for the resolution size of each srcset image? In my example, I've described coffee image as 600w and mycat image as 800w. What if these numbers are wrong?
Another thing I struggle to understand is, why is the sizes attribute being used here for adding a media condition? Isn't that what the media attribute is for?
The explanation given in mozilla.developers.org and other websites is atrocious. Please do not copy-paste any external sources purporting to explain this. They do not. I've seen them all.
Your code is not working because your code is incorrect because if you wanna put srcset attribute then you have to put it inside source tag which should be inside picture tag tag. Try writing the code attached below.
<!DOCTYPE html>
<html>
<head>
<title>srecset attribute</title>
</head>
<body>
<picture>
<source media="(min-width:800px)" srcset="mycat.jpg">
<source media="(min-width:600px)" srcset="coffee.jpg">
<img src="orange.jpg" alt="orange" style="width:auto;">
</picture>
</body>
</html>
In the above code if the screen resolution/size is more than 800px then mycat.jpg will be displayed.
If screen resolution/size is between 600px to 800px then coffee.jpg will be displayed.
And If screen resolution/size is less than 600px then orange.jpg will be displayed.
And if this doesn't work comment your issue, I will try my best to help you.
you have to put the image and sources inside a picture tag.
<picture>
<source srcset="coffee.jpg 600w" sizes="(max-width:500px)">
<source srcset="mycat.jpg 800w" sizes="(max-width:600px)">
<img src="orange.jpg" alt="orange">
</picture>
When browsers evaluate srcset, they take more than the sizes attribute into account. While I'm not sure the full list of things they consider, I know they also consider screen pixel density.
In your example, if the browser detects a 2x or higher pixel density, it would attempt to load a 1200px image to fulfill the 600px size. Since no such size exists, it uses the largest image available: mycat.jpg.
I have the "serve scaled image" issue when I test my website with http://gtmetrix.com/
For example, my image size is 2000x3000 and the recommendation is 104x104px (I set the width and height of img to 104x104px in my css). I tried to resize all my icon images to 104x104. However, those images look blurry? I thought it should not be blurry because the size is correct.
My question is how do I know the size to scale the image when
1. img has fix size (I set the width and height of img to 104x104px in my css) => blurry issue
2. responsive image
I use Wordpress, any free plugin that solves the issue. I used optimole but it makes my images blurry!
Thanks,
Use css properties such as
object-fit: cover
for image tag and
background-size: cover /* it can be contain too, depending on the situation */
for backgrounded images
Use "picture" HTML tag for different window widths:
<picture>
<source srcset="/img/blog/responsive-images-lg.png 730w">
<source srcset="/img/blog/responsive-images-md.png 610w">
<source srcset="/img/blog/responsive-images-sm.png 350w">
<img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>
I'm trying to optimize my images for SEO.
Page Speed currently only detects image dimensions that are specified
via the image attributes.
According to above line i should use width and height attribute in image tag for improving the page speed. But I have to responsive the site also, for example i have an image with following width and height.
Screen Size 960 pixel
<img src="" width="250" height="250" />
Then how i will adjust the image size on small screens?
Screen Size 480 pixel
<img src="" width="250" height="250" />
if i add an id or class for adjusting the size on the small screen the it will be correct way or not?
.reduceSize{
width:150px;
height:150px;
}
Please guide me i'm wrong or any other suggestion. Also in image tag width and height attribute are necessary for site speed ?
Changing Image dimension through html code wont reduce the image size and wont improve the speed of loading. If you want to load different image size for different screen resolution, you have to use ajax load different images(based on screen size) or other 3rd party image handlers as well as aspJpeg (for windows server) or WideImage (for linux) or find more by searching php image manipulation to resize images dynamically.
You probably will need extra coding to determine the screen size before loading proper images.
May be you can add two different <img> tags. One for mobile device and one for larger screen.
<img class="hide-in-mobile" src="" width="250" height="250" />
In css media queries for mobile devices add
.hide-in-mobile
{
display:none;
}
and
<img class="show-in-mobile" src="" width="150" height="150" />
in media queries for large screen
.show-in-mobile
{
display:none;
}
Width and Height attributes are important for site speed. You can set natural width/height of image then control you img size with CSS in Media. as you told in your question.
<img class="reduceSize" src="" width="250" height="250" />
#media all and (max-width:960px ) {
.reduceSize{
width:350px;
height:350px;
}
}
#media all and (max-width:480px ) {
.reduceSize{
width:150px;
height:150px;
}
}
I have been searching around for this subject but I keep finding those really really long articles and I'm not even sure if they are relevant for my issue so I'm asking here :)
I'm creating a mobile website and there is something weird with the images:
lets say my image is 200x100 pixels, and I'm using the following code:
<img src="img/my_img.png" width="200" height="100" />
or:
#myImg {
width: 200px;
height: 100px;
background: url(img/my_img.png);
}
when I open my website on desktop it will look fine, but when I check it on my mobile the image has really bad quality, seems like its stretching it.
i don't know if it has anything to do with my html code, but maybe its my viewport?
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
Is the device you're using a retina device? If so, you will need to create a retina image(400px/200px) and then set the width/height to 200px/100px in the CSS.
I have just answered another question similar to this, in regards to the images I have been having the exact same problem.
I am pleased to say I have now managed to find a solution that works perfectly
Firstly when creating the images make them (if possible) 4x bigger than you need them. So that they are super high res.
Then when you are adding the image into your HTML, define the height and width of what you want the image to actually be.
For example if you wanted an image to view 100px x 100px create the image at 400px x 400px. Then define the image height and width within the img tag.
The image will keep the resolution and the DPI but literally just be smaller.
Yeay! We have an image that renders perfectly on all devices!
I hope this helps my friend!
Also watch out if you're using WordPress sometimes it automatically resizes images for you and renders those instead,