What ways are there to prioritize an <img> to load as soon as possible, with highest priority.
I am using the image in the middle of a quite large html document and im trying to get it loaded asap and also prevent layout shifting.
i have added the attribute and value loading="eager"
i have compressed the image as much as possible
i have added fetchpriority="high"
i have set the height and width
brotli enabled on server
Would i be able to load it first in the <head> tag some how? i know it will not be used there obviously, but it is higher up in the code? would it be downloaded and parsed before say, all external css, js and font files?
would loading it somehow via javascript be quicker?
is any of the ways above wrong? any other tricks?
Related
I just noticed that in chrome, if there are external resources to load like the background-image attribute, it delays the loading of the entire rest of the style sheet. Its really rather annoying since it causes the page to flicker even when loading just 4kB worth of images from localhost.
I could possibly work around it on any other page by placing image references at the end of my css but this particular page is too dependent on textures, it still looks bad.
This doesn't happen to images included directly in the loaded HTML like < img > tag or background images with inline CSS. Since I'm on asp.net, I could have the css inlined into the response but this would come at the cost of bandwidth.
Is there any other way to get around this?
When developing a website I often use background images for banners. When this website is in a CMS, the images paths come from the database (user uploaded). So I ended up using a style="background-image:url(myImageFromDB.jpg)"
However, this becomes an issue when I want to replace this image with smaller versions of the same image.
A lot of tutorials/guides out there, assume that you already know the path to this image, so you can just use #media queries to easily replace them. But if the path is dynamic, then I can't use media queries (unless they are dynamically written in the head of the document).
So how are people dealing with this issue?
Not using background-images? (using instead?)
Dynamically writing media queries at the head of the document?
Using JS to dynamically load the correct images?
Resizing images dynamically on the server?
My downsides of each method:
1. Downside, can't use some good options such as background-size:cover
2. Need to write server side script figure out what image to load
3. Probably the best option, but need to wait for the JS to load first
4. I have tried this, but without much success.
one thing you can do..
You can assign its width using view port width like width:90vw;.
1 vw=1/100 of total view.
so you need not change the image for small screen.
you can just simply add this in your media query and default css also.
width:90vw;..
you can change width as your requirement.
so it will act dynamically.
not need to change the image.
hope it works.
I'm trying to create a gallery for a mobile site where I have different stylesheets for different sized devices. Within these stylesheets I have several classes which simply set a background url property to each image I want in the gallery.
Only one of these will be displayed at a time. And I will be cycling through the classes using Javascript to display them in a slideshow type presentation.
I am wondering is this method more bandwidth efficient than having all the images as individual img tags within the DOM? By setting these url properties do they get downloaded to the user's browser when they first load the site or are they only downloaded when the class gets set on a div in the DOM?
Simply I am trying to avoid having to download all the different images to the user's device at once. If you know any alternate methods which are better for this sort of thing I am also interested.
You are right, When you set the image backround, the image will only be downloaded if it is used, By this I mean, used as a style on some dom element.
Alternatively, you could 'change' the background-image css property using javascript. This way, you don't even have the image url in your CSS.
If bandwidth is your biggest concern, I would urge you to have a look at the inspector in webkit browsers like Chrome or safari, or with firebug on Firefox to see the 'network' tab, there you have a clear overview of what is loaded, how ( what order ) and how to optimize things. You can also make some stupid mistakes clear like downloading multiple times the same library from different locations and so.
If you just declare the class in css it shouldn't download anything before it is set. however it is a round question and the answer could take a lot of different shapes.
So I would say that yes it is a good way to do it, and it should be more bandwidth efficient (if you don't know that all the images will be loaded eventually anyhow, since you will typically have asynchronous image-loading either way it shouldn't matter much. I guess that if you only load one image initially the other images (i.e. the mentioned img tags) will not interfere making the load a bit more smooth?).
I find it to be a cleaner solution at least if you aren't sure which images will be viewed (which is likely to believe) to use your css-approach. also it's easier to maintain and provide a better design.
That you will be using javascript indicate that you are also doing the client side. And that give you control to choose what to do which is great :)
One alternative could be to have a local cache of the images as well, but that really depends on the problem at hand, if you will have different images and no real possibility to know in advance which images you will need (and perhaps not even how many of them?) then I think that the cleanest way is the way you purpose.
i.e. set up (or dynamically create) css-classes for images and handle all the logic in javascript.
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.
I'm working on a website that's already been designed by someone else. The designer has used a big image (900x700 100KB) which contains a big logo right across the top, then the background for two columns.
This image loads every time a page is loaded as it forms the basis for the website. What should I do with it to improve loading time?
I'm considering splitting it up into two or more images, especially the logo on the top. Does splitting up images like that decrease loading time in any significant way?
Thanks
-edit: Also, all the images are .jpg, would changing this to .gif or .png help anything?
Things to try:
Repeating backgrounds: If part of it can be broken off into a repeating image, you can reduce file size a lot that way (divide the image into the parts that don't repeat, such as a logo, and the parts that do, and then use CSS to repeat it as a background).
Caching: You should look into whether the image is properly being cached or not. There's no reason it should reload on every page request. If the HTTP headers correctly allow caching, then the browser will not request it again until the image is cleared from its cache.
See http://www.mnot.net/cache_docs/ for some info about cache control with HTTP headers.
Use the Web Developer toolbar for Firefox to check the headers for the image (hit the image URL, then click Information > View Response Headers)
File quality or type: Also, you may be able to use Photoshop to resave the image in either a different format or lower quality. GIF and JPG images can have greatly different file sizes for the same image depending on the content of the image (GIF is very good for graphics with limited and/or repeating colors, especially when large portions of the same color run in consecutive horizontal pixels). If the image is photo-like, JPG can be very good because high compression can be disguised in very detailed images.
Crunching (removing unnecessary metadata and finding a more efficient compression algorithm) the image with a decent image compressor is a good start. Reducing the number of colors, changing the format (GIF or PNG24 to PNG8) when possible.
This may be totally obvious, but... defer it until the page is fully loaded (if the contrast of colors in the background image are not needed to make the foreground text readable).
An easy way to do this is to make the css selector for the background image dependant upon a class in the body like:
...
<style type="text/css">
/*<![CDATA[*/
body.page-loaded{background:url(/path/to/image.jpg)}
/*]]>*/
</style>
</head>
<body class="page-loaded" onload="document.body.className+=' page-loaded';">
...
Of course, the "onload" attribute in the body tag should be migrated out (to a SCRIPT tag at the bottom of the page or in an external JavaScript file). Also this code doesn't require any JS library to run; it should probably make use of an event observer.
The two things you want to do are:
Convert it to PNG (10-30% smaller than GIF on average); and
Cache it effectively.
The way to cache it is to version it and use a far future Expires header. For versioning I generally just use the mtime (last modified time) of the file as a query string:
body { background-image: url(/images/background.png?1232343455); }
See Speed Tips: Add Future Expires Headers for adding the Expires header. You can do it with a script or with Web server configuration. The reason you need the version is that you can change it to force a reload of the file otherwise you need to rename it whenever you want to change it.
This way the background will only get downloaded once. Splitting the file into several will actually worsen the situation as browsers tend to limit the number of concurrent downloads and you'll be downloading more data overall (more HTTP headers plus image file overhead).
Putting the image on a CDN may also help (along with the other things mentioned), because people may load images from the CDN faster than your server.