This site is moved to other domain!

You should be automatically redirected in 9 seconds. If not, visit
http://www.detector-pro.com
and update your bookmarks.

Thursday, December 25, 2008



Stumble Upon Toolbar
written by: Viktor Ustijanoski in
[] [] [] [] [] [] []

Which picture format (JPG, PNG or GIF) you should use for best picture quality upload on your blogs


Don't want to miss a single bit? Subscribe to our RSS Feed!


I have picture quality problems in my blog posts (Blogger.com), making the good quality picture in .jpg format, with normal compression for faster loading, and when I upload to my blog space I get a picture with low quality, high compression and many artifacts. So I tested uploads with different kinds of pictures (particularly JPG, PNG and GIF, also you can upload BMP or TIF picture format on your blog space) on different posts, with considering loading time, quality after uploading to blogger, transparent options, easy of use (transparent picture background is capable for taking your blog background if you use gradient backgrounds, for example) and widely use picture format like (mobile phones, computers, digital cameras..) I will try to explain basic features of picture file formats, not to be too much tech based.


JPG – is the most widely used picture format, you can take JPG pictures from your digital camera or mobile phone and post directly to your blog (see size limitations on your blog first), also you have different stages of compression so you can make a pictures with smaller size without visible quality loses on higher stages (from 8 to 12). Becouse picture is compressed it will load faster on the web. But what happens? Even if you set up your picture to good quality/size compression ratio, when you upload it to blogger for example, the service will compress it again, so you get high compressed picture with quality distraction.


So, do not compress your JPG pictures before uploading. Another negative point is that .jpg file format does not support transparency, so if you use gradient background on your blog it will be difficult to post jpg picture objects - for example different types of icons, artworks etc.. See picture examples. My recommends is to use JPG for big high resolutions pictures.


PNG – Biggest plus is Transparency. PNG's compression is fully lossless so restoring and re-saving an image will not degrade its quality, unlike JPG. Becouse is lossless format the picture file has more size compared with same JPG image, especially for big resolution pictures.



My recommends is to use PNG for pictures, icons and artworks with transparent background and for quality based pictures on your blog. (Becouse your blog has not limited space and the internet connection is high today, this format is preferred by me.


GIF – is also widely use picture format, especially for web animations and mobile phones. The picture format has 256 color palette, so I do not recommend GIF format for high resolution pictures.

GIF support transparency but the pictures are not the same quality with PNG's becouse of limited GIF color palette. My recommendation is to use on web menus, text, buttons, background pictures and other small pictures with basic colors.



Picture info:
1. JPG image 1000x750 pixels, BEST Quality (12) 72 dpi, size 769KB
2. JPG image 1000x750 pixels, Quality (8) 72 dpi, size, 172KB
3. PNG image 1000x750 pixels, 72 dpi, size 1.12MB
4. PNG with PNG transparent icon 500x375 pixels, 72 dpi, size 322KB

5. GIF image 1000x750 pixels, 72 dpi, size 391KB
6. GIF with GIF transparent icon 500x375 pixels, 72 dpi, size 110KB
7. JPG with JPG (not support transparency) icon 500x375 pixels, 72 dpi, size 76.8KB


Last picture - JPG image, quality (8) but with artifacts from upload compression process - look around the numbers and text! For that kind of pictures I recommend PNG format

If you want to convert your pictures on various picture format including JPG, PNG or GIF read more in this DetectorPRO article.




Subscribe to DetectorProDid you enjoy this post? Why not leave a comment below and continue the conversation, or Subscribe to Feed and get articles like this delivered automatically to your Email or feed reader.



Related articles by tags



3 comments:

Anonymous said...

"when I upload to my blog space I get a picture with low quality, high compression and many artifacts" - this is only for Blogger platform. You should write it to your post.

Anyway, thanks for the info, I use Blogger, the post is great!

MarMi said...

Thanks for the info...I use a lot of pictures on my site.
Great research!

Anonymous said...

This tutorial is useful for wordpress blogs also. The method of uploading is the same as blogger (compressed image).