Copilot's image processing pipeline is unique because of its integration of aspect ratios and editorial crops.
On Performance, DPI, Retina displays, and the Web
In general, page-level performance for images depend largely on file size. Copilot's dynamic image server, Vulcan, does a lot to optimize for speed while maintaining quality, but it works best under certain scenarios.
As a note, settings like "DPI" or "PPI" are not relevant in the digital world, they are settings only relevant in print. The more important things to remember are pixel dimensions (the more pixels, the better quality), using the right file type (JPEGs), and color profile (sRGB).
Devices with super-sharp displays like iPads and iPhones work best by using large pixel dimensions, not large DPI settings.
Image Guidelines
For best performance (both speed and quality), follow these guidelines:
Try to use JPEGs instead of PNGs. JPEGs have much better file sizes than PNGs. PNGs should be reserved for images that absolutely require transparencies.
Always use "save for web." If you're using Photoshop, try to use the "save for web" feature - this will automatically apply some defaults that will be web-friendly.
Always use sRGB. Color profiles are tricky business! For the web, always use the sRGB colorspace. While CMYK is preferable for print processes, CMYK is not web-friendly as not all browsers are capable of respecting this color profile. In addition Vulcan now converts CMYK image uploads to sRGB. This can make the image look different in Vulcan than it did prior to upload.
Always upload the largest pixel dimension you have. Note that pixel dimensions are independent of "DPI" or "PPI" in your image editor. To make media assets flexible and high-quality, upload the largest pixel dimensions you have available (e.g. use 1200x1200 rather than 800x800)
Copilot will optimize images once they are uploaded. Images do not need to be formatted to any specific size. Anything under 30mb will be acceptable.
Gifs
We recommend not using GIFs as Site Image or in your stories as they tank the performance of the page. We recommend using clips instead of GIFs to comply with WCAG as well. But if you really want to use GIFs, please keep below guidelines in mind
Please upload the one under 500 KB (safe limit). You can pre-process through various tools before upload. Your SEO, page and web browsers will thank you.
GIFs above 500 KB and under 1 MB will still be displayed but with slightly degraded quality.
GIFs equal and above 1 MB will see degraded quality for optimized file size reduction suitable for web rendering. If your GIFs are above 1MB, it's better to use clips.
For bigger GIFs (1 MB and beyond), the first page load for the user can still be slow or error out for images. It should load on retry after couple of minutes (extremely heavy gifs can still fail as their optimization execution time goes beyond 2 mins. We won't be supporting those cases. We advise to use clips instead.)
Clips, a separate content type from Photos, can be a maximum of 30 mb and must be less than 20 seconds long.