I have a colourful background image that is 2000px x 1500px and because of the details I am saving it as a jpeg that renders at 1.1 MB. I am using the CSS background property to render the image. So being relatively new to web dev and working with a client/designer that's not open to a change of design at this point in the process, what should I do to help this image load blazingly fast. I don't know if it makes a difference but the site is using Joomla 1.5.9. This is something I've always wanted to understand but have had trouble uncovering solutions for... I hope someone can help!!
Thanks everyone!
There's no way to make images magically load faster. Sometimes, though, splitting an image in smaller images allows for surprising size gains; so if it's not out of question for your CSS layout (it typically is, though), you could try this.
Another possibility for you would be to use progressive JPEG images. They are encoded in such a way that enables browsers to display a progressively more precise image as it loads. This means that at first, the image appears blurry (or incomplete) but with full-dimensions, then it progressively gets sharper and better. It's well-suited for images meant to load slowly (or at least, images acknowledged to load slowly).
The best thing that you can do is try to shrink the file size to as small as possible. Let this be using some type of optimizer, smush.it for example. If you created the background image try saving it as progressive first, it loads a lower res version first then finishes loading. But the best thing is to try to shrink the size of the image width and height by finding a repeating pattern and cropping just that portion out and using it. Most about.me images are no larger than 100kb in size that are above 1200px wide.
you could immediatley call the image in the head by using
<script>
(new Image()).src = "IMAGE PATH";
</script>
and make sure you compress the image as much as you can with different programs, or if you have photoshop cs5 you can save it for a web device to strip out all of the extra junk, you can try yahoo's smush.it
http://www.smushit.com/ysmush.it/
or you could delay the loading of the site entirely for a few seconds, until you can be sure that the image is loading, you could try something like hiding all of the elements and fading them in upon a setTimeout something like
*CSS
body{
opacity:0;
}
*jQuery
setTimeout(function(){$('body').animate({opacity:'1'},300)},5000);
although that may not be all that practical.
Would loading the background image after the rest of the page has loaded work for you? At least this way visitors will be able to use the rest of your site until the 1.1MB has loaded.
Something along the lines of setting the style attribute of the <body> to be background: url(image.jpg) within an onload function?
Delivering the image over a CDN will likely speed things up; the better ones are usually optimized to deliver the proper TCP packet size/MTU to the wide variety of clients out there and have generally done a lot of work in the details of delivering things quickly. Slow connections like cellphones will still hate you for it, but getting things like packet size right can make the most of the bandwidth that is available.
Related
I'm really confused with this one as it seems impossible to do.
When running my site through GTMetrix I pass great but with Google page speed insights it's insisting my images can be optimized more for instance:
Compressing and resizing mysite.com/…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction).
The image in question is 65KiB so how Google thinks I can shave another 78.5 off it I don't know.
I'm using jquery unveil and using the retina function on it too could that be the problem?
Also I've tried downloading the images Google provides as their compressed version but these images have had their dimensions changed so would look terrible if I put them at their intended size.
Really confused, any help would be appreciated.
Thanks
There are few things you need to distinguish before proceeding with optimizing images for Google Page Speed.
Images are optimized for different platforms (Desktop and Mobile)
Images are optimized for physical size.
Reports for images can be "Compressing and resizing" and "Compressing" only. Compressing means u need to do a compression part, on other hand compressing and resizing means you need to use appropriately sized image for appropriate platform.
Depending on the report you are looking at (desktop or mobile), your item "Compressing and resizing mysite.com/…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction)." needs to be less in dimensions and compressed or just less in dimensions. Margin for resizing an image with CSS is around 20% so if you got 100x100px image you can resize it to around 120x120px with CSS without getting report on that item (that is if you also optimized it physically also). To check this in Chrome, inspect image and check "Natural" size in element selector.
You can deal with this on few ways:
Media Query (note that you have to use background image in this case)
Srssets
JS
Depending on the image compression package that you use, you might get different compression results. I've noticed that sometimes Google's Page Speed is able to optimise an image further than I have been able to (and other times not!)
Do you have a live URL for your web page? Or even the image? It helps to be able to see it live and compare!
Although it sounds a simple question I have been thinking about this.
How exactly do browsers render images? For an example of what I mean, lets say I have a 1MB image that is 3000px x 1500px. I then decide to put this image into a container that is the set to width:100%; meaning that it will scale down reponsively. Will the browser load the entire 1MB and then proceed to scale the image down to fit the container or will it scale it down and then proceed to load it?
I'm asking because this is pretty much my situation and if it does the former (load the 1mb first) then I guess I would have to serve a seperate image on mobile devices?
Thanks
Edit: Since people are saying that it'll load the 1mb image first, how would you suggest I serve a large image to the user? Scale it down for mobile and have a mobile/desktop version?
The CSS is applied after the image is fully loaded. So in short it would to load the 1MB image first and then apply the dimensions. Also images are stored at Server side. I found a very useful image which describes this:-
On a side note:
Browsers often render the same page multiple times in a very short period of time, specially after reading image metadata.
The browser (obviously) cannot scale (or do anything) with an image before loading it.
The image is retrieved first via a HTTP request e.g.
GET /images/myimage.png
and then scalings/transformations are applied. So if you want different images for different platforms then you should request as such.
As a web developer, I have to cut a layout similar to this (example website by Ruben Bristian):
Should I bother with cutting multiple small images like a logo:
a label:
and so on? Or should I just make one big background image with all elements like this:
and make a positioned <a href> with display: block; for a linked logo?
A single image has smaller size than multiple elements altogether. What are the other pros and cons?
Use separate images.
Here are a few reasons why:
Maintenance:
It's going to be much easier to maintain in the future, if/when there comes a point when you want to build on what you already have. Furthermore (and subjectively), the background image is not critical to the design. It wouldn't look broken if parts of the background were clipped. It would look broken however, if the logo were distorted.
Bear in mind also that newer, sharper displays are being developed. It's much easier to display the standard resolution background (it's already blurry, so clarity is not essential), and maintain two versions of the logo. One for standard displays, one for HD.
Semantics: What if the user has images disabled? Sure, it's unlikely, but what about Google? You should have some proper markup with real content. Your site needs real textual content in order for Google's crawlers to gather information about it. Use CSS image-replacement techniques to build the interface.
Another note on HD displays:
It's convention to serve larger images to HD (retina) displays, and use CSS to downsize them, effectively increasing their dots-per-inch. If you use just one image, the user will have to download a considerably large image. More bandwidth used by you, and slower experience for your users.
Furthermore, the text will look horrible on HD displays. It makes much more sense to allow the browser to render razor-sharp text to the user.
Accessibility: For a start, screen readers won't have a clue what your site is about. That might not be so relevant in this case, but it's best practice to build and accessible website. If you want to include some smaller text on the site, some users may be unable to read it. Normally they would increase the font-size, but if you use images, they're powerless.
I may have over-dramatised this answer, but the advice is well-intentioned.
I would honestly try a little bit of a different approach. The "photo" part of the image would be one image, the logo another, and maybe the double bar on either side of the heading another (but might not be necessary.
I would use the photo part as a bg image on a div, and within code the rest.
I wouldn't make the text part of the image at all. Try using a service like Google Web Fonts to get a good font.
The approach will save you lots of maintenance time, and also help with performance.
PROS:
Total bytes loaded is lower.
You do not have to worry about how little images are put together to become the total image.
if you just use 1 image you will find that it will be much easier to maintain the fluidity of the layout. You will not have padding/alignment issues, rendering issues, etc. Realistically the load time should be the same either way, maybe a tad longer for multiple images as the browser would have to render more css, but i imagine it would not be very noticable. In the end it really comes down to what is better for the job. I pretty biased towards 1 clean image :)
I guess you have to think about how you are going to use each element individually, and how they are going to change in the future.
You might want to change the logo, animate it, or want to re-use it elsewhere. The background image might change, or become multiple images in some sort of transitional gallery.
If this its never going to change (unlikely), then, yes, flatten it in a single image.
I personally would have as a separate background image. Then perhaps have the logo and the label on another transparent png and utilise css sprites to re-use them throughout the site. This will halve the number of requests required to download the logo/label, and allow you to optimise each image separately ie the complex background photo, and the more simple logo/label.
Is there a way, without javascript, to load a small image for a background before the real image is downloaded? Without javascript because I know how to do it with it.
I can't test if the following CSS3 would work because it works too quick:
body {
background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}
If the tinypreload.jpg is only, say 20k, and the hugefile.jpg is 300k -- would this accomplish the task? I assume that both downloads would start at the same time instead of being consecutive.
Update
Timing the results using Firefox's profiling revealed that it's not practical / not worth it to load a smaller background first. Main reason is the connection time. For tiny pictures it's the same time to connect as it is to download the content. For images where this becomes worth it -- the file size is not recommended for mobile.
If you still want to achieve this effect - combine all your "necessary" images into 1 file and display them as cropped background with correct offset. Load your high-res images through javascript, and update the content afterward.
You could exploit css load order and overrides to achieve this result.
Try loading the small image from your main css file and then put a <style></style> tag at the bottom of the html page. The inline style will override the main style but will load last because of it's position in the code.
The difference would be milliseconds though, so it may be too quick. It's also hacky and would result in invalid, but working code. Worth a shot though.
If you're trying to fix a mobile problem then have a look at this article on context specific images as that might be a more effective way to go.
This article on CSS3 multiple backgrounds may also help, as you may be able to exploit the stacking order to achieve the result you're after
It would be useful to know what problem you are trying to solve beyond load order, as it's hard to give advice on this one.
As I said in my comment you can use the 'net' tab in firebug for firefox (called timeline in chrome) to see the actual load order on your page - you can even filter it (on firefox) for CSS only or images only - this will enable you to test.
I want to put images of the 1024x768 as backgrounds and load quickly using css. I could use
background(url....)
in the CSS, but will that solve the issue, of downloading images quickl?
Thanks
Jean
If you have to use this technique, then remember to compress and cache the image, this will speed it up somewhat, but try and be creative with alternative solutions.
For example can the background repeat on the x-axis? If it can you'll be able to create a 1px wide version that you can repeat across the page.
Try searching for this. It helps cutting off a few KB of data. PNG Gauntlet is also a free software for PNG compression that also cuts Gama correction that causes problems with IE6 and IE7.
Body background images are usually saved with lower quality, thus reducing size.
If your backgrounds are changeable, preload them. It is done by putting divs of zero height at the beginning of the page, and assigning background-image style to each. The images are loaded at the beginning, so when the background of the body gets changed the user doesn't notice the lag.
Google started to count the load time already, so classic preloading causes problems with SEO. Loading with JS, after the page fully loads is an option, or even assigning styles with JS after certain actions are made is also a solution.
remember you can't change the user dsl speed. so css background would be good. Maybe start with take a higher JPEG compression to minimize the file
(btw. i hate (full size) background images at websites with my dsl light)