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.
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 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
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.
"Simple" question.
Is it better to use large spritesheets for site elements than using multiple images?
I mean,do the additional CSS image manipulation (background positioning a large image and cropping it) compensate for the fewer HTTP image requests?
The number of concurrent HTTP/1 connections to a host is limited to about 6. Assuming a latency of 100ms, the about 60 images in the posted sprite would take at least a whole second to download (probably more, since HTTP requests and answers need to be generated and parsed).
Since the size of the sprite image is about the same as the individual sprites and image processing is blazingly fast (I'd estimate well below <100 ms for all 60 images together), using sprites saves amazon about 900ms of load time, a noticeable impact - and that's in theory, without accounting for the huge overhead of having to serve 60x the number of requests they would have to otherwise.
In summary, use sprites for logos and small images over HTTP/1.
HTTP/2 is designed so that workarounds are no longer needed. Most importantly, multiple requests can be served concurrently over the same TCP connection. Additionally, header compression is designed to compress redundant headers such as User-Agent or Accept.
It is generally better to use sprites that many small images.
Every image creates additional http request and that needs time. Especially with HTTP 1.0 every new request need to wait for previous response.
As for very big pictures - it mostly depends on ratio of time needed to transfer one image of a set to the overhead in time coming from HTTP protocol. If the overhead is not big and you feel that such big images can slow down your app - you can use multiple images, if it's relevant - use css sprites.
Yes, for any reasonable image size, it will be faster.
Drawing part of a larger image is not slower than drawing a whole smaller image. It's not like the browser is drawing the whole image and removing parts that are not showing, it's only drawing the part of the image that is showing. It's just copying pixels from memory, and it matters very little if the pixels are close together in memory or spread apart in a larger image.
A larger image takes longer to load that a small image, so smaller images would start showing up faster, but the large image loads a lot faster than all the small images together. Even if you have to wait somewhat longer before the images start showing up, all images show up at once instead of popping up one at a time.
Sure, it is better. The browser will make only request for the file, compared to many request to more files.
Use sprites for many little images that tend to repeat in your design(icons for ex). For large photos it's not a good idea, in case of a photo gallery.
I have a web page that i'm working on and it has only one image on it that was meant for design. It is about 200k bytes. When you go to another page, depending on the page, its the same image just a different color.
Should i be loading these background images as one big sprite and positioning them correctly or loading them separately?
When A page loads it is only doing 1 http request for that one image of ~200k bytes. If i make a sprite with(it will be at least 5) all the images on it, it will for sure increase the size of that one http request.
So the only benefit then is a caching/storage benefit? Are there any other benefits or is it a bad idea? What are you thoughts?
If combining them makes it 400kb, it may be better to leave them separate - otherwise none of your icons will appear until the browser has downloaded your image.
I would try combined and as 2 requests, and measure performance.