Looking back at the early stages of BIMI’s development the group considered a number of options for the right type of image file. The intention was to find something that would render the same  at 100×100 pixels and 4000×4000 pixels. Vector graphics by nature retain their resolution regardless of the display size making them highly versatile for the purposes of BIMI. SVGs are widely supported across operating systems and devices, thus the existing vector graphic format was chosen.

The BIMI Group has written several help guides, and videos in the past to help with providing guidance on designing and testing your SVG image including:

Talk with your graphic designer about building the right type of SVG image. They should be able to help you test that it renders fine at the size of a movie poster or onto the head of a pin. Designers should consider the “effective resolution” of the image when rendered within various contexts (e.g. large-ish reading view alongside email content, mid-sized in a desktop client list view, and tiny list view on a mobile client). 

Things to consider for your BIMI logo:

  • Images will be displayed in a circle, square, or “squircle”, so account for the appropriate amount of space around your logo.
  • Horizontal graphics may appear smaller than a simple logo or avatar of your brand.
  • Use a solid color background (rather than transparent) to ensure the logo displays as you would expect in both light and dark mode.

For all intents and purposes, image sizes are not an issue with vector-based SVG images, they should render the same at all sizes without degrading the quality.  Just make sure you’re OK with how it’ll display at various sizes.

Image credit: Photo by Mikael Kristenson on Unsplash