Improve Your Website’s Performance With These Photo Optimization Tips

Much has been written lately about slow page loading times on news websites. People are increasingly consuming news on mobile devices, often with limited bandwidth.

Earlier this year, Google announced that they now use "mobile-friendliness" as a ranking signal in mobile search results and even adding an extra second or two of load time has been shown to increase abandonment rates on websites.

Sites that aren't optimizing for performance on all devices and connection speeds are limiting their own audience growth. Every time someone can't find your site or they're too impatient to wait for a page to load, you're losing a potential reader.

Fortunately, the INN Nerds aren't content to just complain about it, we're here to help fix it!

Let's Start with Photos

The average web page now weighs in at just under 2 MB, and images are the main culprit. Photos on the web are essential elements of storytelling and connecting with your audience. But if your photos aren’t optimized, they can also weigh down your web pages and make them slow to load. To improve the overall performance of your website, photo optimization is a great place to start.

What is Photo Optimization

Photo optimization involves compressing the file size of photo using a tool like Adobe Photoshop. We want the highest quality photo with the smallest possible file size. Too much compression can impair the quality of the image. Too little compression can result in a large photo file size which slows the performance of our web page. Optimization is finding the right balance between quality and file size.

Consider these two images:

Photo of Delicate Arch
Not Optimized. Width: 1200px, Height: 800px, File Size: 939 Kilobytes
Delicate Arch in Arches National Park
Optimized. Width: 1200px, Height: 800px, File Size: 107 Kilobytes

The second photo has a file size of less than 12 percent of the first. You can probably see a slight degradation in the photo quality. But most people would not notice the difference between these two on a web page.

On the web we should never use any photo with a file size like 939 Kilobytes. This will slow the loading of the page, especially on slower connections and mobile devices. We want to keep website photos under 100 KB if we can, and much lower for smaller images. For example, here’s the same photo reduced in dimensions:

Delicate Archive in Arches National Park
Not Optimized. Width: 300px, Height: 200px, File Size: 192 Kilobytes
Delicate Arch in Arches National Park
Optimized. Width: 300px, Height: 200px, File Size: 14 Kilobytes

The file size of the second photo is less that 10 percent of the first image, yet most people would see no difference in photo quality. If you have a web page displaying a number of similar-sized images, for example a gallery page or a series of stories with thumbnail images, smaller photo file sizes can add up a huge reduction in page loading time.

How to Optimize Photos in Photoshop

Best practice for optimization is to start with the highest-quality source photo, then resize and compress it for the web. Start by cropping and resizing the photo for the space it will fill on your web page. If the photo will be displayed in a sidebar widget that’s 300px wide, there’s no reason to upload a photo wider than 300px for that space. Reducing the size of the photo by itself will reduce its file size.

After the photo is cropped and sized, in the File menu go to Export -> Save for Web:

Save for Web dialogue box in Photoshop

Here you can select which photo format to export (always use JPEG for photos), and how much compression to apply. Medium is often the optimum setting, but this is a judgement call. If you don’t see a preview of both the Original photo and the JPEG export, click the 2-Up tab at the top. Now you can try different compression settings and see a preview of the results, including the file size:

Optimized image in Save for Web dialogue in Photoshop

Once you're happy with the image quality and file size reduction, click Save to create your web-optimized photo. This will not affect your original image, which should be archived for possible use in the future.

More Tutorials on Photoshop's Save for Web

You can of course find lots of great Photoshop tutorials online.

Here’s a video from Lynda.com that explains how to use Save for Web in Photoshop.

Here’s another really good tutorial on Photoshop’s Save For Web that walks through the process.

Tip: If you like keyboard shortcuts, in Photoshop you can launch Save for Web like this:

  • Command + Shift + Option + s (Mac)
  • Control + Shift + Alt + s (Windows)

Optimizing Photos without Photoshop

If you don’t use Photoshop, there are any number of other tools for optimizing website images.

Compressor.io is a free online tool. You can drag and drop a source photo into it, and download a compressed version of the image. Compressor.io doesn’t have any cropping or resizing tools, and you can’t adjust the amount of compression. In our tests, Photoshop does a better job of balancing photo quality and file size. But if you have a photo sized correctly for your website, it’ll do in a pinch.

If you're comfortable using the command line, there are a number of tools available to you for optimizing different image types.

Your Photo Workflow

If you've produced photos for print, you know it's important to maintain the highest quality photo throughout the process. But with today's cameras, the highest quality photo is likely to be 5000 pixels wide, and more than 20 Megabytes in file size. Such a photo is great for print, but a problem on the web.

Best practice is to safely store the original photo files in their highest resolution, for the day when you need to resize or reuse them in another context. Use the original photos to crop, size, and export for the web, then keep the originals safe for future use.

Help Improve Our Docs

If you have some favorite tips or tricks for dealing with photos online, or would like to suggest other tools and resources, please leave a comment here!

Data Visualization and Photo Resources For Your Visual Journalism Toolkit

Improving the visuals on your site can have a dramatic difference in how your stories are received and how they spread, but we find that many INN members do not have photographers on staff or the budget to invest in complex data-driven news applications and visualizations.

One of our goals with Largo, the open source WordPress framework we've developed for INN members, is to make it much easier for members to have websites that look as good and function as well as the best for-profit and larger non-profit publishers.

This summer we're planning to do some work on making it easier to tell stories visually in Largo and as part of that process we wanted to do a survey of tools that members are already using in the hopes that we can identify some best practices and develop tools, resources and training to make it easy as possible to integrate them with your website.

Our goal is to help journalists to use data and other visual elements to enhance their investigations and storytelling.

A quick side-note: if you use Largo and/or are interested in helping us to figure out how to improve the framework and build tools to support your data and visual storytelling, we're putting together a working group to help us define the work we need to do to make your lives easier. Please drop us a line if you're willing to help us out this summer as we work through this process.

Here are some of the tools we've found so far that may end up as part of the toolkit that we recommend to our members and other journalists.

For quick, basic plots

Check out Visualizer, a WordPress plugin, and Datawrapper, an open-source tool that will provide you code to embed visualizations in your posts. Both tools have the basic types of visualizations (pie chart, bar graph, scatterplot, map, etc.) which you can create by importing a CSV or Excel file. Both are also easy to use, even if you're not very tech savvy and they incorporate some nice default design patterns.

Choose Visualizer if you would like to work with a WordPress plugin or Datawrapper if you don’t mind working with embedded code.

Another great tool for simple charts is ChartBuilder, an open source tool developed by Quartz. This tool allows you to create simple charts and then either copy the html for the chart or export it as an image to use in your stories.

For the data ninja

If you have complex data or want to showcase your data in ways other than with simple graphs and charts, spend some time with tools such as StoryMapJS, TimelineJS, Vis, or Kumu - which are all already compatible with WordPress/Largo by using an embed code (usually an iframe) within your stories.

As their names imply, StoryMapJS and TimelineJS help you create maps and timelines, respectively, to illustrate your data through space and time. Both were developed by the Knight Lab at Northwestern University so they're both designed with journalism applications in mind.

For network and relationship data, there is Vis and Kumu. Both tools are interactive and flexible and easy to use and Vis was designed particularly with journalists in mind.

For the code-savvy

Many of our members do not have an in-house developer, but for those team members interested in learning to code and to use one of the hottest data visualization tools today, you might want to try the d3.js WordPress plugin, Wp-D3.

With D3 you can create any type of visualization you can possibly imagine and make it interactive, too. You might also want to check out NVD3, which also has a WordPress plugin. The developers of this tool were inspired by D3 to create re-usable visualizations.

Recommendations from members

We also heard from some INN member organizations about a few other data visualization tools they like to use.

Canva.com  is great, free, way to make infographics. I've used it to create a graphic on a health care report card. It took about 10 minutes. I'm playing with it to make a customized NCHN template for when I have data like bar charts or graphs (make the bar chart background transparent in photoshop and drop it on the template background. (Rose Hoban, North Carolina Health News)

Another one that's extremely easy to use  for infographics is http://infogr.am. They have many templates to choose from. It's free also but to remove their branding and attach your logo you have to upgrade and pay a little monthly fee.  (Jeremy Chapman, Montana Center for Investigative Reporting)

http://piktochart.com/ has more flexibility than Infogr.am and the professional account is just $40 a year for nonprofits. I like Infogr.am for straightforward graphics; Piktochart for everything else. (Pam Dempsey, Midwest Center for Investigative Reporting)

Photo resources

It can also be difficult to find photos to use if you don't have a photographer on your staff or freelance budget to create original photography to go with your stories. Here are some photo resources members recommended if you need to find photos that are free to use.

Getty Images allows many of its photos to be embedded. (Jason Alcorn, Investigate West) They've got gorgeous photos. It doesn't work all the time, but when it does it's a great money saver. (Diane Schemo, 100 Reporters)

Another good source for stock photography is Free Images (formerly Stock.xchng) and you can search Creative Commons images from various sources here: http://search.creativecommons.org/(Trevor Aaronson, Florida Center for Investigative Reporting)

I love using U.S. government images, which almost never have copyright or licensing requirements. The portal I go through is here, which will also get you to state photo archive pages.  You'll find subject and agency links there. (Naomi Schalit, Pine Tree Watchdog)

The Library of Congress has a nice collection of digital images you can browse. Useful for historical photos or #TBT. Most of the images are free to use but check the copyrights to be sure (Pam Dempsey, Midwest Center for Investigative Reporting)

Many Flickr users share their photos under a Creative Commons license, which allows anyone to use those photos under certain conditions (have to attribute, no derivative works, and non-commercial use only are the main three). Use Flickr advanced search to search only Creative Commons-licensed photos then look at individual photos to check for any of those conditions. No pre-clearance from photographers required. (Jason Alcorn, Investigate West)

Flickr also has this site called "The Commons" which includes a repository of public photography from all over the world. (Luis Gomez, INN)

Your suggestions

We hope you found some new tools and resources in the list above to help with your work. Let us know if you have other tools or resources for visual journalism that you would recommend to other INN members!