JPG is NOT the Answer for All Web Graphics

July 23, 2009

There was someone who often promoted themselves as an expert in CorelDRAW and still claims to be a guru in the world of graphics. Yet this person has often made a horrendous mistake with the main banner on their Web site. It isn’t because they don’t know better as numerous people have pointed out the problem and yet it still exists to this day. I’ll let the offender remain nameless, but I’ll show you an example similar to what is on their site so you can avoid the problem.

For some Web graphics, JPG is the best answer. But it is not the answer for all graphics. In fact, it is a horrible answer for the type of graphic being discussed today. JPG is great for graphics with a large number of colors like photos. GIF or PNG is better for graphics with a limited number of colors.

Look carefully at the images above. Which one looks best to you? Go ahead, make a choice.

One of the images is 10.5 KB and the other is 3.73 KB. Guess what, the graphic that looks best is the smaller file! Hopefully you all guessed that the top image looks the best. It is a GIF file saved with 32 colors. The bottom graphic is a JPG saved at a compression level of 25 using 4:4:4 Sub format. I could have used less compression and it would have looked better. But that would have only made the JPG file larger.

Maybe some of you didn’t see how bad the JPG looked. Below you will see the upper left of the letter “S” zoomed in to 400%.

Notice all the blotchiness? That is what JPG compression does to an image. Some of you will say to reduce the compression used for the JPG file, but that will only make the file larger and it is already three times as large as the GIF file. I’m not going to supply a zoomed in version of the GIF file since there really isn’t anything to see. There is no blotchiness at all.

So before you save graphics for the Web, make sure you understand the pros and cons of each file format. Those who believe JPG is always the best answer are in for a rude surprise when dealing with graphics containing a limited number of colors. Not only does it look bad, it makes large files. It can also show your clients that you aren’t the right designer for the job.

For those who want to learn more about creating Web graphics with CorelDRAW and Corel PHOTO-PAINT, there is a wealth of information in my CorelDRAW X4 Unleashed book.

Post Discussion

2 Comments

  1. Fluid

    Excellent info everyone should know yet only a few do.

    Reply
  2. kostum anak

    How about X6? please share to me.. 🙁

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like…

Ransomware Attacks

Tips to Protect Yourself From a Ransomware Attack

Ransomware has been all over the news recently. First it shut down an important pipeline on the East Coast of the US and then meat processing plants. Criminals have been hitting these high-profile targets because they often lead to huge paydays. Big companies often...

View Full Post
Lori Greiner Addresses The Coronavirus Crisis

The Sharks Address The Coronavirus Crisis

I've been a fan of the Shark Tank television show since the first season. Some of the companies presenting have turned into huge hits and some of them seem like crazy ideas. Along the way there are tidbits of business advice. In a recent episode, they included a short...

View Full Post

Foster D. Coburn III

Foster D. Coburn III built his first Web site in 1995 and he has been working exclusively in WordPress since 2013. He has used the Divi theme exclusively since 2015. Earlier in his career he was the author of 13 best-selling books on CorelDRAW and has been a contributor to numerous technology and graphics-related magazines. Foster has taken many projects, including this Web site, from the early design stage through to a finished piece. He has been a featured speaker at many graphics conferences.

Recent Posts

Web Design Blog

    Feed has no items.
Build Divi WordPress Site
WordPress Site Care
Divi Tools
Graphics Unleashed Logo