Images & Media

Image File Rules | Bulk/ Batch Images | Media Library | Dimensions & Templates

Image File Rules

Reduce File

Reducing image file size is a high priority! This will help keep your site speed up and hosting storage space down. Before adding any images to your website make sure the file size is low.

  1. Image file sizes should be 100kb or lower (200kb max or else you will see load delay)
  2. Avoid using images provided directly from the photographer, as these are usually high-res for printing (300 dpi). Take those images and reduce the overall dimensions to match the design guide @ 72 dpi.
  3. Be sure to never upload duplicate images into your media library - you can use the same image more than once.
  4. Photoshop Users: make sure your image is set to 72 dpi and matches the design dimensions. Click ‘save images for web’ then reduce the .jpg quality (find a balance with low kb file size but without loosing quality).
It is very important to give your images proper file names. Do not use a random selection of letters and numbers. The name MUST NOT include any !@#$%^&*()| and most importantly no ‘.’ periods (except at the end of the file name). Consider using your focus keyword in your file name or something descriptive that google can search.

Tools to Reduce File Size

  • Web browser: TinyPNG: upload your images and download the new and reduced file. No loss of image will occur - it will just compress the file size.
  • Mac App: ImageOptim: download this app and follow the instructions to drag/drop your images to reduce just the file size.

Tools to Crop Dimensions & Reduce File Size

Free Image Resources

If you do not own quality images, use these websites to find free or paid quality images. Be sure to reduce the file size before uploading to your website.


Paid stock photography, trendy everything


Free photography, trendy everything


Free photography, minimalist

Media Library

To add images to your website, upload your optimized image files to the media library. When you go to insert/add media into an individual post, use these settings:

Alt Text

Write a description for your image in case it does not load. This is also beneficial for SEO (Search Engine Optimization) and users with disabilities.

Attachment Display Settings

Align: center (unless formatting desired) Link to: none (unless custom link desired) Size: full (unless you know what size you want)

Dimensions & Templates

Your theme has been built to use very specific image dimensions (sizes). Follow these guidelines when creating images. Images should be uploaded at the size you want them to appear, to remain crisp and of good resolution.

Want to design images online? Use and setup your own Canva templates to match photo dimensions. Add text, images and create unique layouts to match your brand style guide.

Image Dimension Chart

Create, crop and upload your images to the exact dimensions listed below. The website will crop & scale your image aligned to the center to generate the thumbnail images. Dimensions in pixels (px) @ 72 dpi

Name Description Size wxh
Product Image Appears in the product gallery and as the thumbnail. 1368 x 800
Home Page Slider Image If you find the quality low, double the resolution. 1265 x 628
Home Page Lower Banner Used in the home page lower banner. 1173 x 250
Blog Featured Image Any size and dimension can be used here. Minimum 682 x 404
Download Photoshop Templates