JPG or PNG? How to Optimise Images for Web

Wednesday, June 3, 2015 | By atomix
Sydney Swans Ipad design

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.

 

Examples:

JPG Sydney Swans PostJPG of PNG Sydney Swans Post

 

How to Save as JPG:

In Photoshop

  1. File > Export > Save for the Web (Legacy)
  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. 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.

 

Examples:

JPG of PNG Sydney Swans Post swans-jpg-of-png-angle

 

How to Save as PNG

In Photoshop

  1. File > Export > Save for the Web (Legacy)
  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.

 

Don’t have Photoshop?

If you regularly need to resize images or make small adjustments to their appearance but can’t justify purchasing Adobe Photoshop, Adobe Photoshop Elements is a great alternative.

Its photo editing options are easy to use and it’s affordable.

If you rarely need to resize images, you could use a website like Reduce Images, which will reduce the size of the file, but could also affect the quality of the image.

 

How to know an image’s size before downloading

If you’d like to avoid the process of resizing images altogether, it helps to know what size an image is before you download it to your drive. You can easily find the size of image by using Inspect.

  1. View the image URL in your web browser.
  2. Place your cursor over the image, and right-click (PC) or Ctrl-click (Mac).
  3. If you’re using:
  • Internet Explorer –  Choose Properties.
  • Firefox – Choose View Image Info.
  • Safari – Choose Inspect Element and then click on Images on the left-hand side. Click on  the image and view the properties in the Styles section on the right-hand side.
    Note: Safari doesn’t display the image file size, but you can typically Ctrl-click to save the image and view the properties.
  • Chrome – You’ll have to have install an app that lets you view the properties within the browser.
  1. Locate the “Size” line that shows the image’s file size and the “Dimensions” line to see the height and width in pixels.