As a Senior Project Manager specializing in Sitecore implementations, I have a front-row view not only of team successes but also of their struggles. Image set-up and formatting create issues more often than you might expect. Here’s what I’ve learned works best for images intended for use on CMS-driven websites, as well as the broader, omnichannel possibilities presented by DAM platforms.
RECOMMENDATIONS FOR IMAGE FILE FORMATS AND SETTINGS
For a CMS website, all photos should be saved as “.jpg” files unless transparency is required. This will provide the best resolution for richly detailed photos while managing to compress the file size to a manageable size.
SELECTING YOUR IMAGE FORMAT: JPG vs PNG
JPG - We recommend JPG compression since it tends to offer the best results in the quality to compression ratio for full color photos. GIF files are sometimes best when compressing line art or illustrations, or artwork that consists of only a few colors, such as logos. Gradients and multiple colors do not always compress well as a GIF.
PNG - PNG files are sometimes used when sophisticated transparency is required. This compression does not tend to reduce the file size as much as JPG. It is also not consistently supported in older browsers, so its use is generally on an as need basis, primarily to achieve clean, soft edges around transparent elements. The photos outlined in the document should always be JPGs since that is going to achieve the best results most of the time and will help to reduce the number of file formats that the media manager needs to contend with.
GENERAL CONSIDERATIONS REGARDING IMAGE COMPRESSION
The primary goal in compressing the images is to get the file size as small as possible while maintaining the integrity and acceptable quality of each image. To this point, settings may need to vary from photo to photo to achieve this. For example, one photo may not have a lot of detail, but when saving for web, there may be considerable noise and color banding created during the compression action. In this case, a higher setting is best. In other instances, the compression will be more forgiving due to the image content masking any noise or artifacts of the compression process.
SIZING AND SCALING YOUR IMAGES
As a rough default, we recommend beginning with ~65-75% compression for images, depending on visual review. If "MB" appears after a file size, you've gone too far. If images are not being saved out by an experienced production designer, a default 70% compression will be a good starting point. A few additional tips:
- Photoshop is recommended for output of the images using the “Save for Web” function. This will provide an accurate preview of what the final image will look like and allow you to adjust several settings to obtain an optimal quality to compression ratio. Other tools are acceptable for this process, if preferred, as long as they afford this level of flexibility in adjusting compression on a photo by photo basis.
- When reviewing the source art, visualize the art cropped appropriately to fit the dimensions. If the art is too large it can be scaled down. But note:
- Be careful to scale the image proportionately. Scale the image to either the smallest height or width difference of the two dimensions when scaled down. For example, if targeting an image to a size of 785 x 325px, and the art is 800 x 600px, you will want to scale the width the 785px first. Then you will crop the image to the 325px height to fit.
- Another example is an image that needs to be 220 x 220px but is actually at a size of 500 x 300px. In this case, the height is scaled first to 220px and the width is cropped accordingly.
- There is also a cropping tool in Photoshop that allows the user to enter dimensions in and drag/crop the image as needed. Make sure the resolution is set to 72 ppi if using this tool and then save as described above.
- Avoid double compression - each time you export a JPG or scale an image, it compresses the original image. It’s the equivalent to photocopying a photocopy—the more you do it, the lower the quality of the output. For this reason:
- Start with large, high-quality images, scale down once (if necessary), and export once.
- If you need to create another asset using the same visual, go back to the original large, high-quality image and start again.
- Do not scale images up unless absolutely necessary and there is no other option. Scaling up may result in a blurry or pixelated result.
If you follow these basic recommendations, your images will display as you intend once they hit their digital destinations. Previewing your images in multiple device modes before publishing is a helpful testing step, allowing you to make adjustments before your customers see them.
