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…

Tech News Digest Graphics Unleashed

Tech News Digest for November 22, 2024

Amazon Echo Show, AI Granny, Salt Typhoon, eye color, Android 16, data cables sabotaged, Nomad eSIM, Tesla Model Y and phantom island. We have started our Black Friday sale and I’ve gotten a number of emails from other companies about their sales. I have no...

View Full Post
Tech News Digest Graphics Unleashed

Tech News Digest for November 15, 2024

Apple reviews, headphones, cat question, stress, scurvy, Windows 11 24H2, You’ve got mail, iPhone 17, Volvo EX30 and dog licks. If you are thinking about getting one of the new Macs, you’ll find several reviews to aid in your decision. There were plenty of...

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

Build Divi WordPress Site
WordPress Site Care
Divi Tools
Graphics Unleashed Logo