greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Word change in responsive design principles English (#37559) 

* Word change in responsive design principles

* Word change in responsive design principles
pull/37575/head
Rajat Hans 2019-10-27 02:27:20 +05:30 committed by Manish Giri
parent 9db88a0d7c
commit 0551a6a57f
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md
View File

@ -8,7 +8,7 @@ forumTopicId: 301142
## Description
<section id='description'>
With the increase of internet connected devices, their sizes and specifications vary, and the displays they use could be different externally and internally. Pixel density is an aspect that could be different on one device from others and this density is known as Pixel Per Inch(PPI) or Dots Per Inch(DPI). The most famous such display is the one known as a "Retina Display" on the latest Apple MacBook Pro notebooks, and recently iMac computers. Due to the difference in pixel density between a "Retina" and "Non-Retina" displays, some images who have not been made with a High-Resolution Display in mind could look "pixelated" when rendered on a High-Resolution display.
With the increase of internet connected devices, their sizes and specifications vary, and the displays they use could be different externally and internally. Pixel density is an aspect that could be different on one device from others and this density is known as Pixel Per Inch(PPI) or Dots Per Inch(DPI). The most famous such display is the one known as a "Retina Display" on the latest Apple MacBook Pro notebooks, and recently iMac computers. Due to the difference in pixel density between a "Retina" and "Non-Retina" displays, some images that have not been made with a High-Resolution Display in mind could look "pixelated" when rendered on a High-Resolution display.
The simplest way to make your images properly appear on High-Resolution Displays, such as the MacBook Pros "retina display" is to define their <code>width</code> and <code>height</code> 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: