freeCodeCamp/guide/english/certifications/responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays/index.md

---
title: Use a Retina Image for Higher Resolution Displays
---
# Use a Retina Image for Higher Resolution Displays


---
## Solutions

<details><summary>Solution 1 (Click to Show/Hide)</summary>

Following the 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.

the style becomes:

```css
  <style>
  img { height: 100px; width: 100px; }
  </style>
```
note that 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. 

</details>