freeCodeCamp/guide/english/certifications/responsive-web-design/responsive-web-design-princ.../use-a-retina-image-for-high.../index.md

579 B

title
Use a Retina Image for Higher Resolution Displays

Use a Retina Image for Higher Resolution Displays

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 4 becomes:

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