Image File Rules
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.
- Image file sizes should be 100kb or lower (200kb max or else you will see load delay)
- 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.
- Be sure to never upload duplicate images into your media library - you can use the same image more than once.
- 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
- Mac App: QuickScale: download the app to crop your images and reduce file size (see tutorial to bulk/batch image process for a blog post).
- PC AppPhotoscape: see tutorial here.
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
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:
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 Canva.com and setup your own Canva templates to match photo dimensions. Add text, images and create unique layouts to match your brand style guide.