Editing Photos for Use in Blog Posts

Photo editing for blog posts (pages too)

  1. Open the original photo in PhotoShop, Affinity Photo or other capable editor:
    1. Photos should be at least as large (pixel dimensions) as they’ll appear in the page or post. You may be able to up-rez a photo slightly, but you’ll always lose sharpness.
  2. Save the photo using a new file name, and keep the original
  3. Rough crop and rotate as necessary, keeping in mind the aspect ratio needed for the final image.
  4. Using adjustment layers, or additional layers, make the following edits:
    1. Adjust the levels (dynamic range)
      1. Method 1: Use the eye dropper tool to set black, white and last, gray. Use your judgement to determine the best balance for the final image.
      2. Method 2: Use the left and right sliders to set the dynamic range to the edges of the histogram. You may also set the gray point with the middle slider if necessary.
    2. Using the Shadows/Highlights tool, bring up the shadow detail. Usually around 15% is adequate. Too much generally looks unnatural. Almost always, highlights should remain unchanged.
    3. Brightness/Contrast: Adjust as necessary, but look out for lost detail–especially on the highlight end.
  5. Set the longest dimension to 800px, unless an exact dimension is required.
  6. Use whatever “save for web” option is available in your editor to create the web-ready version of your photo:
    1. Use .jpg, period. Gif will look horrible, and .png will create a giant file that may also look bad.
    2. Select the level of compression, keeping in mind, #3 below.
    3. Keep files under 100kb unless there is a compelling reason to sacrifice load times (usually there isn’t).
  7. Name the file as specified below.

Optimize and load images

  1. Size images to exact pixel dimensions if:
    1. Image is used for standard features (e.g. 350x350px)
    2. Image is a slider or masthead image
    3. Image is used in any exact format location
  2. Other images should be sized based on:
    1. General images sized to 800px in the longest dimension
    2. Sized and/or cropped to the appropriate aspect ratio (e.g. “WordPress featured image”)
  3. Image file names should contain:
    1. The nearest related target keyword
    2. Depending on use, include dimensions (e.g. feature-image-350×350.jpg)
  4. Image formats:
    1. Photos: .jpg
    2. Logos: 24 bit .png
    3. Simple illustrations with few gradients: 24 bit .png
    4. Infographics: .jpg (in some instances, .png may result in a smaller file)
    5. Complex illustrations and illustrations with many gradients: .jpg
  5. Include image “alt” tag containing focus keyword
  6. Add image title and description to the image entry in the WordPress library