I do not know why I get the comment "insert-dimensional images ..."
When I check the site in terms of its load time
I got it and still I get this remark.
I'd love help how to do this right.
It is important to note the page was validated - WC3HTML 4.01 + WC3SCC.
http://www.class-a-studio.co.il/gallery.php
Boker tov! It means that GTmetrix suggests that you specify your images' or placeholders' dimensions (width/height) in the HTML or CSS so a viewer's browser can reserve their space in the layout and continue constructing the DOM, even if the images still need time to download. Or, you have specified dimensions but serve images which are too large so the viewer's browser has to scale them down. Both issues have an impact on a site's performance.
Related
I have a strategy in mind for lazy loading images on a CMS (Sitecore) website, and I'm wondering if I will run into problems with it, since I am not finding examples of it being done.
The point is to improve performance, but reduce the side effect where users can get annoyed by images that are incomplete as the page is scrolled.
The strategy is using loading="lazy" on all images on the page, or only images below the fold, and upon page load, dynamically swap lazy to auto on all of these elements, from which point the browser will decide when to load the images by its own prioritization scheme.
The point is to prioritize images above the fold, but once the prioritized images and everything else are loaded, then tell the browser to load images by its own default loading behavior, so the user will be less likely to encounter incomplete images.
Are there problems I may run into doing this?
I can't imagine I am the first person to try this, but I am not finding examples in my search. Is this strategy established and documented anywhere?
The strategy is using loading="lazy" on all images below the fold, and upon page load, dynamically swap lazy to auto on every image element, from which point the browser will decide when to load the images by it's own prioritization scheme.
You don't need that to do. The browser know better when he should load the image. Just stay with lazy.
Are there problems I may run into doing this?
Yes! When you don't define a width & height for the image. There are some webpages which use achnor navigation. When the browser don't know how much space the image will take, then can happend that you will get some incorrect position when navigating.
Also there are some sideeffects that will load the image later then expected. Inside a slider as an example. But the benefit to not load the image is much more enjoyable then not to lazy loading the image.
Read more about the specific use-cases in this wonderful blog article:
https://web.dev/browser-level-image-lazy-loading/
I am using yslow in which it tells don't scale images in HTML but the images are coming from database and I use them using bootstrap grids. Most of the images are show in popup on click.
The image width I set is in the css file in percentages like max-width:100% or width:100%;, but I don't know what to set to not scale the images in HTML.
I don't know how to resolve this issue. Please help me.
YSlow is telling you this because it is not a good practice to resize images in HTML, especially if the images become smaller, as this means you spend too much time downloading.
You don't need to take everything performance monitors like YSlow are telling you as an action item. The reports are only recommendations. As #Amin Gharavi said, if the images load fast enough for you, then it's probably okay.
The problem is if you are downloading images that are MUCH bigger than their apparent visual, which usually means much slower download in addition to lower visual quality in some browsers.
Google Chrome has a tab in it's built in Developer Tools, and one of the audits are telling me that the Network Utilization can be improved by setting the specific width and height to ALL images on the page.
How true is this information and how does this change things?
Setting height and width will do absolutely nothing for network utilisation.
It will, however, allow the browser to lay the page out correctly before downloading the images (since it won't have to wait to download the image before it can know what size the image is). This can avoid reflowing the page or leaving it blank until the image size is known.
It's so the browser can already prepare the correct space to put the image after loading it.
While not improving network speed so much, it can lead to better user experience for users with low internet speed because of the reasons Quentin suggested.
I just started using the chrome developer tools for some basic html websites and I used the audit tool.
I had two identical images, one with the height and width attribute, and one without. On the Resources section, both the latency and the download time were identical. However, the Audit showed
Specify image dimensions (1)
A width and height should be specified for all images in order to speed up page display.
Does this actually help? And are there any other ways to speed up page time?
This is only a splash page for the website I am building and as such it is only html, no css or javascript or anything. I have already compressed the images but I want to speed up load time even more. Is there a way?
Generally speaking: If you specify the image dimensions in the <img> tag, the browser will know how much space to allot for it and will proceed to render the rest of the page while simultaneously downloading the image. Otherwise, the browser will have to wait a few more milliseconds to get the size of the image from the image itself before rendering the rest of the page.
Since you have only a splash page, I doubt that there will be anything else for the browser to render, so it doesn't much matter whether you specify dimensions or not.
If I have a logo image, and I want to use it on another page where I require it to be a smaller size, it is my instinct to create a new image, resized with a graphics editor. However, I am hearing that it is better for the user if I instead refer to the original image and resize it with the browser by changing the height and width in the image tag.
So I ask the crowd, what is the best practice here?
Thank you for your time,
-- Henry
My default response would be "Resize it in a graphics application", but it depends on how you're using it.
When you leave image resizing to the browser, the original (full-size) image has to be downloaded before the browser can display it at a smaller scale. This means that you use more bandwidth and your webpage takes longer to load. However, if you mainly use the larger image throughout your site, then it will be faster to always use this image, since the browser can cache it.
If you're concerned about image quality, you would get better results and would have more control over the downsampling process using a dedicated graphics application to resize the image.
It's fine to resize images with CSS or the height and width tags. The only thing you want to be careful of is making really large images small because it obviously doesn't decrease the download size.
Doing this would work best when you're effectively caching your images so it doesn't get downloaded a second time. Then you will be getting a tangible benefit from doing so. I usually just append the last modified time of the image to the URL, eg:
<img src="/images/log.png?1233454568">
and then set the Expires header to a year from now. If the image changes, the mtime changes and it will force the browser to reload it.
That's suggested for images, Javascript and CSS files.
If the browser resizes the image for you by using height/width tag, you might end with a lesser quality image, really depends on the image type (like photo vs. simple graphics), so try it out in some common browsers. But resizing the image in a graphics editor is the only way to ensure a high-quality resize operation.
Create the smaller image in a graphics editor, for several reasons:
If users have not already cached the larger image, they will be downloading the larger file unnecessarily.
Resizing the image client-side results in some unpredictable scaling quality.
Doing it in HTML is ill-advised anyway, for presentational issues (such as element sizes) you should do it via CSS.