I've been noticing that many sites have been using a single png file for their buttons and icons. Is this really necessary? Does it really help reduce the overall size and loading times of the website? Is it something that's easy to do?
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Single PNG for all buttons/minor images?
- Thread starter definitive
- Start date
- Sort by reaction score
PNGs generally look better, and perhaps loading them all at once and using a shortcut to show only a certain part does allow less space/bandwidth while still having great images. Still JPEG is probably the way to go. You can even experiment with stuff less than the typical 80% to get the smallest acceptable image.
@whatsgooddan, that's not what the OP was getting after, and jpeg will generally result in larger files and less crisp images used for things like buttons. GIF and PNG are appropriate file formats for those, that only use a few dozen colors. Jpegs are for images of real world items, like a photo of a person or landscape.
Image sprites are certainly more popular these days. They help with organization and do help with page loading times. It's still a personal choice whether to do this or not. They generally take more time to create and setup the CSS to use them correctly. There's pros and cons with any technique. Here's a good article from Smashing Magazine that takes up this discussion.
Image sprites are certainly more popular these days. They help with organization and do help with page loading times. It's still a personal choice whether to do this or not. They generally take more time to create and setup the CSS to use them correctly. There's pros and cons with any technique. Here's a good article from Smashing Magazine that takes up this discussion.
angelwatt, c'mon this isn't about nailing what the OP has right on the head. it's about opinions and suggestions. people who ask questions on here often miss the bigger picture, and the solution is much more simple they they make it.
if at any time the OP decided to open up Preview, save something as a JPEG and play with the quality settings, well I'd sure hope that they'd sit and think, hmm... let's see how big this file would be as a gif.
you did correctly identify 'image sprites' for which I was too lazy to look up. imo, the searching process should be done by the OP before posting, not me who's on here out of boredom.
you are quite an intelligent person and i am truly humbled by your awesomeness
if at any time the OP decided to open up Preview, save something as a JPEG and play with the quality settings, well I'd sure hope that they'd sit and think, hmm... let's see how big this file would be as a gif.
you did correctly identify 'image sprites' for which I was too lazy to look up. imo, the searching process should be done by the OP before posting, not me who's on here out of boredom.
you are quite an intelligent person and i am truly humbled by your awesomeness
Actually, when the poster asks a specific question, then yes it really is about nailing it. Your post was off-topic and doesn't help the OP, especially considering you gave bad advice as jpeg is not the appropriate choice here.
Sprites Are Good
This technique is called sprites. The filetype (PNG, JPEG, GIF) is NOT the important part of it. (And JPEGs are best for photos, PNGs are often better for buttons.) Sprites can be useful regardless of filetype.
Let's take an example of a navbar with 6 buttons and 2 states (regular and over). As separate images that equals 12 files. The filesize of those 12 images will be larger than if you put them all into one file. Small files = faster download. So sprites win by making a faster website.
Also, browsers can only download a few files at a time because they have a limited number of download slots. Reducing the number of files speeds up the site because it's fewer requests and the entire navbar could be being downloaded in one download slot while another page graphic is loaded in another. As separate images, the navbar could fill up all the download slots, delaying the loading of other files. Sprites win again by further increasing speed.
There is a downside to sprites. It takes more work to use them on a webpage because you have to make CSS Styles to position each piece as a background graphic that is cropped to show only the portion you want. It's not a lot of work, but it is more time consuming and can be a pain if you change the graphic. It is worth though it because the site will be faster. Apple does this (check out www.me.com) and most modern websites (like www.kaleidoscopeapp.com) do this because it's worth the speed increase. Keep in mind you can merge some graphics, you don't have to merge them all into a single file.
P.S. I know this stuff because I teach people how to do it in New York City.
This technique is called sprites. The filetype (PNG, JPEG, GIF) is NOT the important part of it. (And JPEGs are best for photos, PNGs are often better for buttons.) Sprites can be useful regardless of filetype.
Let's take an example of a navbar with 6 buttons and 2 states (regular and over). As separate images that equals 12 files. The filesize of those 12 images will be larger than if you put them all into one file. Small files = faster download. So sprites win by making a faster website.
Also, browsers can only download a few files at a time because they have a limited number of download slots. Reducing the number of files speeds up the site because it's fewer requests and the entire navbar could be being downloaded in one download slot while another page graphic is loaded in another. As separate images, the navbar could fill up all the download slots, delaying the loading of other files. Sprites win again by further increasing speed.
There is a downside to sprites. It takes more work to use them on a webpage because you have to make CSS Styles to position each piece as a background graphic that is cropped to show only the portion you want. It's not a lot of work, but it is more time consuming and can be a pain if you change the graphic. It is worth though it because the site will be faster. Apple does this (check out www.me.com) and most modern websites (like www.kaleidoscopeapp.com) do this because it's worth the speed increase. Keep in mind you can merge some graphics, you don't have to merge them all into a single file.
P.S. I know this stuff because I teach people how to do it in New York City.
the OP has not given us any feedback yet. you sir live a world of hypothesis. how bout updating your own site once in a while?
i like having gone this far into discussion because now more people can learn things from it. for example, i now know that the technique is used on me.com.
danrodney, you make good points in favor of image sprites. i daresay, i have grown more curious and will investigate. i love to use lots of PNGs, but never do because I get large types of files 104kb vs 28kb on a 300x168 image.
(note, that not all images are the same size!)
taking a more scientific approach, one mustn't assume too many things. this is the difference between a fact an an inference.
i like having gone this far into discussion because now more people can learn things from it. for example, i now know that the technique is used on me.com.
danrodney, you make good points in favor of image sprites. i daresay, i have grown more curious and will investigate. i love to use lots of PNGs, but never do because I get large types of files 104kb vs 28kb on a 300x168 image.
(note, that not all images are the same size!)
taking a more scientific approach, one mustn't assume too many things. this is the difference between a fact an an inference.
Look into online websites for CSS sprite generation.
There was a website that you could input your website URL and it would find all of your CSS images that would make sense to be in sprites, combine them, and give you CSS code for the background-position of each image. It basically did most of the work for you.
Here is some more information about them and a link to the website I mentioned
http://www.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/
There was a website that you could input your website URL and it would find all of your CSS images that would make sense to be in sprites, combine them, and give you CSS code for the background-position of each image. It basically did most of the work for you.
Here is some more information about them and a link to the website I mentioned
http://www.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/
lol, you sir live in a world of ignoranceyou obviously don't have the knowledge and/or experience to comment on this. I don't mean that as an insult by the way...just stating the reality. angelwatt was (accurately I might add) speaking from experiencethe fact that he used the term "sprite" when the OP never did shows he knew what he was talking about.
I suggest you learn the differences in what each format does. Its history. Its compression abilities. Because if you did already know that, you'd know exactly why this:
is happening and when to use which format.
And for the record, in 99.99% of sprite applications, a jpg would be the most useless thing you could use.
The filesize is determined by the type of imagery, not the pixel dimensions. Photographs tend to be smaller when saved as JPEGs because that compression is best suited to gradients and photographic imagery. However images such as type and flat graphic looking art will be larger (and lower quality) when saved as a JPEG. Flatter graphic style art is typically smaller and better quality when saved as a GIF/PNG. Keep in mind there is PNG 8 and PNG 24. 24 bit is more colors and therefore larger size. Use 8 bit (256 colors or less) when possible to reduce filesize. No one format is right in all situations. The OP asked about buttons and they would more likely be GIF/PNG, although no one can really know without seeing the actual images. Compression is an art of subtle detail.
everybody is making valid points, but it's not as if angelwatt simply said "sprite"
there is a lot more content in each of these posts than just a solution to the original question. personally, i don't care why JPGs are smaller than PNGs. what I care about is what most people care about, and that is how the image looks. knowing why can only take you so far. i can inqure in depth about these things, or i can slap an image onto a page and call it a day.
we merely have separate attitudes regarding the subject matter. let's keep in mind that we are in web design & development, and not design and graphics. sure, these matters overlap (they are both in 'visual media') but what is important here is the context of the post. it is about putting graphics on the web and either loading them together as one big file, or separate as smaller files.
if you go the big file route with sprites, you may as well pick a compression that saves as much detail as possible. if you go the separate file route, loading up lots of small files, aim for regular gifs or jpegs.
a note about assumptions, which a lot of people seem to be making. be very careful about these. given the information, a lot of conclusions have been jumped to ex) angelwatt jumping to the conclusion that he knows exactly what the OP is going after.
you may disagree with me, but pointing something directly back at me helps no one and only creates this nonsensical bickering. i should have been mature enough to let it go, but everybody sought after picking apart my post and calling me out on my ignorance.
when i make concessions, people seem to skip right over them. for instance, i am conceding now that in my first post when i suggested "JPEG is probably the way to go" i failed to write more clearly something along the lines of "the regular, more lossy, formats in non-sprite form is the way to go"
people like to jump to conclusions and jump the gun logically. well, how come nobody could do this then?
it's pretty funny how at the end of his post, people are writing something along the lines of "blah blah blah, jargon jargon jargon, but individual results may vary" because yes, this is always true. if individual results vary, then why the blah blah jargon?
anyway it's been fun guys. sorry for joining the discussion. i'll do my best to remain logged out!
there is a lot more content in each of these posts than just a solution to the original question. personally, i don't care why JPGs are smaller than PNGs. what I care about is what most people care about, and that is how the image looks. knowing why can only take you so far. i can inqure in depth about these things, or i can slap an image onto a page and call it a day.
we merely have separate attitudes regarding the subject matter. let's keep in mind that we are in web design & development, and not design and graphics. sure, these matters overlap (they are both in 'visual media') but what is important here is the context of the post. it is about putting graphics on the web and either loading them together as one big file, or separate as smaller files.
if you go the big file route with sprites, you may as well pick a compression that saves as much detail as possible. if you go the separate file route, loading up lots of small files, aim for regular gifs or jpegs.
a note about assumptions, which a lot of people seem to be making. be very careful about these. given the information, a lot of conclusions have been jumped to ex) angelwatt jumping to the conclusion that he knows exactly what the OP is going after.
you may disagree with me, but pointing something directly back at me helps no one and only creates this nonsensical bickering. i should have been mature enough to let it go, but everybody sought after picking apart my post and calling me out on my ignorance.
when i make concessions, people seem to skip right over them. for instance, i am conceding now that in my first post when i suggested "JPEG is probably the way to go" i failed to write more clearly something along the lines of "the regular, more lossy, formats in non-sprite form is the way to go"
people like to jump to conclusions and jump the gun logically. well, how come nobody could do this then?
it's pretty funny how at the end of his post, people are writing something along the lines of "blah blah blah, jargon jargon jargon, but individual results may vary" because yes, this is always true. if individual results vary, then why the blah blah jargon?
anyway it's been fun guys. sorry for joining the discussion. i'll do my best to remain logged out!
I'm sorry but this is just utterly wrong minded. Knowing WHY allows you to knowledgeably choose what will give you the best image. Simple as that -- they are inextricably tied. You can "slap images" onto a page all ****in' day, but you're not going to get good results if you have no idea what you're doing.
This shouldn't be in 'design and graphics' because it is a fundamental of web design. The web (surprise surprise) has images and web designers should know how to deal with them appropriately. They can't just throw something at the wall and see if it sticks, it's not how this works.
No, this is advice is wrong. Read the thread again.
If you use PNGs, ImageOptim is your best friend. Adobe's programs always created over-bloated PNG files for some reason.
Unless you need something animated, you should be using PNG instead of GIF.
And JPEG is not the right format for something like buttons or logos, it doesn't matter if your images are in sprites form or not.
Unless you need something animated, you should be using PNG instead of GIF.
And JPEG is not the right format for something like buttons or logos, it doesn't matter if your images are in sprites form or not.
thanks everyone for providing your feedback on my questions. i have one more thing to ask regarding png's, and it's in relation to web browsers. how compatible are browsers when using png files? i remember once using a png with transparency, and it displayed the empty space as white background when using ie6. i really don't bother coding for ie6 anymore, and have not used png files since then (mostly stuck to jpegs and gif's), so i'm wondering if there are other popular browsers that might give me problems when using png's.
thanks again.
thanks again.
The only time I had problem with the transparency/alpha channel of PNGs was also with IE6.
You might have some gamma correction problems, but ImageOptim removes any gamma correction in the file so that shouldn't be a problem either.
Nope, ≤IE6 was the only browsers with that problem. There are techniques for overcoming it as well, but less and less people are caring about giving the extra effort to a POS like IE6.
Image sprites are to reduce HTTP requests on very high traffic sites like Amazon.com. While the overall image filesize of the sprite might be near the same as a bunch of separate images, it is only 1 http request to get ALL the buttons in the sprite. While this doesn't really matter on small/medium sites, on huge e-retail sites and such, minimizing your pageweight and load times is crucial, and http requests play a large part in that, due to browser and server limitations.
If you're in a thread talking about sprites, and no one has mentioned http requests (the REASON for using sprites), then the people talking probably don't know what they're talking about.
How has no one brought this up?
If you're in a thread talking about sprites, and no one has mentioned http requests (the REASON for using sprites), then the people talking probably don't know what they're talking about.
How has no one brought this up?
Because you didn't really read what was here. The link I provided early on talks enough about this. The thread was mostly off track and so a real discussion never happened, and your tone is plain arrogant and contributes nothing to a discussion that already ran its course.
http requests
Sean Dempsey: While I didn't say "HTTP requests" specifically, I did mention that idea (in laymen's terms) early on in this thread. I mentioned how sprites speed up loading time by reducing the number of files and how that works with browser download slots. Oh, and filesize is also a big reason, because it does often shrink them.
Sean Dempsey: While I didn't say "HTTP requests" specifically, I did mention that idea (in laymen's terms) early on in this thread. I mentioned how sprites speed up loading time by reducing the number of files and how that works with browser download slots. Oh, and filesize is also a big reason, because it does often shrink them.
As others have said, it WAS brought up, only in laymen's terms (the concept of saving "download slots").
You resurrected a weeks-old thread trying to have the last word by bringing up something that was already brought up. And you're claiming the people in the thread don't know what they're talking about?