Content Uploading Standards
Following consistent standards when uploading content ensures a professional, performant, and accessible website. These guidelines cover image optimization, file naming, alt text, and content structure.
Image Optimization
Before Uploading
Resize images to the maximum display size needed. There is no need to upload a 5000x3000 pixel image if it will be displayed at 1200x800 pixels.
Compress images using tools such as TinyPNG, ImageOptim, or Squoosh to reduce file size without noticeable quality loss.
Choose the right format:
JPG: Photographs and images with many colors.
PNG: Graphics, logos, and images requiring transparency.
SVG: Icons, logos, and illustrations that need to scale.
WebP: General web use with superior compression (recommended when supported).
GIF: Simple animations only.
Recommended Image Dimensions
Hero / Banner images: 1600 to 2000 pixels wide.
Content body images: 800 to 1200 pixels wide.
Thumbnails: 300 to 600 pixels wide.
Profile photos: 400 x 400 pixels.
These are general guidelines. Your specific site may have different requirements based on theme configuration and image styles.
File Size Guidelines
Images: Aim for under 200 KB for standard content images. Hero images may be up to 500 KB.
Documents (PDF): Keep under 5 MB when possible. Optimize PDFs using compression tools.
Videos (local): Keep under 50 MB. Consider using remote video (YouTube/Vimeo) for larger files.
File Naming Conventions
Use clear, descriptive file names for all uploaded files:
Use lowercase letters.
Separate words with hyphens (
-), not spaces or underscores.Include relevant keywords in the file name.
Avoid special characters, accents, and symbols.
Examples
annual-report-2025.pdf
AR_FINAL(2).pdf
team-photo-marketing.jpg
IMG_20250115_143022.jpg
product-brochure-en.pdf
brochure final version 3.pdf
logo-company-name.svg
logo.svg
Alt Text Guidelines
Alt text (alternative text) is essential for accessibility. Screen readers use alt text to describe images to visually impaired users. Search engines also use alt text to understand image content.
Writing Good Alt Text
Be descriptive. Describe what the image shows in a clear, concise way.
Be specific. Mention relevant details (e.g., "Doctor reviewing patient chart in hospital clinic" rather than "Person working").
Keep it brief. One to two sentences is usually sufficient.
Do not start with "Image of" or "Photo of." Screen readers already announce that the element is an image.
Convey purpose. If the image is a link or button, describe its function rather than its appearance.
Leave empty for decorative images. If an image is purely decorative and conveys no information, leave the alt text empty. However, this is rare for editorial content.
Examples
Team in a meeting
"Marketing team reviewing quarterly results around a conference table"
Company logo
"Acme Corporation logo"
Chart of revenue growth
"Bar chart showing 15% revenue growth from 2024 to 2025"
Decorative divider line
(empty)
Content Structure Best Practices
Headings
Use headings to create a logical content hierarchy.
Start with H2 for the first section heading (H1 is reserved for the page title).
Use H3 for subsections within an H2 section, H4 for subsections within H3, and so on.
Do not skip heading levels (e.g., do not jump from H2 to H4).
Paragraphs
Keep paragraphs short (3 to 5 sentences).
Use one idea per paragraph.
Add white space between sections for readability.
Lists
Use bulleted lists for unordered items.
Use numbered lists for sequential steps or ranked items.
Keep list items concise and parallel in structure.
Links
Use descriptive link text that indicates where the link leads (e.g., "Read the annual report" instead of "Click here").
Avoid using raw URLs as link text.
Use the Linkit autocomplete feature for internal links.
Tables
Use tables only for tabular data, not for layout purposes.
Include header rows for clarity.
Keep tables simple and avoid excessive nesting.
Last updated