Image Optimization

How to size and optimize images for the website.

Before uploading an image, it should be optimized for the web. 

Avoid uploading images that are high resolution. For example, some images are saved at 300dpi and have a width of over 3000 pixels, resulting in an image size well over 2MB. Images should be saved at lower resolution (72 to 96dpi), and be sized according to how the image is used on the site. Anything larger adds unnecessary load time to the webpage.

First consider how the image will be used. Some images will need to stretch the entire width of the browser window, while others are used at a much smaller size.

For images that will be used fullwidth, the image width should be between 1200px and 1500px wide. 

Keep in mind that an image that is too small will be stretched to fill the space, and may appear distorted.

 

Standard image sizes used on this website:

When uploading images to a News Item, there are two fields available:

1. Homepage Image: 1200px wide (These are used for Success Stories and stretch full width across the top of the story.)
See example: https://pcabhub.org/en-us/news/success-stories/pcab-transforming-lives-1

2. Lead Image: 400px wide (example: https://pcabhub.org/en-us/news/news-highlights/amazon-communities-exchange-knowledge-and-resume-biodiversity-and-monitoring ).

You can use larger images and they will be displayed at the correct size, but this adds unnecessary weight to the page and will add to the page load time.

Images used within the content do not need to be any wider than 850px.

 

There are several free online tools available to help scale and optimize images for the web.

Here are a few:

  1. Kraken.io: https://kraken.io/web-interface
  2. Image Resize.org: https://imageresize.org/
  3. Bulk Resize Photos: https://bulkresizephotos.com/
  4. Compressor.io - https://compressor.io/compress

 

Besides the Homepage and Lead images, additional images can be used in your content. These images can be uploaded to the 'site-images' folder located at the main level of the site.

Inside this folder, there are designated folders for Slideshow and Banner images. There is also a link to the Google drive for PCAB Photo Documentation. 

Label images as best you can, add photo credit, source or owner id. Make sure you have rights to use the image!