Images

Images play a crucial role in enhancing user engagement on a website by conveying information quickly, boosting visual appeal, and supporting branding.

Formats

Choosing the proper format for images is essential for optimization. For most circumstances, WebP is preferable.

When to Use WebP

WebP is the preferred choice.

Provides superior compression of both complex and transparent images.

Ideal for larger or frequently used images.

Tip: Use the image compression tool to convert your image to WebP

When to Use JPEG

Used for photographs and complex images, as these offer decent quality at smaller file sizes.

When to Use PNG

Used for images that require transparency.

When to Use SVG

Use sparingly and only for icons, logos, or simpler graphics.

SVG’s can also be used if code-based customization is required, like changing colors, animations, or other interactivity.

Filenames

Proper filenames help avoid multiple variations of an image being uploaded multiple times. Filenames should be short and descriptive of the image. This will greatly improve our media management by allowing us to better search for images that may already exist in the backend.

• Properly name images with descriptive, keyword-rich filenames
• Use hyphens when joining together words.
• Do Not use spaces.
• Helps search engines understand and index content more accurately
• Helps with internal discovery and de-duplication efforts.

Alt Text

When adding images to Wordpress, there is a field for adding an alternative text. This is important for improving SEO and accessibility. We should always strive to add a meaningful and descriptive message for the image. This should be a descriptive sentence that uses the target keyword(s).

• Add meaningful alternative text (alt tags) to imagery.
• Helps improve accessibility
• Helps to increase SEO scores
• Helps maintain a11y compliance for visually impaired users.

Dimensions

The dimensions of an image should be considered prior to uploading to Wordpress.

• Optimize images for file size without compromising on quality

  • Helps reduce load times.
  • Use the image compression tool to resize images and convert to WebP for better compressions

• Don’t upload massive images that are only rendered on cards or in a blog post.

To Note:

Moving forward, we’ll take an inventory of the various image sizes we use throughout the site.

We will do our best to provide more guidelines and cropping options to best remove the additional overhead of having to use a third party program to resize imagery.

We’ll also be able to take advantage of some new programmatic based image rules to resize images during the build step.