While Quintype itself uses a sophisticated image processing engine to resize and crop images automatically for different devices, there are general best practices and widely recommended ratios for the original image you upload.
Here is a summary of the recommended image ratios and best practices for uploading images to Quintype stories:
1. Ideal Image Ratio for Hero Images
For a main story hero image (the large, primary image at the top of an article), the consensus across responsive web design, and often used in Quintype's framework, leans toward wider, landscape formats.
Key Takeaway: Always aim to upload your primary hero image in a 16:9 ratio with a high resolution (like 1920 x 1080 px or larger) to ensure a crystal-clear display on large monitors. The CMS will handle the responsive resizing for smaller devices and different collection views.
2. Best Practices for Uploading Images to Quintype CMS
Following these practices will ensure your images look great and load fast across all platforms:
A. Image Quality and Dimensions
High Resolution is a Must: Always upload the highest resolution version of the image you have. Quintype's image processor will automatically create multiple smaller, optimized versions for the front-end, but you need the large original to ensure quality on high-resolution displays (Retina/4K).
Minimum Width: Google recommends a minimum width of 1200 pixels for images to be eligible for Google Discover and other high-visibility placements.
Maximum Size: While Quintype generally doesn't restrict file size, it's best practice to keep the original file size reasonable (ideally under 5 MB, but the CMS is designed to compress this on the fly). Avoid extremely large images (e.g., beyond 8192 x 8192 pixels).
File Format: JPEG is best for photographs. PNG is better for graphics or images that require transparency. WebP is the modern, preferred format for web delivery, and the Quintype CDN is often optimized to serve images in this format automatically, regardless of your upload type.
B. Optimization and Metadata
Set the Focus Point: This is the most crucial step! After uploading the image to the Bold CMS Media Library, always click on the image to set a Focus Point. The Focus Point ensures that when the image is cropped to different sizes (for mobile, Twitter cards, or listing views), the most important part of the image (the "focal point") is always visible and never cut off.
Add Alt Text: Always provide descriptive Alt Text for accessibility and SEO. This tells search engines (and screen readers) what the image is about, improving discoverability.
Use IPTC Metadata: If your images already contain IPTC metadata (like attribution, caption, location, or artist info), the CMS can often automatically extract and populate these fields during upload, saving you time.
C. Content and Design
Keep it Wallpaper-like: Hero images should set the mood or tone of the story. They function better as background visuals than detailed infographics.
Avoid Text in Images: Do not burn text into your hero image (especially the headline). This can be obscured by overlays, affects SEO, and makes the image unusable when cropped.