Adding Images & Best Practices

It is very important to upload images that are the proper size/dimensions and resolution for your website. Trying to put a rectangular image in a space designed for a square will result in a distorted image. Uploading a raw image from your phone will slow down your site and put site performance at risk. If you do not have Photoshop (or Photoshop Elements), you can use a free service such as Canva or PicMonkey, which will help you crop your images and optimize them to the correct resolution for the web (72dpi). For information on how to format and crop images using the free Canva tool, you can watch this video. Check the Website Instruction for Image Sizes for the custom sizes for your website. Your photos are a showcase for your website – if they don’t look good, your site won’t look good!

1. Upload images via Media > Add New.
2. Make sure your image has a relevant title so it is easier to find in the library later
3. Add Alt Text: This is a short description of the image for screen readers. When your image is uploaded, in the Media Library popup:
   1. Select or upload your image.
   2. On the right-hand side panel, you’ll see the Alternative Text field. Enter your alt text here.
   3. Click Select Photo → Save. Alt text serves three key purposes:
      1. Accessibility: Screen readers describe images to visually impaired users.
      2. SEO: Search engines index alt text to understand image content.
      3. Fallback Content: Displays when images fail to load.
      Examples of good alt text:
      1. 1. Student presenting a science fair project about renewable energy.
         2. Bar chart comparing tuition rates across five schools.
         3. Dr. Sarah Lopez, Head of Science Department.
      What to avoid when writing alt text:
      • • Avoid “Image of” or “Picture of” (Screen readers already announce it’s an image.)
        • Use Keywords Naturally (Don’t stuff them in or use them without relevance to the image
      Pro Tip: Use optimized image sizes to keep your site fast and visually consistent. An optimization plugin like ShortPixel or Imagify will automatically optimize images when you add them. There is a limit to how many images it will optimize for free.