September 18, 2018

Saving Images for the Web: Part 1

For Photographers

Why Saving Image for the Web is Important

SEO & Speed Purposes

Being a photographer means you wear a lot of hats in your business: web developer, editor, software debugger. The one I see people struggle the most with is  saving images for the web. Saving for the web has a tremendous affect on your site ranking and overall user experience of your website. Typically, it’s best your website be lightweight (<2mb) and that it loads in less than two seconds. Research also shows that for every second a user has to wait, the higher your bounce rate becomes.

Tools Needed

This tutorial is meant to be easy, while I opt for using advanced graphic managers like ImageMagick, we will be using a simple set of drag and drop tools as well as Photoshop and Lightroom.

ImageOptim (Web Version)

-Photoshop or Lightroom

Understanding Resolutions

When we as photographers use cameras, we produce large JPEGs, often 3 to 4 times the size needed for viewing on the web. So what is resolution? resolution is the overall pixel density of an image. There are 3 factors that determine this: PPI, Width, and Height. today we are going to be talking about Width x Height. See below the example in Photoshop (Image Tab>Image Size).


As we see above, his image is 4912×6549 pixels. We would want to shrink this image significantly to prepare it for the web. Let’s say I wanted to make this image 1500px tall for a blog featured image, we would simple change 6549 to 1500, and the 4912 would automatically update to preserve the aspect ratio.

 Re-saving

Now that we have changed the resolution, we will want to save the image at a a good compression size. To do this, we head to File>Save>and the select the appropriate number for compression. I typically set this to 7.

Using Image Optim Online

Image Optim is a powerful engine that simply deletes all the exif data as well as compress the image further. Simply navigate to https://imageoptim.com/online and upload the image from the place where it is saved. You will receive a download of the optimized image.


Let’s take a look at the file sizes of each.

Our original files size was 105KB, using imageoptim we were able to save 23KB of space. Let’s look at the end result for comparison of the quality of each.

comparison-of-image-quality

A quick note: While compressing your images there’s a line as a photographer as you must decide to cross or not. We have to decide how much image quality we are willing to sacrifice to make search engines happy, and how much image quality we need to keep so our clients still see our quality of work.

Stay tuned for part 2, and let me know if you have any questions in the comments below. I will also be doing a more advanced tutorial utilizing ImageMagick.

ADD A COMMENT
LOOKBOOK