BALANCING IMAGE QUALITY & LOAD SPEED ON YOUR WEBSITE

CLIENTS' CORNER: Image Dimension / Purpose / Web Speed / SEO / Best Practice!

CONSISTENT STYLING

• Backgrounds: Use uniform backgrounds, preferably white or black, to maintain a clean and professional look.​

  
  

• Lighting: Consistent lighting across all images ensures uniformity and enhances visual appeal.

  
  

• Variety: Showcase products from different angles and include close-ups to give customers a comprehensive view. Include creative use cases and staging when possible to inspire customers.

  
  

  For Product Catalogues, based on the nature of your product, it might be a good idea to display the full Ratio, like in the case of Art, or Photography.

  
  
  
  

IMAGE QUALITY

RESOLUTION: Ensure your product images are clear and high-resolution to showcase details effectively. While some web platforms automatically optimizes images sizes, it's advisable to keep individual image file sizes as small as possible without compromising quality.

LOAD SPEED : OPTIMIZE IMAGE FILE SIZES

• Product Thumbnails: For smaller previews, dimensions around 200 x 200 pixels are effective. ​

  

  Full Product Catalogue

  
  

• Product Detail Pages: Medium-sized images with dimensions of 800 x 800 pixels provide a clear view without excessive file sizes. ​

  
  

• Zoomable Images: For intricate small details, like surface texture or jewelry details, high-resolution images of 1000 x 1000 pixels are recommended to allow customers to zoom in and appreciate craftsmanship. ​ TOOLS FOR IMAGE COMPRESSION: Several tools like shortpixel, TinyPNG, or ImageOptim

  
  

  

  Product Card Image Options: full version, details, staging, variation available

  
  

IMAGE FORMAT

JPEG: Ideal for photographs due to efficient compression and quality balance.​

PNG: Suitable for images requiring transparency or sharp lines, such as logos.

RESPONSIVENESS

Website vs Social Media Sharing

Adaptability: Ensure images display correctly on various devices and screen sizes, and social media platform can be a challenge, by using responsive design techniques, enhancing user experience. For product photography it is highly recommended to center the image in a 1:1 (square formate) giving air around it. While Facebook may display landscape oriented images, and Instagram new 5:4 layout displays portrait, focusing your products in the very middle would be mostly safe at the time of sharing them.

FACEBOOK

• Shared Image/Post Recommended size: 1200 x 630 pixels.​

• Stories: Recommended size: 1080 x 1920 pixels (9:16 aspect ratio).​

• Formats: JPG, PNG, GIF.​

• Note: Leave approximately 250 pixels free at the top and bottom to prevent overlays from covering essential content.

  
  

INSTAGRAM

• Square: 1080 x 1080 pixels (1:1 aspect ratio).

• Portrait: 1080 x 1350 pixels (4:5 aspect ratio).

• Landscape: 1080 x 566 pixels (1.91:1 aspect ratio).

• Stories and Reels: 1080 x 1920 pixels (9:16 aspect ratio).​

• Formats: JPG, PNG, or MP4

• Note: Always center your content, leaving space at the top and bottom to prevent overlays from covering essential content.

  
  

  

  Common Social Media Ratios

  Alt Text:

  "A black-and-white photograph of an urban geometric structure, overlaid with social media image ratio guides including 1:1, 9:16, 5:4, and 1.91:1. The structured composition includes sharp architectural lines and contrasting light and shadow areas. Image by X-iO.Digital Photography."

SEARCH ENGINE OPTIMIZATION

Implement Descriptive File Names and Alt Text

• File Names: Name your images descriptively, e.g., 'yellow-leather-tote-bag.jpg', to improve SEO.​

  
  

• Alt Text: Provide clear, concise alt text for each image to enhance accessibility and search engine understanding. Benefits of Alt Text:

  
  

  1. Accessibility: Alt text ensures that visually impaired users can understand the content and purpose of images through assistive technologies like screen readers. ​

  2. SEO Advantages: Search engines index alt text, which can improve a website's visibility in search results, particularly in image searches. ​

  3. Content Clarity: If an image fails to load due to technical issues, alt text provides context about what the image represents, enhancing user experience. ​

  
  

  Best Practices for Writing Alt Text:

  
  

  • Be Descriptive Yet Concise: Clearly describe the image's content and function in a few words.​

  • Avoid Redundancy: Do not start with phrases like "image of" or "picture of."​

  • Consider Context: Tailor the description based on the image's purpose and surrounding content.​