Here’s our “generic” instructions for preparing an image and adding it to a post or page in your WordPress website.  Every website has different requirements and there exceptions to every rule.  But for photos especially this is what most people do most of the time.

Preparing an image before uploading.

• Open the image in your favorite photo editor
• If the editor lets you, change the resolution to 72 dots per inch
• Scale the image so the longest dimension is 1600 pixels.
  You can use smaller sizes if you’re sure the image won’t be used to fill a page, but ordinarily don’t go smaller than 400 px for the smallest dimension.
• Save the image as a JPEG
  Especially for photos the .jpg or .jpeg file format still offers the best balance between image size and image quality.
• When it asks you what quality to save the image as (usually 1-10 or 0-100%) choose the lowest number that still gives you acceptable image quality.
  Most photo editors let you preview this, better ones will show you the resulting file size too.
  The larger the file the higher the quality, but also the slower to load, especially on mobile devices.
• Choose a descriptive file name
  It’ll be easier to find the image later if you call it “chris-the-manager.jpg” than if you call it “IMG0776.jpg.”  If that’s not enough of a reason then Google includes filenames in its search engine rankings.

Placing an image in a post or page:  Important stuff in black, additional info in blue

• In the post/page editor place the blinking cursor in the spot you’d like the image to appear
• Click the Add Media button
  
• Drag the image from your desktop or a folder and drop it in the Insert Media popup
  When the image is done uploading and crunching you’ll see an “Attachment Details” sidebar on the right of the Insert Media popup
• Option: type a caption in the Caption box
• Not an option: Type a brief alternative description in the Alt Text box
  Unless the image is purely decorative always type a brief alternative description in the Alt Text box.  This is an ADA/W3C requirement
  This is what people with visual impairments and/or lousy internet connections will get instead of the photo so it’s a good idea to use a complete sentence or phrase
• Option: If you’d like the text to flow around the photo (if it’s a small photo) choose Left or Right from the Alignment box
• Option: In most cases choose “None” for the “Link To” box
• Choose the image size that will work best on the post or page
• Click “Insert into Post”

Ok, that’s all the steps in possibly excruciating detail. 

Leave a comment if you’ve got a question about preparing an image or placing it in a post or page.