Image Optimization
Image Optimization
The primary goal of formatting your images is to find the balance between the smallest file size (weight) and an acceptable quality. It’s essential that all images are as light as possible. To achieve this, images must be formatted, cropped, and optimized correctly. Please use the following guideline and steps for all images.
Guidelines
FOR EVERY IMAGE, ALWAYS Add a description in the Media Library and an alt tag in the content type when the option is available.
DO NOT: Upload images to the TerminalFour Media Library that are not optimized. Once optimized, no image should be larger than 2M.
DO NOT: Use images with a lot of text. Assistive content devices cannot read image content and images are often reduced on mobile devices to the point that they are a challenge to read. An image with one word or a very short phrase can work if necessary. The word or phrase in the image can be added to the alt tag which describes the image and will be read by assistive content devices.
TIP: When selecting an image for a hero or lead, keep in mind how an image will reformat on a mobile device. It’s best to have a central singular focal point.
Exporting the image for web
These steps are for Adobe Photoshop only.
STEP 1: EXPORT THE IMAGE. To begin the optimization, select FILE > EXPORT > SAVE FOR WEB
STEP 2: OPTIMIZE THE IMAGE
A - Select the 2-UP tab. Allows you to preview and compare the original and optimized versions.
B - Select a built-in preset. High, or maximum is a good start. These settings can also be manually adjusted. Try different settings to get the lightest image file without compromising the quality too much. There’s an option to reset the width.
C - Manage the quality for best results.
D - Size the image. Set your target image size and set the resolution to 72dpi.
BEST PRACTICE: Keep a copy of the original.