In this guide:

  1. Understanding pixel density
  2. Logos on high density screens
  3. Creating images for both low and high density screens
  4. Worksheet: Using high density logos in Snap

Skip straight to the guide ↓

1. Understanding ‘pixel density’

Over the past 10 years computer and smartphone screens have more than doubled in pixel resolution. This means the individual pixels that make up the screen have become so tiny they are virtually imperceptible to the human eye. Apple named these high resolution screens Retina displays, though the generic industry-wide name is HDPI (high dots per inch) or high density displays.

Diagram showing higher pixel density on modern devices compared to traditional standard definition desktop displays.

2. Logos on high density screens

Due to high density screens having such tiny pixels, logos created for traditional low density screens would be displayed much too small on modern devices. To correct this, high density devices typically double the size of these images to make them look the same physical size as seen on low density screens. Unfortunately, the result of this re-sizing is images that appear blocky or blurry on high density screens.

Diagram showing the effects of standard definition and high definition logos on HDPI displays.

But there is a solution…

3. Creating images for both low and high density screens

If you want your company or brand logo to look its best on both low and high density screens, use an image that is double the pixel resolution required on a standard low density display, then set the dimensions to 50%. This way it will look its best on both low density desktop screens, as well as modern high density screens like smartphones and tablets.

Now let’s look at how to do this in Snap…

4. Worksheet: Using high density logos in Snap

For this worksheet, our example survey logo on a standard definition screen is a 300px wide image, but we want it to look sharp on high density devices.

Step 1

First, obtain or create a 600px wide version of the normal 300px logo. Your graphics or branding department may need to help out.

Step 2

Using Insert › Image, choose the 600px logo to insert into the survey.

Step 4

Using the Zoom input, change the value to 50%.

Step 5

Click OK to insert the image.

Step 6

Publish your survey to test on various device screens. It should look good on low density screens and sharp on high density devices.

Dos and Don’ts

  • Do create high-resolution logos and graphics from original artwork files. Your branding department may need to help out.
  • Don’t use this method with photos as this could cause surveys to load slowly on poorer internet and data connections. Only create high definition logos, icons or diagrams.
  • Do consider the maximum width of your logo or graphic on the smallest devices. i.e. An iPhone 4 has a portrait screen width of 640 pixels. We recommend high definition logos being no larger than 600 pixels wide.