Images should be used to supplement text content on the website. In most cases, images should not include text because they are always accompanied by text. See template examples.
Image Height and Width
Use the heights and widths provided below with the appropriate templates. Do not upload an image in a smaller size. This will lead to sub-optimal image quality. Images at larger sizes may also distort the page template.
Adding images to the "open graph" field in the Sitecore editor will ensure that an image previews along with your link when you share it to Facebook.
File Type
**There are exceptions to these guidelines**
- For photographs, use either/or but JPG is preferred over PNG
- For graphics or logos, use PNG-8 file
Optimizing Image Name
Be concise, direct, and descriptive. Use keywords but do not include irrelevant keywords or practice "keyword stuffing."
Include the width of the image at the end of the image name as a distinction between two identical images (thumbnail v. open graph). Do not include the full height and width in the title. That information can be found within the Sitecore fields.
Do not include dates in the image name.
Use spaces instead of dashes or underscores.
Optimizing Alt Text
Sitecore will automatically prefill alt text with the image name.
Edit the alt text to be more descriptive. Use keywords without "keyword stuffing."
Remove image size indicators.
Images can have the same alt text if they are the same image.
Bad alt text: "HubSpot office wall Singapore inbound marketing workplace murals orange walls ship it"
Good alt text: "Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"
Before You Upload
Follow design and brand standards set forth for image creation.
Upload images to the appropriate location in the media library.
Use the content editor to find and insert images into content.
- Images should be sized correctly before they are uploaded. The CMS is not an image editor.
- Use alt tags appropriately to label images.
- Images should always be floated right unless they occupy the full width of their content area. Images may be floated left only when this position is crucial to the understanding of content.
Image Specs by Template