freeCodeCamp/use-a-retina-image-for-higher-resolution-displays.english.md at e6718ae851cdbdd69e7317eb34560a6dcccce0aa

Files

Martin e6718ae851 Update of Product Design, UX Design and User Flow articles (#18709 )

* User Flow: Information, Articles, Youtube update

Explanation on what is User Flow with youtube videos and articles for reference and/or resource.

* Update of UX Design article

Update the article with more information and more links to articles and books.

* Product Design: Info, Articles, Youtube update

Explanation on what is Product Design with youtube videos and articles for reference and/or resource.

* Update description of Retina Display

As reported in issue #18129, there is a lack of explanation on what a retina display is and some users find it difficult to understand what they are doing exactly, so I added a short explanation on what a High-Resolution Display is and what a Retina Display is.

2018-10-13 16:01:40 -05:00

2.5 KiB

Raw Blame History

id, title, challengeType, videoUrl

id	title	challengeType	videoUrl
587d78b1367417b2b2512b0a	Use a Retina Image for Higher Resolution Displays	0	https://scrimba.com/p/pzrPu4/cVZ4Rfp

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.

The simplest way to make your images properly appear on High-Resolution Displays, such as the MacBook Pros "retina display" 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

tests:
  - text: Your <code>img</code> tag should have a <code>width</code> of 100 pixels.
    testString: 'assert($("img").css("width") == "100px", "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.");'
  - text: Your <code>img</code> tag should have a <code>height</code> of 100 pixels.
    testString: 'assert($("img").css("height") == "100px", "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.");'

Challenge Seed

<style>

</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">

Solution

// solution required

2.5 KiB Raw Blame History