When uploading an image in the CMS, the system handles it by automatically scaling it to the correct size and compressing it for performance. However, there are a few guidelines to follow in order to achieve the best quality for the displayed images.
Primary Guidelines:
- The image should have a width that is at least the width of your largest dimension multiplied by 2 (i.e., your widest content block, 1 column block). The height is entirely dynamic.
- Always upload .jpg files instead of .png (unless transparency in the image is necessary, which is very rarely the case).
- Do not compress the image using external services before uploading; the system takes care of this during the upload process.
Automatic Compression and Image Scaling:
When an image is uploaded in the CMS, the system's image service handles the file by compressing its size and serving the appropriate dimensions needed for various content areas on the storefront. After the storefront retrieves the correct dimensions, further processing occurs in the web browser, determining which dimension to display based on screen size (responsiveness), such as 2560px wide, 900px wide, or 425px wide.
All of this happens automatically, so the uploaded image needs to be at least as wide as the largest area multiplied by 2 (for example, 1360px x 2 = 2790px. If you're unsure of the width you need, approximately 2800px wide is usually sufficient).
Therefore, you don't need to worry about anything other than ensuring the image is of the appropriate width during uploading, whether it's for a 1/4-column or a full-width hero banner. This ensures that the images are large enough to maintain good quality, regardless of the width of the column they're placed in.