Logic CMX websites are designed to be responsive and adapt to different screen sizes automatically. Therefore there is no fixed size for a hero image. Only best practices for responsive design. Logic CMX uses separate Desktop and Mobile images for best results across these different devices. If a mobile image is not provided, the desktop image will be used by default. Desktop images should have a landscape aspect ratio and mobile images should have a portrait aspect ratio. The specific sizes depend on the design objectives.
Recommended Hero Panel Image Specifications:
Format: JPEG, PNG, or WEBP
Color Profile: RGB
Resolution: 72 or 144ppi
File Size: Dependent on size and resolution but panels should remain under 450k
Desktop Orientation: Landscape
Mobile Orientation: Portrait
Recommended Sizes for Full Height Hero:
| Desktop | 2000x960 | 150kb |
| Tablet@2x | 1600x1160 | 150kb |
| Tablet | 800x580 | 60kb |
| Mobile@2x | 800x600 | 50kb |
| Mobile | 400x300 | 25kb |
Recommended Sizes for Fixed Height Hero:
| Desktop | 2000x600 | 120kb |
| Tablet@2x | 1600x580 | 120kb |
| Tablet | 800x290 | 60kb |
| Mobile@2x | 800x300 | 60kb |
| Mobile | 400x150 | 20kb |
What Not To Do
Never use hero images exceeding 1 Megabyte in file size. Scale down and compress for web.
Do not use CMYK color profile as it is not web friendly.
Do not use PNG image format for photos or illustrations with gradients. PNGs are used when transparency is required or if the image uses text over flat colors.
Do not use unsupported file formats like TIFF, EPS, or PDF.
Do not use spaces or special characters in the file name.
Do not have important copy (text) or subject of the image located near the borders as it may be cropped out.