Module Content
      Back to home
      1. POWER Help Center
      2. Modules
      3. Module Content

      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

      1. Measure the image size needed for the section or module using a screen measuring tool
      2. 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