Hipstirred: Hi-Res Images

Topics Covered in This HTML & CSS Tutorial:

High-Resolution Graphics for Modern Displays (@2x Images), Responsive Image Sizing Techniques, Understanding the Distinction Between CSS Pixels and Hardware Pixels

Exercise Preview

Exercise Overview

In today's device landscape, screen pixel density varies dramatically across devices. High-resolution displays—originally popularized by Apple's Retina branding but now universally known as HiDPI (high dots per inch) displays—contain at least twice the pixel density of standard screens. These displays pack significantly more pixels into the same physical space, creating sharper, more detailed visual experiences.

For web developers, this presents both an opportunity and a challenge. While HiDPI screens can display incredibly crisp graphics, they expose the limitations of standard-resolution images, which appear blurry or pixelated when scaled up. Professional web development now requires a dual-image strategy to ensure optimal visual quality across all device types.

Let's walk through the practical implementation of high-resolution image optimization, starting with the fundamental setup and progressing through real-world application techniques that you'll use in professional projects.

1. We'll be using a new folder of provided files for this exercise. Close any files you may have open in your code editor to avoid confusion and ensure you're working with the correct assets.
2. For this exercise we'll be working with the Hipstirred Hi-Res Images folder located in Desktop > Class Files > Web Dev Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open hi-res-demo.html from the Hipstirred Hi-Res Images folder.
4. Preview hi-res-demo.html in a browser. As the headings explain, we'll be placing both a low-res (@1x) and a high-res (@2x) version of an image in the browser to do some comparison testing that will demonstrate the visual differences across display types.

Sizing Things up

Understanding how images render at different resolutions is crucial for modern web development. We'll start by examining how standard-resolution images perform, then contrast this with high-resolution alternatives.

1. Return to hi-res-demo.html in your code editor.

2. Add the following image just above the first h2, as follows:

   <img src="images/logo.png" height="36" width="105">
   <h2>This is a low-res (@1x) image displayed at its native size</h2>

3. Save the file and preview it in a browser. You are viewing this logo at its native width of 105 pixels.

   • If you're on a standard/low-res screen, it looks fine.
   • If you're on a Retina/HiDPI screen, you may notice that it's a bit fuzzy and/or pixelated (if your eyesight is good enough).

   This visual difference highlights why modern web development requires a more sophisticated approach to image delivery. To create sharper images for users with hi-res screens, web designers and developers create images at twice the intended display size. Because these images contain 2 pixels for every 1 pixel in a low-res image, they are called 2x or @2x images.

   The mathematics behind this approach is straightforward: a hi-res @2x image occupies the same physical screen space as a low-res @1x image, but because there are more, smaller pixels packed into the same space, it contains significantly more detail and appears dramatically sharper. As an industry-standard practice established across major tech companies, hi-res images are saved with @2x appended to their filename, creating a clear naming convention that helps developers manage asset libraries efficiently.

4. Return to your code editor to examine a @2x version of the logo image.

5. Add the following @2x image just above the second h2, as follows:

   <img src="images/logo@2x.png" height="72" width="210">
   <h2>This is a hi-res (@2x) image displayed at its native size</h2>

6. Save the file and preview it in a browser. Notice that it's twice as large, but may still appear fuzzy on HiDPI displays. This demonstrates that simply having a high-resolution source file isn't enough—we need to implement proper sizing techniques to achieve optimal results.

Code Pixels Vs. Hardware Pixels

One of the most important concepts in modern web development is understanding the distinction between logical pixels (what we define in code) and physical pixels (the actual hardware elements that emit light). This relationship fundamentally changed with the introduction of high-density displays.

When HTML and CSS were originally developed in the 1990s, the relationship was simple: 1 pixel in code equaled 1 pixel of hardware. However, with the advent of high-resolution screens, this relationship became more complex. Today, 1 CSS pixel may correspond to 2, 3, or even 4 hardware pixels, depending on the device's pixel density ratio.

Fortunately, modern web browsers handle this complexity automatically, translating CSS pixels into appropriate hardware pixels based on the device's characteristics. For example, the original iPhone was 320px wide in both code and hardware. The first Retina iPhone maintained 320px width in CSS (preserving the same logical screen size), but actually contained 640px of hardware pixels. This abstraction allows developers to write consistent code while browsers optimize rendering for each device.

1. Let's see this pixel relationship in action. Return to your code editor.

2. As shown below, add the @2x image again just above the third h2, but this time with the same dimensions as the 1x version:

   <img src="images/logo@2x.png" height="36" width="105">
   <h2>This is a hi-res (@2x) image displayed at half its native size</h2>

   By setting the CSS pixel dimensions to half the image file's native size, we're enabling the browser to utilize the full resolution potential of the @2x image. On HiDPI displays, the browser can map each CSS pixel to multiple hardware pixels, utilizing the extra image data to create a sharper visual result. The logo will appear the same size across all devices, but will look significantly sharper on high-resolution screens.

3. Save the file and preview it in a browser.

   • If you're on a hi-res screen: The bottom hi-res @2x logo will look noticeably sharper than the other versions. Success!
   • If you're on a low-res screen: The bottom hi-res @2x logo will not appear sharper due to hardware limitations. Think of it like viewing a 4K video on a 1080p monitor—the display hardware simply cannot render the additional detail.
4. CSS provides an alternative method for controlling image dimensions. We can also use CSS properties to modify the size of a Retina or HiDPI image. Return to hi-res-demo.html in your code editor.

5. In the bottom version of the @2x image (above the third h2), completely delete the height and width attributes, so you end up with the following:

   <img src="images/logo@2x.png">
   <h2>This is a hi-res (@2x) image displayed at half its native size</h2>

6. Save the file and preview it in a browser. The image now renders at its full native dimensions. Let's implement CSS-based sizing for better maintainability.
7. Return to hi-res-demo.html in your code editor.

8. Add the following class to the bottom version of the @2x image:

   <img src="images/logo@2x.png" class="logo">

9. At the bottom of the style tag (in the head of the file), add the following new rule:

   .logo {
         width: 105px;
      }
   </style>

10. Save the file and preview it in a browser. This CSS approach provides the same visual result while offering greater flexibility for responsive design and maintenance. Both HTML attributes and CSS properties are valid approaches, though CSS is generally preferred for its separation of concerns and easier maintenance in larger projects.

Replacing Low-Res Images with @2x Versions in Hipstirred

Now that we understand the theory and mechanics of high-resolution images, let's apply these techniques to a real website. We'll upgrade the Hipstirred site with @2x assets, demonstrating the professional workflow you'll use in client projects.

1. Return to your code editor.
2. Open index.html from the Hipstirred Hi-Res Images folder.

3. Let's replace the logo with the provided @2x image. In the header tag near the top, edit the logo image as follows:

   <img src="images/logo@2x.png" class="logo" height="36" width="105" ALT="Hipstirred">

4. Next, we'll upgrade the social media icons in the footer. Scroll down to the footer and add @2x to the image filenames (as shown below). TIP: Efficient code editors support multiple cursor functionality. In Visual Studio Code, you can hold Option (Mac) or ALT (Windows) while clicking to create multiple cursors, allowing you to edit all three files simultaneously—a time-saving technique for batch edits!

   <a href="https://www.facebook.com">
      <img src="images/facebook@2x.png" width="24" height="24" ALT="Facebook">
   </a>
   <a href="https://twitter.com">
      <img src="images/twitter@2x.png" width="28" height="23" ALT="X (formerly known as Twitter)">
   </a>
   <a href="https://www.instagram.com">
      <img src="images/instagram@2x.png" width="24" height="24" ALT="Instagram">
   </a>

5. Save the file and preview it in a browser. If you're working on a standard, low-resolution screen, there will be no visible change, but users with high-resolution displays will experience significantly sharper logo and social media icons. This seamless degradation is one of the key advantages of proper @2x implementation—it enhances the experience for users with capable hardware without negatively affecting others.

   Leave index.html open in the browser, so you can reload the page as you make changes to the code.

6. Background images require a different approach than inline images. We've also provided a @2x version of the hero background image. Return to your code editor to implement this upgrade.
7. Open main.css from the Hipstirred Hi-Res Images folder.

8. Find the rule for .hero (near the bottom) and edit the background-image value as follows:

   background-image: url(images/hero@2x.jpg);

9. Save the file.
10. Return to index.html in the browser and reload the page. The transition should appear seamless! But how can you verify this is actually a retina image, particularly if you're working on a standard screen? Let's investigate using a debugging technique.
11. Return to main.css in your code editor.

12. In the rule for .hero, comment out the background-size property as follows:

    /*background-size: cover;*/

    Comments are an essential tool in web development, serving multiple purposes. They allow developers to leave notes and documentation for future reference, provide context for complex code sections, and temporarily disable code for testing purposes without deletion.

    Comments use different syntax depending on the language:
    CSS comments are written like this: /* this is a comment */
    HTML comments are written like this: <!-- this is a comment -->

    Most professional code editors (including Visual Studio Code) provide keyboard shortcuts for toggling comments. Use Cmd–/ (Mac) or CTRL–/ (Windows) to quickly comment or uncomment selected code. The editor automatically detects the file type and applies the appropriate comment syntax.

13. Save the file.
14. Return to index.html in the browser and reload the page. You should see a dramatically oversized hero image—this confirms that we're successfully loading the @2x version, which is twice the dimensions of the original.
15. Return to main.css in your code editor.

16. In the rule for .hero, uncomment the background-size property to restore proper rendering:

    background-size: cover;

17. Save the file.

18. Return to index.html in the browser and reload the page. Excellent! This page now delivers optimized visual quality across all device types. You've successfully implemented a professional-grade high-resolution image strategy that will enhance user experience on modern displays while maintaining compatibility with older hardware.