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;
}
}
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.
Is it possible to prevent upscaling when using scrset?
Here's a jsbin showing what I'm talking about:
https://jsbin.com/bukupuq
The browsers (Firefox, Chrome, Safari) are using the largest image to fill the container, even though its width (500px) is smaller. I would expect that it would intelligently use the best image given the viewport width, but not upscale the image.
Is there a way to prevent this without having to write an inline style="max-width:500px"?
It looks like images with srcset will always upscale, even if supplied with a low-res image. It's hard to search for documentation on this because all of the examples people use assume that you already have high-res images on hand. In my case, I'm building a 'responsive image' React component that is handling images supplied by a user from a CMS. Not all of their images are high-res, though.
My solution involves a little CSS balancing of width and max-width, both on the image itself and its wrapping <figure> tag. (This of course could be a div or anything else)
CSS:
img {
max-width: 100%;
}
figure {
width: 100%;
}
HTML:
This is generated according to how many sizes of an image are available. On the CMS side, I am creating thumbnails at 2400px, 1600px, 1200px, 800px, and 400px wide, but only if the source image is larger than that. The <figure> tag then gets all of the resized images, as well as the original one. Then, to prevent the image from scaling up, the figure tag gets a max-width of the largest image available.
So, if the source image is only 500px wide:
<figure class="" style="max-width: 500px;">
<img src="http://example.com/images/img_7804a_web.jpg"
srcset="http://example.com/images/img_7804a_web-400x600.jpg 400w,
http://example.com/images/img_7804a_web.jpg 500w"
sizes="100vw"
alt="alt text">
</figure>
If the source image is 1125px wide, it gets a few more sources:
<figure class="" style="max-width: 1125px;">
<img src="http://stephanie.standard-quality.biz/content/projects/18-2016/3-cargo-cults/cargocults_basketwoman_web.jpg"
srcset="http://stephanie.standard-quality.biz/thumbs/projects/2016/cargo-cults/cargocults_basketwoman_web-400x533.jpg 400w,
http://stephanie.standard-quality.biz/thumbs/projects/2016/cargo-cults/cargocults_basketwoman_web-800x1067.jpg 800w,
http://stephanie.standard-quality.biz/content/projects/18-2016/3-cargo-cults/cargocults_basketwoman_web.jpg 1125w"
sizes="100vw"
alt="alt text">
</figure>
Here's how it ends up looking: in this instance, the third image wasn't high-res enough to span the whole column:
I'm trying to make a couple of images resize together (as a block) when the window is resized by the user (or simply to adapt to different screen sizes).
All images are in a table, row1/column1= map plus river images. row1/column2= description of the rivers which can be viewed by clicking on each river on the map.
1)Main Image is a map and its on Z-Index:-1 Position:absolute;
2)Following images are rivers positioned absolutely on top of the map. These images have a mouseover behavior to swap image with it self but another color, plus onclick that makes text on the table cell on the next column to move to specific anchor.
Like this theres interactivity with the user and map/rivers.
The thing is when the screen is smaller the map image resizes accordingly but the river images stay put and all gets messed up.
Below a bit of the html code refering the map image and one river image (all other simply repeat)
"HTML"
<div class="container-fluid" id="page-bg">
<table width="100%" border="0" cellpadding="1" cellspacing="1" id="interactive">
<tbody>
<tr>
<td width="100%">
<img src="../images/backgrounds/01_FFAlgarve_Background.png" width="100%" height="1050" alt="" id="intmap">
<a href="#a3" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('funcho','','../images/buttons/funcho1.png',1)">
<img src="../images/buttons/funcho.png" alt="" width="100%" height="auto" id="funcho" title="Funcho Dam">
"CSS"
//table
#interactive{
position:relative;
z-index:-1;
}
//map image
#intmap{
position:absolute;
z-index:-1;
top:0px;
left:0px;
max-width:1750px;
}
//river image
#funcho{
position:absolute;
z-index:2;
top:510px;
left:650px;
max-width:222px;
max-height:132px;
}
Thanks a lot in advance for all the help I may get ;)
Kind Regards
MSV
Well, you're using a fixed value for your rivers, left:650px; is still 650px from the left, even if the map is only 300px wide.
Try using percentages instead.
//edit
So your map is 1050px high, originally your river is 510 from the top, so 100(510/1050) = 48.57
#river {
top:48.57%;
}
Try using media queries
resize window to see where your layout breaks and use media queries to modify css for the desired window size
in your css file put this
#media only screen and (max-width: 370px)
{
//Desired css goes here
}
The css put in the above example will work for a window size >= 370 px
You can have as many queries as you want with different max or min widths
Only put the rules that you are changing for the id or the class.Any other rules will stay the same as defined outside media query
And yes percentages will help you a lot but can cause extra problems experiment with media queries and percentagies
I have 2 images: one desktop version, one mobile version.
I would like the desktop image to be replaced by the mobile image when the viewport width resizes below 480px, just as would with the following CSS with background-image property :
.logo { background-image: url(http://placehold.it/400x200&text=desktop); }
media screen and (max-width: 480px) {
.logo { background-image: url(http://placehold.it/300x150&text=mobile); }
}
I thought I could achieve this with the srcset HTML attribute :
<img src="http://placehold.it/400x200&text=desktop" alt="" srcset="http://placehold.it/300x150&text=mobile 480w">
But it does not work, the browser shows the mobile image all the time and rescales it on viewport resize, but I wish the 2 images remains in their respective original size.
Is it possible to achieve this behavior with srcset?
It sounds like you want to do "art direction", i.e. the images are different more than just the smaller being scaled down version of the bigger image. If so, you need to use the picture element.
<picture>
<source srcset="http://placehold.it/300x150&text=mobile"
media="(max-width: 480px)">
<img src="http://placehold.it/400x200&text=desktop" alt="...">
</picture>
However, if your small image is actually a scaled-down version of the bigger image, then you can use srcset, but then you have no control over which image gets chosen. It's up to the browser to pick the best one based on screen density, network conditions, user preference, browser cache, etc.
<img src="http://placehold.it/400x200&text=desktop"
srcset="http://placehold.it/400x200&text=desktop 400w,
http://placehold.it/300x150&text=mobile 300w"
sizes="(max-width: 480px) 300px, 400px">
Note: If srcset is used and the larger image candidate is in cache, Chrome will always display this cached image candidate - no matter of the actual viewport size.
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