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:
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).
Here is the picture I’m going to use for the test:
(Amazing Image Credit: serac)
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.)
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 )
.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.
.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.