With different free and paid image editors, there are more than 20ish ways that you can save an image. Of those, .jpg, .bmp, .png and .gif are the most common images found on blogs and websites as a whole.
Today, we will divulge which image format:
- Preserves the image quality
- Is the fastest loading on blogs
I’ve always used .jpegs on this blog as I thought that they were the best way to present an image with a low loading time, Now I know that they may not be the best choice.
The idea came to me to do this post when I was reading Rarst.net’s post: 10 Things That Make Tech Blogs Unreadable and saw his comment to another user:
@MK
Totally, using badly compressed JPEG for software screenshots loks really bad. My blog is almost completely PNG. Reminds me that I really have to finish screenshoting series of post.
This pondered to me if I should start using a different format.. If your interested in speeding up your blog, Read on, the results will shock you (I was actually surprised as well at what I found).
The Picture:
Here is the picture I’m going to use for the test:
(Amazing Image Credit: serac)
The Test:
Converting the picture into different formats using Photoshop CS3, I discovered the following for the picture sizes. Quality remained untouched in all four pictures:
.GIF – 140KB
.JPG – 186KB
.PNG – 421KB
.BMP – 550KB
Here is the proof of the picture sizes:
(I won’t paste all of the pictures just for the sake of Dialup/Slow Connection people. Yes, You can thank me later.)
The Results:
It appears that .GIF are the best way to format your images for the web for high quality & different colour shots. Landscapes and other pictures should be formated with .GIF instead of other ways, as it will load faster on everyone’s computer.
Test #2 – Smaller Thumbnails:
For the second test, we’ll use a smaller image with a white background:
(Oh, That looks familiar )
The Results:
.GIF – 8.7KB
.PNG – 20.2KB
.JPG – 38.4KB
.BMP – 58.3KB
Second Batch of Proof Screenshot:
.GIF wins again.. With no quality loss. At this point, I’ve learned something as well. 
Conclusion:
.GIF was the winner both times in my testing. I think I’ll start using them for the images in my blog posts, but not for my blog designs. Heres why – They don’t do transparency like .PNG’s do (If you look at my logo, you’ll see the transparent background behind it. I don’t believe a .GIF could do it.)
Do you have a preference for picture formats? Or, will you convert to using .GIF for all of your images after reading this case study.
21 Comments
Ouch… I am amazed how wrong your study is.
I assume you had used all defaults while saving? That couldn’t be farther from real results when really trying to work with image compression.
First pic using your gif as source, PNG, RGB, optimize 240 trials, no interlace. 119Kb. Over three times less than PNG result you got.
http://www.rarst.net/images/compress/trees.png
First pic using original picture as source, same settings. 421Kb. WAY better quality. Don’t know where you broke it but your GIF is very grainy.
http://www.rarst.net/images/compress/trees2.png
First pic, original source, JPEG, 70%. 50Kb. Almost three times less than your gif result with better quality. Way smaller than PNG result because there is ton of dithering in picture, complex to be loseless.
http://www.rarst.net/images/compress/trees2.jpg
Second pic, PNG, 8 bit, dithering 0, optimize 240 trials, no interlace. 7Kb. Again almost three times less than your PNG result, lower than GIF result.
http://www.rarst.net/images/compress/logo.png
btw GIF is (and always was) great for transparecny, it has best browser support for that unlike PNG.
I really need to finish my screenshoting series, lol.
My post on image formats from that series btw
http://www.rarst.net/software/screenshoting-image-format/
Rarst’s last blog post..Rise and fall of mobile hyperconnectivity
though i don’t know much about images i do believe that GIF doesn’t have transparecny, but it does have alpha channel which is why GIFs can have no background bla bla bla. PNG has true transparently because it can be translucent. I guess you can call it transparent but it really isn’t. It really doesn’t matter so just ignore this reply.
Since I use Paint, I usually save it in .PNG , so the quality doesn’t drop.
-Mike
I think it depends on the image as well. If its an image with lots of details you don’t want the quality to drop. I mostly go with PNG format for that reason.I haven’t done extensive testing as yet , have to do some tests for quality and image size , thanks for sharing your results.
Nishadha’s last blog post..pepperjamNETWORK is paying you to join
@ Rarst – How can a test that I conducted be wrong? It was a simple case study that I decided to do and posted my results. I looked at all four pictures at the end of the trial and found no difference in quality.
Now, as for your testing..
#1 – My .PNG of the trees had the following settings:
so I take it that I didn’t use any. Perhaps that would of altered my results.
RGB
Interlace: None
I didn’t know about optimization
#2 – The GIF may be a little grainy.. I still couldn’t notice the difference when flipping through the four of them. But will the average internet user take notice to it? Very Doubtful. Comparing 421KB to 140KB.. I’d much rather take the 140KB.
#3 – I used maximum quality for the .jpg, although it probably wasn’t necessary. 70KB?? Hmmm..
#4 – I need to optimize my .PNG’s – Lesson learned.
Your series was a good read.. Now finish it! lol.
See you later Rarst. Thanks for totally showing me up.
@ Play – Paint is pretty useful at times, isn’t it?
@ Nishadha – I (most likely after reading Rarst’s notes) will either stick with .GIF or .PNG for all of my photos for the posts. The reason why my .PNG’s were huge was because I didn’t “optimize” them.
@Brad
Actually for photos JPG would be best.
I stick to PNG because most of graphic materials at my blog are screenshots and such. Well, you’ve read my post.
I’ll try to make post on compression some time next week, I probably wrote more on topic overall in comments for different blogs than actual post will be.
Rarst’s last blog post..Rise and fall of mobile hyperconnectivity
I’d definitely always use GIF. They are basically made for the Web. I really do not care for any of the other formats.
Blog Expert’s last blog post..3 Ways to a Popular Blog
Hey Brad,
GIF is for images with few colors, JPG works better for images with rich colors and shading. Your GIF example above has a granular sky, in a blog post it wouldn’t matter much but the JPG would clear that up. I agree though, a lot of bloggers just insert images without thinking about compression at all, page load time makes a massive impact on the usability of your site, so keeping image size down is worth the effort, after all all you need to do is save it right.
Most image software you can preview what the saved version will look like, I just save as JPG and bring the compression down until the quality starts to go.
Best,
Jeremy
SEOcialize.com – Search Engine Optimization’s last blog post..Matt Cutts Whitehat SEO Tips for Bloggers
GIF has always been considered best for the web. What I did find surprising (since I try real hard not to work with graphics of any kind lol) is 16ish other ways to save??
Where can I find a list of these?
Dennis Edell’s last blog post..Your Link Just Got MORE Valuable!
GIF is not perfect. It’s good for sharp images, transparency and animation but totalyl sucks for color-rich images.
@Dennis Edell
I am sure you can Google a lot on topic.
If you want something simple to play with image compression try IrfanView, it comes with plugin that is decent for compressing image in all three main formats.
Rarst’s last blog post..Host your own p2p network with YnHub
I gotta say, I know my limitations, and proper outsourcing can be a real life (and sanity) saver. *Graphics* in any shape or form, from the “simplicity” of photo working, to whatever, it is indeed my arch nemesis. LOL
Dennis Edell’s last blog post..Your Link Just Got MORE Valuable!
Oh really, I shouldn’t be exporting my 16×16 icons as 19MB TIFFs?
tek’s last blog post..Nano 4G available, iPod Touch revamped, iTunes 8, Apple fanboys drool everywhere
@ Tek – lol. Probably not the best idea
I thought that GIF was known for quality loss. I do screenies on BF1942 and I find that BMP and PNG don’t lose any quality. I have saved images as GIF and their colors all got messd up. I try to save all my screenshots as JPG because it is a widely accepted image format and compresses to very small sizes. The only problem with JPG is that it gets grainy. I don’t know what to do.
Yes, this test is quite out of wack. It does not even take into account the differences of PNG8 vs PNG24, which are not to be ignored. PNG8 is far better than GIF in file size and supports the same amount of colors and (binary) transparency. PNG24 supports millions more colors and in general will have a much larger file size because of it.
GIFs only support 256 colours compared to JPEG’s 16.7m, so the file size is likely to be smaller in many instances at a cost of quality – you can’t accurately represent a photo as a GIF as 8-bit colour simply isn’t enough.
As an analogy, we could all compress our sentences to a single word which would enable us to complete our conversations with maximum expedience, but obviously there’d be no way we could actually convey all the information necessary to make ourselves understood!
It’s a case of horses for courses, where image formats are concerned.
Haha, not really.
I used Photoshop’s default for compression, I told you which file format I was using and I showed my results.
Feel free to send me any corrections you feel this article should have.
Well I have to mention it ‘looks’ you are right here.
But a Gif image actualy does have a LOT of color loss.
Jpeg respects the Full RGB spectrum. So for large pictures with all the color’s for best quality you bether use that on internet and the reason why bmp is so big is because it remembers the layers of the image you created in photoshop without showing it.
(for example when you re open it when downloaded and you wan’t to change it only the background gets erased.)
I use GIF for all the images on my site. In addition, the images are reduced in size and resolution from the originals. The original art (in full resolution) is preserved as a photoshop file for future print use.
Although I don’t remember the thought process that brought me to select GIF as the format for my images, I trust that it must have been a good one
I really don’t have an idea about the file extensions of images or pictures. I am now educated of which is faster and can preserve good quality pictures. Thank for sharing this informative information…
This has all been great information. I am far from an expert but that is why I try and research as much as possible. That is how I learn. I do have a couple question though. If I save my photo’s online in . GIF format what is the best format to save them in when I want to print them out from a website or online photo storage or even email? And what is the best way to save them when I want to send them to an online photo print store and have them enlarged. I am not tech savy but do learn quickly and know enough to get around the computer
4 Trackbacks
[...] I figured out how to optimize .PNG’s – The “Optimized” .PNG was around 8KB smaller than the .GIF version – So much for my study. [...]
[...] un interesante caso de estudio que realizó una comparación entre el formato JPEG vrs BMP vrs PNG vrs GIF una de las conclusiones apunta a favor del formato .GIF y en segundo lugar el formato .PNG pero [...]
[...] por ahi encontré una comparacion entre los formatos JPEG, BMP, PNG y GIF de cara a su utilización en un sitio web. Parece que el viejo GIF sigue dando sorpresas, pero para [...]
[...] un interesante caso de estudio que realizó una comparación entre el formato JPEG vrs BMP vrs PNG vrs GIF una de las conclusiones apunta a favor del formato .GIF y en segundo lugar el formato .PNG pero [...]