JPG or PNG? How to Optimize Images for Web

How to choose the best format for your image.

We are visual creatures. Whether we’re reading an article, having our eye caught by banner advertising, or absent-mindedly scrolling through our Facebook feed, an attractive image makes us pause. According to Hubspot, image posts are 80% more effective at getting clicks than simple text and link posts.

You probably already know that the right image goes a long way. What you might not know is that the image format you use can impact how well it’s displayed.

The two main image formats – JPG and PNG – are designed to show the strengths of particular styles of images. Getting it right improves the quality of your post. Here’s how to work out which format is going to make your image stand out at its best.

JPG

JPEGs are for photographs and realistic images. They’re usually relatively small in size while still looking crisp and beautiful. You should use JPEGs when photography takes up the bulk of the image with a small amount of text and/or graphics.

How to Save as JPG:

In Photoshop

  1. File > Save for the Web
  2. Select Preset: JPEG High\
  3. Leave quality at 60. If the image does not have text, you can lower quality to 50.
  4. Hit SAVE and name your file all in lowercase and with underscores – e.g. greatimage_banner.jpg
  5. Go to TinyJPG and Drop / Upload your JPG file. Once it has been compressed, download your file. You can overwrite the file you uploaded.
  6. Your new compressed JPG file is ready to use.

PNG

PNGs are for line art, text-heavy images, and images with few colours. They produce crisp text and linework and are perfect for small or large banners that contain graphics and text.

How to Save as PNG

In Photoshop

  1. File > Save for the Web
  2. Select Preset: PNG24
  3. Untick Transparency, if there are no transparent areas
  4. Hit SAVE and name your file all in lowercase and with underscores – e.g. greatimage_banner.png
  5. Go to TinyPNG and Drop / Upload your JPG file. Once it has been compressed, download your file. You can overwrite the file you uploaded. You can cut file size by up to 80%
  6. Your new compressed file is ready to use.

0 Comment

Leave Comment