Image Best Practices for NX Restaurant Online Ordering

Recommended Image Sizes

For the best visual experience across all devices, strictly adhere to these dimensions.

Pro Tip: The responsive design of the NX platform often uses a "center-crop" technique for thumbnails. Uploading square images ensures your food is never awkwardly cut off in the grid view.

Detailed Specifications

1. Hero / Banner Image

This is the large background image at the top of your landing page. It sets the tone for your brand.

• Focus: The focal point (e.g., a spread of dishes or the interior vibe) should be in the center of the image. The top and bottom edges may be cropped depending on the user's screen height.

• Desktop: Shows the full width of the photo (the panoramic view of the bar).

• Mobile: To fill the vertical space without stretching, the system scales and chops off the sides. It keeps the center of the image visible.

2. Menu Item Images

These are the most critical images for conversion.

• Centering: Ensure the food item is perfectly centered. Leave about 10-15% "padding" or empty space around the food. This prevents the burger or salad from touching the absolute edge of the frame, which looks cramped.

• Consistency: Use the same aspect ratio for all items. Do not mix landscape (rectangular) and portrait (tall) photos, as this will break the clean grid layout of the ordering page.

• Backgrounds: Use a consistent background style for all items (e.g., all on a wood table, or all on white). A mix of random backgrounds makes the menu look cluttered.

3. Logo

• Format: Use PNG with a transparent background if possible. This prevents a "box" from appearing around your circular or irregular-shaped logo.

• Shape: If your logo is naturally square, place it on a rectangular canvas (with transparent space around it) before uploading to ensure it isn't stretched or squashed by the system's container.

Examples

Below are examples of how the NX Restaurant Online Ordering page scales on different devices with different browser and screen sizes. The page is built to be responsive so all data and images will scale to fill the page.

Desktop View

Tablet View

Phone View

General Best Practices

File Formats

• Photos (Food/Interiors): Use JPG (or JPEG). This format handles millions of colors efficiently and keeps file sizes small.

• Graphics (Logos/Icons): Use PNG. This format supports transparency and keeps lines crisp.

Optimization (Speed is Key)

Large image files make your ordering site load slowly, which can cause customers to abandon their cart.

• Compression: Before uploading, run your images through a compression tool (like TinyPNG or Squoosh) to reduce file size without losing quality.

• Target Size: Aim for file sizes roughly between 150 KB – 300 KB for menu items.

Photography "Dos and Don'ts"

• DO use natural light (near a window) whenever possible. Flash photography often makes food look greasy or unappetizing.

• DO NOT use blurry or pixelated images. If you don't have a good photo of a dish, it is often better to use no image than a bad one.

• DO clean the plate rim. Stray crumbs or sauce drips can look unhygienic in high-definition photos.

Note: The Hero Image and Menu Item Images can be turned off for the page in Configuration > Areas > Online Ordering under Display Options.