Business Benefits
Engage users and improve visual aesthetics, site performance, and user experience.
Ensure your image is on-brand and compliant with your internal brand guide.
Check with your marketing or graphic design team to ensure that all images are on-brand. Helpful questions to ask yourself include:
- Is the image aligned with your brand’s aesthetics?
- Does the image look authentic and feature real people or settings, even if it’s a stock photo?
- Does the image feature the colors and tones in your brand palette, as dictated by your company’s brand guide?
Verify that the image has the appropriate resolution before you do any editing or formatting.
No amount of formatting or editing can make up for a poor resolution, which will result in blurry, fuzzy, or pixelated images. Bigger is often better. If necessary, you can reduce a high resolution image down to the size you want. However, stretching a low resolution image to a larger size will create a poor quality visual. Ideally, you should be working with an image that is:
- 300 ppi (pixels per inch) or more if you’re using these images on a print piece.
- 72 ppi or more if you’re using these images on your website or other digital pieces.
Convert your image to the file format that’s appropriate for your needs.
There are numerous image file formats that you can choose. Using an image editor, whether that’s Apple Preview, Microsoft Photos, or Adobe Photoshop Express, you can convert your image to:
- PNG, if your focus is having a high-quality image.
- JPEG, if your goal is to strike a balance between file size and image quality.
- GIF, if you’re working with animated images.
Crop your image to focus the reader’s eye on what matters.
Some images may be perfectly balanced to tell the right story. However, in most cases, you’ll need to do a little cropping. In most photo editing tools, you’ll use your cursor to highlight the part of the image you want before clicking on the crop button. For the best results:
- Crop out distracting elements on the edge of the photo, such as a random object or person.
- Crop to tell a story. Let’s say you want an image of two people at dinner, but you can only find a stock photo of a group of friends eating. In this case, cropping the photo to feature just two individuals may help you accomplish your goals.
- Crop with white space and breathing room in mind. Cropping a photo down to a tight square to focus on one object will look awkward and unnatural. However, cropping with some room to spare around the object can make the photo look more organic.
Apply any additional photo filters, graphic elements, or color adjustments to make the image brand compliant.
This should be dictated by your company’s brand manual. For instance, if every image on your blog has the same sepia filter applied to it, you’ll need to do the same for all images. This may also involve graphic elements. For example, if every blog article starts with a header image that includes the headline, do the same.
Run the image through a website performance optimizer to improve website loading speed.
Images that are too big may slow down your website, and this affects:
- The user experience: A slow-loading page may cause the user to give up and leave.
- Your SEO: Search engines such as Google are increasingly using site speed as a factor in ranking algorithms.
- Server and hosting costs: Your image library can represent a significant portion of how much server space your website needs.
An image optimizer, either a stand-alone tool or website plugin, will automatically optimize images and ensure that they load quickly. Examples include:
- ShortPixel Image Optimizer.
- Imagify.
- Smush Image Compression and Optimization.
Upload the formatted image to your website and embed it in your content.
Images that load quickly and easily will positively impact the user experience. Be sure to include title and alt texts, as well. This helps users understand what your images are about, even if lackluster internet connections prevent proper loading. Finally, all embedded images should also be mobile-optimized for SEO purposes.
Last edited by @hesh_fekry 2023-11-14T16:20:26Z