Compressed files decreases the load time for pages on mobile and in rural areas. Please use the following resources to compress your images and documents before uploading them into the media library.
| Image Type | Size (all dimensions are in pixels) | Block Type Typically Used |
|---|---|---|
| Hero | 1920 wide x 600 tall | Site Customizer |
| Smart Slider Images | 1200 wide x 800 tall* | Smart Slider Plugin |
| Headshots / Vertical Images | 480 wide x 720 tall | Image-Media Block |
| Horizontal Page Images (example) | 720 wide x 480 tall | Image, Image-Media |
| Featured Image (News) | 900 wide x 600 tall | Blog Posts / News Feeds |
*Please note, some Smart Slider templates require a different size image. Please check your template before uploading the image.
CANTO: How to Crop, Resize, and Compress an Image
Step 1:
- Find the image you want
- Click the download icon in the top left corner
Step 2:
- Choose what you want to do to the image
- Crop is removing part of the image
- Resize is keeping everything in the image but making the picture a different size
- Compression is keeping the whole image but shrinking down the file size
Step 3:
- Crop can be done freeform (you choose the dimensions)
- Or with a preset ratio option
- You can also use the W H size options to type in the dimensions you want the image while in Freeform
Step 4:
- Resizing can be done by typing in the dimensions you want into the Width and Height sections.
- If you want to keep the aspect ratio, click the lock icon to “lock” in the ratio of the picture
- Please use the size guide above to know what dimensions to set your images
Step 5:
- Compression can be done by adjusting the quality percentage bar and DPI number and reducing it to the required size / pixel quality.
- Most online resources agree that the average DPI for an image on the web is 72
- Please note there is a fine line between compressed and “grainy” from adjusting the number of pixels.
Step 6:
- When you are done with your image, you can download it by selecting the download button in the bottom right corner
WINDOWS: How to Crop and Resize an Image
Step 1:
- Find the image you want to use (either on your desktop, Canto, SmugMug, etc.)
- Download the image if needed
Step 2:
- Open the image by double clicking within your file explorer in Windows Photos
- Select the three dots at the top and click “Resize Image”
Step 3:
- To crop an image, select the photo and pen icon on the top left
- Crop can be done freeform (you choose the dimensions)
- Or with a preset ratio option
Step 4:
- From here, you can put in the dimensions you want the image to become.
- Resizing can be done by typing in the dimensions you want into the Width and Height sections.
- If you want to keep the aspect ratio, click the lock icon to “lock” in the ratio of the picture
- Please use the size guide above to know what dimensions to set your images
Step 5:
- Take your resized image and put it into the Image Compressor of your choice.
- I like Optimizilla at https://imagecompressor.com/ but you can use whatever compressor you want.
- Download the compressed image.