Image Quality and File Size

Written By Nicky van der Veen

For optimal performance when using photos on a website, it is important to find a balance between image quality and file size. Here are some guidelines for the maximum file size:

Hero Images (large background images or banners):

  • Maximum size: 200-500 KB

  • Resolution: 1920x1080 pixels or 2560x1440 pixels for high-resolution screens

Product Images:

  • Maximum size: 100-300 KB

  • Resolution: 800x800 pixels to 1200x1200 pixels, depending on the required level of detail

Thumbnail Images:

  • Maximum size: 20-50 KB

  • Resolution: 150x150 pixels to 300x300 pixels

Content Images (within blog posts or articles):

  • Maximum size: 100-200 KB

  • Resolution: 600x400 pixels to 1200x800 pixels

Full-Width Images (spanning the entire width of the page):

  • Maximum size: 200-400 KB

  • Resolution: 1200x800 pixels to 1920x1080 pixels

Nicky van der Veen https://lekker.work
Previous

Why Choose a Squarespace Website
Next

How a Macro Approach Contributes to the Design Process of a Visual Brand Identity