Quick Reference
How Images Are Displayed
Deal & Loyalty Scheme Cards (three-image layout)
Deal and Loyalty Scheme cards display up to three images in a layered layout:
Primary image - the main card image, displayed at a 6:5 aspect ratio (landscape). This fills the top of the card and is cropped to fit.
Secondary image - the deal or loyalty scheme's own secondary image, displayed as a small 16:9 (wide) thumbnail overlapping the bottom of the primary image.
Business logo - the business's primary image, displayed as a small square (1:1) thumbnail alongside the secondary image.
The two thumbnails sit side by side, overlapping the bottom edge of the primary image. They are displayed small (roughly 56px tall) with a white ring border, so they need to be clear and recognisable at small sizes.
Key takeaway: The business primary image is cropped to a square on these cards, even though it may appear differently elsewhere. Always compose business images with a square crop in mind.
Standard Cards (events, articles, trails)
These show a single primary image at a 6:5 aspect ratio, cropped to fill the card. The image is centred and any overflow is hidden.
Business Cards (standalone)
When a business appears on its own card (e.g. in search results), its primary image is displayed at 6:5 (landscape). However, on Deal and Loyalty cards it appears as a square thumbnail - so business images should work well in both crops.
Competition Cards
Competitions use a square (1:1) crop. The image fills the card and is centred.
Logos & Icons
Tenant logos and icons are displayed small - typically as badges overlaid on other content. They should be clean, simple, and work well at small sizes. Use a transparent PNG if the logo is non-rectangular.
Best Practices
Composition
Keep key content centred. Images are cropped from the edges to fit the aspect ratio, so avoid placing text, faces, or important detail near the borders.
Leave breathing room. A small margin of non-essential content around the edges prevents awkward crops.
Business images: think square. Even though business images sometimes display at 6:5, they also appear as square thumbnails on Deal and Loyalty cards. Compose them so the important content sits within a central square area.
Resolution
Minimum: 640px on the shortest side. Anything smaller will appear blurry on modern phones.
Recommended: 1200px on the longest side. This gives the platform enough to work with for sharp rendering on high-density displays without being excessively large.
Maximum: There is no hard pixel limit, but images above 4000px on any side provide no benefit and slow down uploads. Aim for 1200–2400px.
File Format & Size
JPEG for photographs (best compression for photo content).
PNG for logos, icons, or images requiring transparency.
WebP is also accepted and offers good compression.
Keep files under 5 MB. Larger files slow down uploads without improving quality - the platform will compress and resize them regardless.
What to Avoid
Text-heavy images. Small text becomes unreadable when scaled down for cards. If text is necessary, use large, bold lettering.
Thin borders or frames. These can be cropped unevenly depending on the display context.
Very dark or very low-contrast images. Card overlays (titles, badges, distance labels) may become hard to read.
Upscaled or heavily compressed source images. Start with the best quality original you have - Vicinity handles the rest.
Off-centre subjects in business images. These will be cropped awkwardly when shown as square thumbnails on Deal and Loyalty cards.
Automatic Optimisation
You do not need to manually resize or compress images before uploading. The Vicinity platform automatically:
Converts images to the most efficient format for each user's device
Scales images to the exact size needed for the display context
Caches optimised versions for fast delivery
However, source quality matters - the platform cannot improve a blurry or low-resolution original. Always upload the highest quality version available within the size guidelines above.