How do I determine the dimensions to optimize my image sizes?

Use a screen measuring tool to determine the size needed for your layout and account for retina image scaling

Measure the image size needed for the section or module using a screen measuring tool
Then multiply the dimensions by 1.5 to account for retina image scaling to determine the final image size you should load

For example, a square team member image is 240px x 240px and would need to be loaded at 360px x 360px.

The theme will automatically serve the larger size (360x360) for retina screens while using the standard size (240x240) for non-retina and further reduce the image size responsively by device size.

Optimizing Images for Performance

Convert images to WebP where possible to meet criteria to serve images in next-gen format (the HubSpot server automatically converts images based on the browser)
To reduce image file sizes without losing quality, use TinyPNG to compress your images (JPG, PNG, WebP) - another paid option is kraken.io
Vector images (SVG) also help keep file sizes to a minimum and can be used for graphics like logos and icons