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