Good Image Processing (pt.2) Editing & Saving for Web.

Next Post

In this second part of my series on the pitfalls of pixels I will be discussing how quality setting and ‘save for web’ matters to you and explaining the elusive DPI and how it factors into your online images.


Save for Web & Quality.

Welcome to the second part of my discussion on good image processing practices for website owners.

Many modern image processing programs will allow you to crop or resize your images to ideal proportions but equally (if not more so) useful is the ‘Save for Web’ or ‘Image Quality’ options you can apply on saving the image.

If you don’t have access to Photoshop (yes it’s the industry leader but we also know it can seem very expensive for the small business who only want to save the odd image) you can try using a free image editor… more on that later.

File format

Choosing the right file format can be really important for the overall weight of an image. There are two general rules for images.

 

  • If the image is mostly or wholly photographic (i.e. a picture of the real world with lots of colours, a picture of a person for example) use the jpeg file format. It is designed to take complex images and reduce their file size intelligently; however areas of plain colours can become distorted and speckled at lower qualities.

  • If the image is flat (i.e. mostly areas of single colour) use .png or .gif files, they save on file size by intelligently recording areas of flat colour without loss of detail.

Physical Image and DPI Resize

The best way to uniformly resize your images without cropping or distorting the image is with the Resize option.

Most resizing tools will be readily accessible from the edit menu of the software and will give you options to define you image by different measurements. For the web it's mostly useful to use pixels as your method of measurement (1 pixel = 1 individual dot on your monitor).

Many resizing tools will give you the option to maintain 'Aspect Ratio'. This means that if you reduce an image by 20pixels in width that the height is automatically reduce proportionally so that the image does not become stretched and distorted.

Example:

You have a high resolution image (1.2Mb, 1550x1550pixel, 400DPI) you want on your site and it’s obviously too wide, tall and heavy for your site (you don’t want to transfer 1.2Mb of image every time a visitor views the page on your site). Your site developer tells you that 250px wide is ideal to maintain consistency across your inline images.

  • You select the “Resize” option in your image editor
  • Select “Maintain Aspect Ratio”
  • Edit the 1550pixel width down to 250px
  • You see that height also automatically is reduced to 250px
  • Edit the DPI to be 72dpi
  • You see the original file size of 1.2Mb and an estimation that the new size of just 244Kb (1/5th the size of the original)

Don’t want to change the width and height? No problem. Just alter the resolution down to 72DPI and hopefully you'll see the file size plummet.

Of course experienced image editors will point out that 244Kb is still likely to be unnecessarily large for an inline image on a website. In my next blog I’ll cover Quality (aka ‘Save for Web’ algorithms) and file formats that will have a big impact on the final file you save and use to show the world.

Below is an example of an image resize in progress:

image resie in progress

• The first image shows the original images details before alterations. You can see it is 1.2Mb in size 550pixels wide and tall with a DPI resolution of 396 (much higher than the 72dpi needed for the internet).

• The second image shows after typing 250 into the width box (to shrink the image to 250pixels wide) the height automatically sets to 250 pixels too because the “Maintain aspect ratio” option is checked. I also altered the resolution down to 72dpi. 

Note the “New size” label at the top shows the resized image will be 244.1Kb in weight compared to the 1.2Mb that it was originally. We’ll get that file size down even more with Quality options when we save out the image.

Don’t want to change the size? No problem. Leave the width and height alone and just alter the resolution to 72DPI and see the file size plummet.

 

Part 3 continues with Quality Optimisation.


By Alanna at 26 May 2014, 13:34 PM