Imagery

Image sizing

When preparing image assets for publishing, be sure to address these aspects:

• Image quality
• File size
• Responsive needs

Image quality

When possible, and utilizing image optimization techniques, photographic image assets should be of the highest quality. Start by exporting the image at 2x resolution (twice the size it would be displayed) and optimize that using software like ImageOptim and Photoshop’s Save for Web.

There should be no visible pixelation in the photograph on a high-DPI, 2x resolution (“retina”) screen. If file size requirements (as explained below) can not be attained, exporting at 1x sizing may be acceptable.

File size

Ideal file size for Hero imagery is less than 100kb. Smaller images should have relatively small file size.

Exporting using Photoshop’s Save for Web feature will allow for adjusting the quality of the image, while attempting to maintain the visual fidelity. Ensure you’re using jpg for photographic content, and png for graphic art. (svg should be used for any vector imagery) Converting the file to webP or another supported format may also help. Optimize the exported file using ImageOptim or similar software.

Responsive needs

A great way to fully optimize imagery for responsive web is to create differently cropped and sized assets to be used across different breakpoints, using srcset and sizes in HTML. Refer our breakpoints to create the largest width image needed for each breakpoint, and crop and export those assets.

Image aspect ratios

These are the image aspect ratios used on Cars.com

To help in mocking up designs, the following variants are available within the photo placeholder component in Figma.