Streamlining Images to Optimize Websites

Cropping image of woman in lab
By Kelsi Collins
1 min read

This article covers the following topics:

  • Overview
  • Why Standardize Image Sizes?
  • Standard Image Sizes
  • Cropping
  • Additional Resources

Overview

In recent months, we’ve addressed key issues with the cropping tool and standardized image sizes to optimize the performance of the site. These updates will enhance user experience by ensuring consistent image quality and faster load times.

Why Standardize Image Sizes? 

  1. Consistent Design Aesthetic: A uniform image size ensures that layouts look intentional and polished. Consistent sizing prevents elements from appearing misaligned or cluttered.
  2. Improved Performance: Loading images that are too large or of varying dimensions can negatively impact page speed. Optimized and consistently sized images help improve load times and responsiveness.
  3. Responsive Layout Control: Standardized sizes make it easier to manage how images behave across various screen sizes. This simplifies responsive design.
  4. Better User Experience: Users are more likely to engage with content that is easy to scan and visually appealing. Clean, organized imagery helps convey professionalism and credibility.

Standard Image Sizes 

Small:

  • Small portrait (2:3 - 160x284)
  • Small rectangle (3:2 - 512x341)
  • Small rectangle tall (4:3 - 512x384)
  • Small square (250px)

Medium:

  • Medium portrait (250x375)
  • Medium rectangle (3:2 720x480)
  • Medium rectangle tall (4:3 - 720x540)
  • Medium rectangle wide (16:9 - 720x405)
  • Medium square (1:1 - 500px)

Large:

  • Large rectangle (3:2 - 960x640)
  • Large rectangle (4:3 - 960x720)
  • Large rectangle wide (16:9 - 960x540)
  • 1:1 (720px)

Extra large:

  • Full width (1900x650)

Image Recommendations 

Image Sizes: For the best results, we recommend uploading images at the largest possible size for the intended aspect ratio. For example, if you're uploading a rectangular image with a 3:2 aspect ratio, aim for dimensions around 960 pixels wide. Please note that all images must be under 4 MB file size limit.

Crop Tool: If an image appears misaligned or doesn't display as intended within the standard sizes, you can use the Crop Image tool to adjust it. This feature allows you to select the specific portion of the image you want to display, based on the desired aspect ratio. By defining the crop area, you can ensure that the most important parts of your image are highlighted, providing a more polished and visually appealing presentation on the site.

Additional Resources

Co-working Sessions 
Register for the next Co-working Session for answers to your questions about this update.

Register for Co-working Sessions