-
August 26th, 2011, 12:51 AM
#1
Wisdom from Gmail Developers
...We made sure that all our images were cacheable by the browser, and we consolidated small icon images into single meta-images, a technique known as spriting...
This is from an article at eff.org I was just reading. (an excellent site for anyone who didn't know about it) Its basically about how to properly deploy their HTTPS Everywhere firefox add-on.
article is here
My curiosity is whether someone will explain to me in visual friendly terms how the steps taken by the gmail developers in this quoted portion would cut down on the HTTP request send. I understand the making images cacheable part well enough, its self-explanatory. the second part is where my curiosity lays, about spriting and consolidating the small icon images into meta-images.
Last edited by IcSilk; September 5th, 2011 at 06:56 PM.
"In most gardens they make the beds too soft - so that the flowers are always asleep" - Tiger Lily
-
August 26th, 2011, 04:33 PM
#2
Originally Posted by IcSilk
This is from an article at eff.org I was just reading. (an excellent site for anyone who didn't know about it) Its basically about how to properly deploy their HTTPS Everywhere firefox add-on.
article is here
My curiosity is whether someone will explain to me in visual friendly terms how the steps taken by the gmail developers in this quoted portion would cut down on the HTTP request send. I understand the making images cacheable part well enough, its self-explanatory. the second part is where my curiosity lays, about spriting and consolidating the small icon images into meta-images.
Spriting is a term used primarily in 2d game creation (but used many other places as well) and it allows you to put multiple images into one image and just display only the portion of that image you want to see.
This is the same in the case of html. Say for example, you have a web page that serves as some sort of document library. In that library, you have many icons that show what types of files have been uploaded. You have MS Office icons, OpenOffice icons, Adobe icons, etc. Each of these icons are all 16px by 16px and you have a total of 10 icons. Instead of having 10 separate icon images, you could make one bigger image that was 160 by 16 and place all of these icons in there side by side so you would have a row of 10 images. In the CSS, you could specify which 16x16 pixel section of that image was the icon you wanted. Whats called a 'Window' or 'Frame'. So, if you wanted to display the MS Excel icon and that icon was the third icon in the row. you would specify that your 'Window' is 16x16 and you want to place it at the 48th pixel over.
So when a user goes to your document library, they only request one image and css takes care of the rest, whereas if they were 10 different images, the users browser would have to make 10 separate requests.
Hope that explains it a little and wasnt too confusing. im not always the best at explanations =-)
Last edited by mungyun; August 26th, 2011 at 05:00 PM.
I believe in making the world safe for our children, but not our children’s children, because I don’t think children should be having sex. -- Jack Handey
-
August 26th, 2011, 08:15 PM
#3
Yeah, Mung, Thank you. Completely understood that and makes sense. Thanks.
Kinda clever on the developers part, really ..
"In most gardens they make the beds too soft - so that the flowers are always asleep" - Tiger Lily
Similar Threads
-
By MrLinus in forum Miscellaneous Security Discussions
Replies: 13
Last Post: August 26th, 2008, 02:16 AM
-
By SDK in forum General Computer Discussions
Replies: 0
Last Post: October 11th, 2004, 05:26 PM
-
By yourdeadin in forum AntiOnline's General Chit Chat
Replies: 12
Last Post: September 16th, 2004, 10:55 AM
-
By MrLinus in forum Web Security
Replies: 3
Last Post: April 27th, 2004, 07:51 PM
-
By UberC0der in forum Non-Security Archives
Replies: 2
Last Post: November 16th, 2001, 07:53 PM
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
|