Photo editing for blog posts (pages too)
- Open the original photo in PhotoShop, Affinity Photo or other capable editor:
- 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.
- Save the photo using a new file name, and keep the original
- Rough crop and rotate as necessary, keeping in mind the aspect ratio needed for the final image.
- Using adjustment layers, or additional layers, make the following edits:
- Adjust the levels (dynamic range)
- 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.
- 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.
- 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.
- Brightness/Contrast: Adjust as necessary, but look out for lost detail–especially on the highlight end.
- Adjust the levels (dynamic range)
- Set the longest dimension to 800px, unless an exact dimension is required.
- Use whatever “save for web” option is available in your editor to create the web-ready version of your photo:
- Use .jpg, period. Gif will look horrible, and .png will create a giant file that may also look bad.
- Select the level of compression, keeping in mind, #3 below.
- Keep files under 100kb unless there is a compelling reason to sacrifice load times (usually there isn’t).
- Name the file as specified below.
Optimize and load images
- Size images to exact pixel dimensions if:
- Image is used for standard features (e.g. 350x350px)
- Image is a slider or masthead image
- Image is used in any exact format location
- Other images should be sized based on:
- General images sized to 800px in the longest dimension
- Sized and/or cropped to the appropriate aspect ratio (e.g. “WordPress featured image”)
- Image file names should contain:
- The nearest related target keyword
- Depending on use, include dimensions (e.g. feature-image-350×350.jpg)
- Image formats:
- Photos: .jpg
- Logos: 24 bit .png
- Simple illustrations with few gradients: 24 bit .png
- Infographics: .jpg (in some instances, .png may result in a smaller file)
- Complex illustrations and illustrations with many gradients: .jpg
- Include image “alt” tag containing focus keyword
- Add image title and description to the image entry in the WordPress library