---
id: 587d78b1367417b2b2512b0a
title: Use a Retina Image for Higher Resolution Displays
challengeType: 0
videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
---
## Description
The simplest way to make your images appear "retina" (and optimize them for retina displays) is to define their width
and height
values as only half of what the original file is.
Here is an example of an image that is only using half of the original height and width:
<style>
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">
## Instructions
Set the width
and height
of the img
tag to half of their original values. In this case, both the original height
and the original width
are 200px.
## Tests
```yml
tests:
- text: Your img
tag should have a width
of 100 pixels.
testString: 'assert($("img").css("width") == "100px", "Your img
tag should have a width
of 100 pixels.");'
- text: Your img
tag should have a height
of 100 pixels.
testString: 'assert($("img").css("height") == "100px", "Your img
tag should have a height
of 100 pixels.");'
```
## Challenge Seed
```html
```
## Solution
```js
// solution required
```