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.
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
|Featured Image||Added to any post or page as the Featured Image. It appears at the large top banner.||1170 x 360|
|Art Rental *||Max dimensions. Inserted as the Product Image.||724 x 467|
|Gallery Image||If you want to create a gallery within your post, crop all images to this size to improve usability. Learn how to bulk edit images.||724 x 467|
|Media Spotlight||Appears at the top left of media spotlight section. Image height is flexible if you would like to customize the size.||566 x 400*|
|Art Crawl Member||Appears at the top left of media spotlight section. Image height is flexible if you would like to customize the size.||566 x 400*|
*Art Rental Images: Since each piece has a unique shape these are just the max dimensions of the image. You can choose to fill the entire suggested space or create an image that is smaller in width or in height. It will always appear on a white background.Download Photoshop Templates
Global Images Folder
A small number of images are hardcoded into your website. These images are pulled from a hosted folder and not the media library. This folder is referred to as the ‘global-images’ folder. If you would like to replace these images with a new one, you will need to upload them via FTP to:
/wp-content/themes/nvcac/global-images/“image-file-name.jpg” *Images must have the exact same dimensions and file name.
How to use a FTP (with Filezilla)
*This will replace files directly on the live website. There is no undo button - these are permanent changes to the website. Do not load any new files - only replace image files that exist.
**Images must have the exact same dimensions and file name or else you risk causing damage to the website.
- Download and install an FTP client. We recommend Filezilla (download here).
- Enter the host (aka: server address), username, password and port in the ‘Quick Connect’ area. If you are trying to connect to an sftp then you need to add 'sftp://' at the start of the host name.
- Once connected, you will see files appear in the ‘Remote site’ box. These are the current image files on your website. You can right click to download a file to your computer (It will be saved in the destination you have set in the ‘local site’ box.
- On your computer, edit your images as needed or create new ones. Images must match the exact file name and dimensions of the original.
- Drag-n-drop your new image files into the ‘Remote site’ box area.
- A dialogue (pop-up) box will appear. Choose to ‘Overwrite’ and click ok.
- Your image file has now been replaced.