1. Home
  2. Create a Study
  3. Adding Media Items
  4. How to create suitable images or website screenshots

How to create suitable images or website screenshots

This page has advice on how to pick a suitable image or video for eye-tracking studies, and explains a little about how the media is displayed during viewing.

Websites are tested by capturing screenshots as images. You can also test email campaigns, printed materials, packaging and shelf test images.

To add media to a study, open the study and then click the ‘Media’ tab. Click the ‘Add Media’ button to open the dialog.

You can choose either:

  1. Many images OR
  2. One YouTube video

You can add and remove media as many times as you like until you launch the study. You cannot modify a study after you have launched it.

Add media dialog
Add media dialog

Zoom, Stretch and Scroll

Viewers may use computers with a variety of screen shapes and sizes so it’s important to consider how your media will appear to them. Consider how the image is displayed during viewing:

  • Media is always displayed fullscreen without any distractions.
  • Media is always displayed at 100% zoom (1 pixel per pixel).
  • Width or height smaller than the viewer’s screen causes the image to be centered.
  • Any extra padding is filled with solid black.
  • If image width or height is greater than the viewer’s screen, the viewer can scroll during viewing. Scrolling is recorded and replayed. This simulates the website experience.

Clearly, image size is very important to have the intended viewing experience.

Image Size

Make sure that your image is neither too big, nor too small:

  • Too Small: Images that are too small will be automatically scaled to have a height of at least 800 pixels. The width will be scaled in proportion to the height. This behaviour was chosen because almost all screens are 800px or greater in height, but width is very variable depending on widescreen or television style display. If images are too small, they are difficult for some viewers to see, and it may be difficult to get enough precision in the eye tracking results.
  • Too Big: Generally, media should be as large as possible. However, there are other factors to consider. Often, study organizers are design professionals with very large displays. Therefore, media may not display correctly for home users who have smaller laptop or low budget screens.

We recommend that images have width between 1024 and 1280 pixels, which will be displayed almost fullscreen without scrolling on most displays.

The height of images depends on the type of image. Viewers will expect to scroll website screenshots vertically, so the only important factor is fitting the width of the display.

Generally viewers would not expect to scroll photographic media, so might miss some content.

If you know have a panel of testing machines, you may already know the viewing screen resolution. Try to make use of the full screen.

Website Screenshot Capture

We recommend using an app to capture website screenshots. For example, the FireShot Chrome extension can capture an entire page, including content not currently visible on screen due to scroll position. This avoids the need to capture multiple screenshots and stitch the images together. That’s far too much work!

We use a fixed image rather than a live website for eye-tracking because the appearance of a HTML website on a viewer’s computer cannot be exactly predicted, which makes results hard to interpret. By using an image, you are able to control the exact appearance of the webpage you want to test.

The appearance of modern websites also varies dramatically from screen to screen due to responsive layouts (which can reorganize large features) and dynamic content (such as popouts).

We do not zoom the image to fit the viewer’s screen because it may introduce aliasing effects, making small text hard to read.

You can deal with dynamic features and responsive layout variants by creating multiple studies in EyesDecide and comparing results from each configuration of the page.

Mobile Website Screenshot Capture

Using Firefox and Chrome developer tools you can render a website in “mobile” mode at any resolution. In Chrome, press F12 to toggle the developer tools and then click the “mobile phone” icon to see your website in mobile mode. You can then create a screenshot as normal.

Mobile App UI Capture

You can test mobile app interfaces with EyesDecide by creating a screenshot of the UI. You can often use mobile app development environments to generate a screenshot of the app interface (UI).

Since viewers will see the mobile UI without any other clutter, the experience is very similar to viewing it on a mobile except the image is somewhat larger.

Media Security

The media you provide must be made available to viewers. However, image media is secured by use of a pseudo-random key URL that is only known to the study organizer (i.e. you).

Was this article helpful?

Related Articles