I know you can reduce page load time by using CSS sprite. As this will reduce round trip, etc.
Is their any numerical value or performance test that by using CSS sprite how much average page loading time you can save. I know this will depend on the site. I am interested to know about a general data for e commerce site like Amazon.com
Besides, if you use async image loading like JAIL how much time you could save. I know u can't load everything asynchronously.
Having a large sprite, versus a small image, the large sprite isn't that much bigger in file size than the small image, assuming you line your images in the sprite horizontally like your supposed to.
Most browsers will do about 6 simultaneous downloads at once. So a general rule of thumb is, if you have more than 6 icons, or theme graphics, it should be sprited. If you have photos or illustrations, they should not be sprited.
Improper usage of sprites will lead to overload server. Sprites are used to reduce the number of server requests, but large srpites of jpg format can be bad.
It is like balance either all smaller images of less size or a sprite that i of smaller size that covers more images
http://coding.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/
The page loading can reduce upto 10X factor when they are use
optimally!!
Hope this helps
Related
I know reducing your requests to the server will help reduce load time. Placing all of your images into a sprite can really help with this. However, when is a sprite too big?
The sprite for my page is 1.7mb! I thought about splitting the sprite up into smaller sprites. That will increase server requests and would seem to be a pointless task.
My site loads too slow and I’m trying to pinpoint the slow downs.
Can anyone suggest how should I handle one big sprite? should I break it into multiple files or is there any other suggestion to improve the page load time.
The best size is 4096 x 4096 What is the maximum sprite sheet size I can use for android devices?
So long as you are using fewer pixels than that, you should be fine. The only logical reason to break up your sprite images smaller than that is if you want to give the user an image to look at while they wait for the others to load. (Or if there are some images you know some users will never see on their visit.) But it will increase the loading time overall.
As for file size, add compression to your personal taste. If your hatred of the loading time and your hatred of the compression artefacts are equal, you have found the right balance.
I've read a lot about the benefits of using sprites in css for icons and logos, but this seems to be largely used for lossless formats such as gif and png. I'm wondering if the benefits are still there with jpegs and images? I want to build a header from a number of smaller pictures that may be displayed in different orders. Will combining them into a single jpg still have the speed benefits of the normal use cases for sprites?
It might depending how big those jpegs are. Usually images are combined to reduce http calls back to the server. If they are small in size then combine them, if not then leave them separate and call which ever ones you need.
The main benefit of using the sprites for multiple images is that it provides a smaller amount of header information being sent. Therefore having larger pictures inside of the sprite would have less of an overall impact on the whole project, there would be a small increase but the adaptability of the system is reduced using sprites. If the picture is going to be changed at any point i would keep it outside of the sprite.
You can reap the same benefits in terms of reduced round-trips, etc. but:
The level of compression is likely to suffer; JPEG is tuned to reduce the size of single images, and does poorly with abrupt transitions (as in a collage, which your meta-image would basically be)
For the same reason, it's possible that the edges of your sprite images will be less sharp than they are now, as they're being lossily compressed (and so slightly combined) along with adjacent image data.
My site have a big css sprite image.
Site: http://www.protohaber.com/demo
Sprite Image: http://www.protohaber.com/demo/templates/v1/images/proto_sprite.png
My site is works slow (e.g. page scrolling slow, etc..) at browser in some computers (low cpu computers)
Maybe you should try to use PNG Gauntlet to optimize the image.
Another Solution could be to split the Sprite into two or even more.
I think the principal reason for this is because the image is too big (almost 1.5 Megabytes), So just imagine how much the cpu have to calculate to move the background from one side to another. I think you sprite has a lot of resources which doesn't belong to it (like some images (the girl, caution alert, etc). Also you are mixing a lot of color at the same sprite which make the images bigger because has more colors to render.
I think one option is break apart the sprite into separate one which will make the file smaller (the slow processors can handle, render and move better small images), remove the images like (the girl, caution alert, etc) and make them jpg file which will make the file also smaller.
the idea of sprites is reduce the request to the server but if this reduce the performance of you application is best idea to make a couple of more request and have a better performance for the final user.
Currently I am using a image sprite having size of 200K and its load time is 4.9 second.
My Question is,
Does the sprite image size matters while loading?
If the size is increasing, Can we break it in to two or three image sprite?
What would be the best option increasing the HTTP request or doing some compression?
Thanks
It matters if you want certain images to show up before others. Obviously no images can be shown until the whole thing loads. If there are elements of particular importance then break them into a separate file.
Yes
Compression won't get you very much because you are probably already using a compressed image format like jpeg or png.
If you need to optimize page load speed I would do my suggestion in point one and possibly use async requests for remaining images.
In what scenarios CSS sprites would be good to use and when not? Is it time saver or only server request saver?
I think bandwidth use will be same because image is same like ong big image but it's in a parts?
When and where use of css sprite is a time saving(in work) option ?
For navigation it's good for rollover pre-loading effect but not good for images disabled people?
What are other good usage which can save our time once and in future (if changes comes in design) both?
Edit: Sprites is only for css background so should we use images in background as much as possible to save sever request, is it good idea?
Update:
To implement takes more time then regular method and mostly client do not much worry about some slowness like http request. My question is can we save time in site making process and future maintenance of website using css sprite. or regular method is enough.
In nutshell my question is: “can CSS sprites save our designer and xhtml css coder time (I'm not talking about server request)?”
It reduces the number of HTTP requests which will enhance site performance.
CSS Sprites are the preferred method
for reducing the number of image
requests. Combine your background
images into a single image and use the
CSS background-image and
background-position properties to
display the desired image segment.
In Minimize HTTP Requests
CSS sprites are a time saver because it is a server request saver, as server requests are notably time-consuming. Using CSS sprites usually decreases your webpages' load/render time dramatically. There are times when they cannot be used, such as with background images repeating in two dimensions, but when you can use them, it's almost always worth the effort.
Of course you shouldn't sprite groups of images that are very big, especially if they're not very likely to be shown. Don't sprite an entire photo gallery into one big image, for instance =)
Other measures which amount to pretty much the same thing would be minifying, compressing and combining your scripts and styles into only one js file and one css file.
EDIT
With regards to your clarification, i'd say no, CSS sprites will always mean more work, never less, compared to just using the separate images as they are. I still wholeheartedly endorse their use, tho =)
CSS sprites are best used for elements that have a fixed width and height. Otherwise, you need large empty spaces in your sprite image, which can (depending on file type) increase the size a bit.
Due to the way different file formats compress images, sometimes a CSS sprite image will have a noticeably smaller file size than the total file size of separate images. That’s a nice bonus.
As mentioned, sprites reduce the HTTP request overhead, which can help load time. I’ve never seen any numbers on the magnitude of this effect.
Sprites will add a bit of time for your CSS developers. It shouldn’t affect your designers. But bear in mind that your developers code the site up once; the benefits of sprites apply every time someone looks at the site.
It will only reduce the number of requests but that will benefit both the server and the client. The server will not need to handle as many requests. The client, because it is limited in the number of parallel requests that it can make, will render faster as many of it's previous "requests" for the image will be served from its cache, allowing it to make the requests that it does need more expediently.
Using sprites reduces the number of requests and thus also the network overhead. Loading a few sprite image is faster and uses less bandwidth even if the image data is the same (or even a bit more) than the individual images.
It needs a bit more work and some planning to combine the individual images into sprite collection images, so the development time is somewhat longer. The difference is less if you have it in the plan to start with rather than combining the separate images afterwards.
Any scenario where you have several same size background images that replace each other (or complement each other) is ideal for sprites.
As long as you have something like a dynamic photoshop PSD file in the back, then the designer's maintenance won't be an issue. But if it is a static file like PNG/GIF, then maintenance will take more time as you cannot control the individual images separately anymore.
Overall, sprites is a great idea. Use it for fixed width & height images that are less likely to be updated frequently.
Sprites are always good to use. They help speed up the loading of web pages and prevent the blinking effect on navigation hovering.