Introduction
This article covers the technical basics of preparing photos for your WordPress-powered website for optimal performance, unified look/brand, and clarity.
The Solution
Photography Themes
If you know a thing or two about Photography, then you know quality is of the utmost importance. However, speed and presentation are also important. While our themes cannot predict how every photo will look in the various layouts offered, it does attempt to improve page load through predefined dimensions for widgets, previews and index templates. WordPress creates a number of copies of your photos on upload at different scale or crops, which are then grabbed by the template to ensure the smallest or most efficient image file is loaded.
The following tips will help strike a good balance between quality and performance:
- Always optimize photos through a batch-conversion or image-editing program such as Photoshop or Lightroom prior to putting them on the web. Optimization can be as simple as resizing the photo to no larger than 2000 pixels on the longest side, and saving it as a copy at a web-friendly compression rate (typically an “8” in Photoshop or 80% compression).
- Edit the Image Information in your photo editing software to add author, location and copyright information, if desired.
- Never purposely remove exif data from your photos. By keeping EXIF intact, you help fledgeling photographers grow their skills and also boost your professionalism.
- Always save or convert photos to the jpg format and save them using a lower-case extension.
- Give your photos semantic file names. For example, horses-on-mountain_john-smith.jpg has a lot more SEO value than IMG435657.jpg. Semantic filenames help you find photos easier using the media library search function, and make file maintenance on your computer easier, too.
- Upload images directly to the albums/posts they belong to, and fill in the “Title,” “Alt Text,” and “Description.” These values not only make your photos look better-maintained when viewed in lightboxes or browser plugins, but aid in SEO and accessibility.
- Use the Regenerate Thumbnails plugin to optimize images that already exist in your Media Library if installing a new theme.
eCommerce Themes
The two most important factors for achieving a visually stunning and professional-looking online store is image quality and consistency. Like Photography sites, performance is also key, especially since eCommerce sites attract more mobile traffic.
In addition to the set of image copies WordPress generates on upload, WooCommerce also creates a set, which are defined by the dimensions you set in WooCommerce settings. Before loading any image content into WordPress, or configuring the site with existing content, be sure to review your theme’s image size information in the Quick Start Guide and recommended WooCommerce settings, both available in your Theme’s setup documentation.
The following tips will help strike a good balance between quality and performance:
- Ensure the subject, model or important bits of the product are centered in the photo, with ample space around the edges. This ensures the product is always represented well in any orientation, crop or photo size.
- If taking your own clothing shots, do not use fancy filters or allow your models to cross their arms or hide parts of the item as this can lead to misrepresentation of color, fit or detail which frustrates your customers. If using editorial shots with filters as featured images for aesthetic reasons, always include at least one clear image of the item in your product gallery that features a neautral white balance and no filter.
- Use the Regenerate Thumbnails plugin to optimize images that already exist in your Media Library if installing a new theme, or if you have changed your WooCommerce image size settings.
- Always optimize photos through a batch-conversion or image-editing program such as Photoshop or Gimp (free app) prior to putting them on the web. Optimization can be as simple as resizing the photo to no larger than 1000 pixels on the longest side (or 1920px for slider backgrounds), and saving it as a copy at a web-friendly compression rate (typically an “8” in Photoshop or 80% compression).
- Give your photos semantic file names. For example, silk-stripe-jumper_SS2014.jpg has a lot more SEO value than IMG435657.jpg. Semantic filenames help you find photos easier using the media library search function, and make file maintenance on your computer easier, too.
- Upload images directly to the products galleries they belong to, and fill in the “Title,” “Alt Text,” and “Description.” These values not only make your photos look better-maintained when viewed in lightboxes or browser plugins, but aid in SEO and accessibility.
For more tips on choosing the best stock or getting the hang of great art direction for your catalog, see the following for excellent tips on consistency, style and filtering when taking your own shop photos or working with a photographer.