Can I create images suitable for retina displays?

Yes - actually retina images are no different from non-retina images. They simply have a higher pixel height and pixel width, and are then displayed at a higher pixel density. Here's an example:

This image is being displayed at a viewing size width and height of 350x500 and the image itself has a resolution of 350x500:

This next image has double the resolution (700x1000) but using some simple HTML tags we will force it to display at the same width and height of 350x500:

If you are on a retina display, the second image is sharper compared to the first image because it is displayed at double the pixel density on your screen.

So retina images are simply larger versions of an image. For example if you want to make a retina-friendly image at 1000x1000px you would design your Bannerbear template at 2000x2000px. Bannerbear supports resolutions up to 7000x7000px.

One further step you can take is to alter the DPI of the image. This is simply image metadata and does not change anything about the image itself. If you change the DPI to a higher setting, supported applications (e.g. Preview on OS X) will open it at the appropriate size for a retina display. You can find this setting in Settings / API Key > Advanced.

Have a question?

Contact our customer support team anytime via chat or email