Optimizing Images for Mobile

Topics covered in this HTML Email tutorial:

HTML email image quality: a balancing act, Dealing with hi-res/retina images, Swapping the banner on mobile, Further optimizing the mobile banner

Exercise Preview

Exercise Overview

All mobile phones and tablets have hi-res screens, so in this exercise you’ll add higher-quality images that will look better on hi-res screens while keeping file sizes as small as possible. We’ll also swap out the banner image for one that is designed for smaller mobile screens, while keeping the desktop version for larger phones.

1. If you completed the previous exercise, date-night-exclusive-picks.html should still be open, and you can skip the following sidebar. If you closed date-night-exclusive-picks.html, re-open it now. We recommend you finish the previous exercises (1C–1D) before starting this one. If you haven’t finished them, do the following sidebar.

   If You Did Not Do the Previous Exercises (1C–1D)

   1. Close any files you may have open.
   2. On the Desktop, go to Class Files > yourname-HTML Email Class.
   3. Delete the 2-Column Layout folder if it exists.
   4. Duplicate the 2-Column Layout Columns Done folder.
   5. Rename the folder to 2-Column Layout.
2. If date-night-exclusive-picks.html is still open in your browser, reload the page. Otherwise, open it in a browser (it’s in yourname-Responsive Email Class > 2-Column Layout).

3. Resize the browser window. The 1-column mobile layout is looking fairly good, but we have an image quality problem.

HTML Email Image Quality: A Balancing Act

When the layout changes from 2 columns to 1 column, the exclusive picks images (which are 290 pixels wide) become wider than they were in the desktop layout (over 550 pixels wide in the mobile layout). They weren’t made to be this big, so they are quite pixelated.

The original low-res iPhone was 320 pixels wide. High-res “Retina” iPhones doubled that to 640 pixels, so they are called 2x screens. Our current 290 pixel images will look pixelated on all phones.

Sharp and crisp images look great, but large files can take too long to download. To make these images as sharp as possible, we would double the largest pixel width for a high-res screen (to around 1100 pixels). Doing so, however, would make the filesize bigger than we’d like. So we opted for 900 x 600 pixel images, that are large enough to look crisp on high-res screens.

1. Leave the file open in the browser, so you can reload the page to see your changes.

2. In your code editor, open date-night-exclusive-picks.html from the 2-Column Layout folder if it isn’t already open. (Open the entire folder if your code editor allows.)

3. We prepared a file with the URLs for the higher-resolution versions of our 3 date listing images. Open large-images.txt from 2-Column Layout > snippets.

4. Before we replace our 3 listing images with this code, let’s take a quick look at one image. Around line 2, copy the link for the Couple Boxing 900 x 600 image that looks like this:

   http://www.nobledesktop.com/nl-date-night/img/couple-boxing@2x.jpg
   

5. Switch to the browser and paste the link in a new tab. Lookin’ sharp!

6. Switch to the Date Night Exclusive Picks tab in the browser so we can contrast the 2 images. Make sure to resize the browser window to see the images at their largest width. Whoa, the quality is so much worse here. Switching the images out will be a huge improvement!

7. You can close the image tab. Leave date-night-exclusive-picks.html open in the browser, though.

8. Switch back to your code editor. You should be back in large-images.txt.

9. If the Couple Boxing image is no longer on your clipboard, copy it again.

10. Switch back to date-night-exclusive-picks.html and around line 86, replace the img src value as shown:

    <a href="http://www.example.com" target="_blank"><img class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/couple-boxing@2x.jpg" width="290" alt="Couple Fighting"></a>
    

    NOTE: We did not switch out the set width because we want to keep our images this size in the 2-column desktop layout. (Remember that we have a media query that is able to override this attribute for the mobile version.)

11. Let’s repeat this process to replace the other 2 exclusive pick listings with high-res images. You can copy and paste the provided URLs or simply edit the filenames. To keep things simple, we’ve used a standard naming convention for our hi-res images: the hi-res filename ends with @2x.

    • Around line 103, change the second img’s src value so it reads:
      http://www.nobledesktop.com/nl-date-night/img/beer-bar-label@2x.jpg

    • Around line 120, change the third img’s src so it reads:
      http://www.nobledesktop.com/nl-date-night/img/milan-canal@2x.jpg

    • Close large-images.txt if you still have it open.

12. Save date-night-exclusive-picks.html and reload the page in the browser. Sharp!

Replacing the Banner on Mobile Screens

1. Concentrate on the size of the Date Night banner image at the top as you resize the browser window smaller. It looks a bit too small when the browser is between 320–414 pixels, the range of mobile screen widths (which as you recall is our main target).

   While the text isn’t all that hard to read, it looks awkward as a banner image. To enhance the banner for mobile, let’s switch out this image for a different one that has more prominent text and was optimized for mobile dimensions.

2. Switch back to your code editor.

   Our first task is to hide the current banner image in the 1-column mobile layout. This is because we’ll add the mobile version as a background image behind the desktop image. We will display that background image on mobile.

3. Scroll to the banner image around line 71, which looks like this:

   <a href="http://www.example.com" target="_blank"><img class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/header.png" width="680" alt="Date Night"></a>
   

   We want to target this element with a class, but as you can see, this image already has a class of resImage (and there’s already a style for it).

   NOTE: Applying multiple classes to an element is a big no-no in an HTML email because this can confuse some email clients. Media queries wouldn’t work in those clients if any element has more than one class. Let’s find a workaround.

4. Because this image is the only one inside its table cell, let’s give that cell a class. Around line 70, add the following bold class to the td above the image:

   <td class="mobileBanner" align="center" width="100%">
      <a href="http://www.example.com" target="_blank"><img class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/header.png" width="680" alt="Date Night"></a>
   

5. In the media query under the rule for .deviceWidth, add the following bold rule:

      width: 100% !important;
   }
   .mobileBanner img {
      display: none !important;
   }
   .resImage {
   

6. Yahoo’s mobile app will strip !important when there’s a space after the display value (none, block, etc.). Delete the space before !important so you end up with the following code (luckily this does not mess up other email clients):

   .mobileBanner img {
      display: none!important;
   }
   

7. Let’s fix the other places this occurs. Delete the space before !important in the display property of the following rules:

   • .wrapper
   • .deviceWidth

8. Save the file and reload the browser. Resize the browser window, and you’ll see that the banner image is visible on the desktop and invisible on mobile.

9. Let’s strategize what to do next. We want the desktop banner to disappear, but we don’t want the code to collapse the mobileBanner table cell; it needs to stay open so it can display the background image we’ll add soon. However, opening the table cell up is a little tricky because we want to keep the height proportional with the width so that the background image has the same aspect ratio on all mobile screens. We will have to figure out the mobile banner’s dimensions so we can calculate this aspect ratio. We’ll then add that amount of padding to the mobileBanner table cell.

10. Let’s take a look at the file with the URL for the mobile banner that we prepared for you. In your code editor, open mobile-header.txt from 2-Column Layout > snippets.

11. Copy the link (so we can go see its dimensions in a browser):

    http://www.nobledesktop.com/nl-date-night/img/header-mobile@2x.png
    

12. Switch to the browser and paste the link in a new tab.

    In the browser’s tab, notice the image is 1200 x 520 pixels, a large high-resolution image. However, its file size is not too large for our purposes—this PNG is small enough since it has limited colors.

13. To find out the aspect ratio, we have to divide the height (520) by the width (1200). If you do the math, you’ll discover that the height is 43.33% of the width. Let’s use this aspect ratio to hold open the mobileBanner table cell.

14. Close the image tab and return to your code editor.

15. Switch to date-night-exclusive-picks.html.

16. Now let’s write a rule that will hold open the cell. In the media query under the rule for .deviceWidth, add the following bold rule:

       width: 100% !important;
    }
    .mobileBanner {
       padding-top: 43.33% !important;
    }
    .mobileBanner img {
    

    The top padding takes up 43.33% of the width that’s available to the td with a class of mobileBanner. This code should make it so the height scales down proportionately with the width.

17. Save the file and reload the browser. Resize the browser window until the desktop banner disappears.

18. To see whether the height and width stay proportionate, slowly make the browser window smaller. Awesome, the deviceWidth td is always held open at the same aspect ratio! That means it’s time to add in the image.

19. Return to your code editor. If the mobile header image is no longer on your clipboard, copy it again from mobile-header.txt.

20. Switch back to date-night-exclusive-picks.html.

21. As shown below in bold, add the following to the rule for .mobileBanner (you can paste the code you copied from mobile-header.txt for the background-image URL):

    .mobileBanner {
       background-image: url(http://www.nobledesktop.com/nl-date-night/img/header-mobile@2x.png) !important;
       padding-top: 43.33% !important;
    }
    

22. Save the file and reload the browser. Resize the browser window. The background image is way too large for its container, so we need it down to fit the area.

23. Add the following bold code to the rule for .mobileBanner:

    .mobileBanner {
       background-image: url(http://www.nobledesktop.com/nl-date-night/img/header-mobile@2x.png) !important;
       background-size: cover !important;
       padding-top: 43.33% !important;
    }
    

    This rule tells the background image to always cover (take up) the entirety of the space available to it. The image will size down proportionately because we specified the exact aspect ratio it needs to be. We should have a perfect fit.

24. Save the file and reload the browser. Superb!

Further Optimizing the Mobile Banner

If you resize the browser window to see the first breakpoint where our layout transforms to the mobile-friendly single column (at 680 pixels), we see that our mobile banner will look absurdly large on a wider mobile screen. While we’re still primarily concerned with 320–414 pixel-wide phone screens, we want our email to look good on as many devices as possible.

The desktop banner still looks nice on large mobile screens, so let’s keep it displayed until the browser width is 480 pixels or smaller (the point around which the desktop banner no longer looks good on mobile).

1. Let’s add a media query for 480 pixel and smaller screens, then move the mobileBanner rules to this new media query. Switch back to your code editor.

2. Right above the closing style tag around line 73, add a media query for screens that are 480 pixels or smaller, as shown in bold below:

            margin-top: 15px !important;
         }
      }
      @media only screen and (max-width: 480px) {
   
      }
   </style>
   

3. Around lines 54–61, cut both the rules for .mobileBanner and .mobileBanner img

4. Get rid of any extra space in the remaining code.

5. Paste them inside the media query for screens with a max-width of 480px. The new media query should look like this:

   @media only screen and (max-width: 480px) {
      .mobileBanner {
         background-image: url(http://www.nobledesktop.com/nl-date-night/img/header-mobile@2x.png) !important;
         background-size: cover !important;
         padding-top: 43.33% !important;
      }
      .mobileBanner img {
         display: none!important;
      }
   }
   

6. Save the file and reload the browser. Resize the browser window. The desktop banner still displays when the page transitions to the 1-column mobile layout, but it switches over to the mobile-optimized background image when it reaches 480 pixels. Great!

7. We have one more small issue to take care of. To see it, resize the browser window to any width at which the desktop image is displayed.

8. Hover over the banner image, and you’ll see the cursor turn into a pointer because there is a (currently empty) link surrounding the image. We presumably would want to link to Date Night’s website, so this is the behavior we want.

9. Resize the browser until the mobile-optimized banner image shows up. Hover over it to see that the cursor does NOT turn into a pointer !

   By using display: none to hide the desktop image, there’s nothing inside the a tag, so it collapsed. We need to open this tag back up, even though there won’t be any visual content inside.

10. Switch back to your code editor.

11. Inside the max-width: 480px media query, add the following bold rule to target links (the a tag) inside the mobileBanner class:

          display: none!important;
       }
       .mobileBanner a {
          display: block!important;
       }
    }
    

12. Make sure you do NOT have a space between block and !important (because of the Yahoo bug).

13. We need to hold the link open at the same height that we’re holding open the entire cell. Let’s move the padding from the table cell to the link. In the rule for .mobileBanner, cut this line of code and remove any remaining whitespace:

    padding-top: 43.33% !important;
    

14. Paste the code inside the new rule for links inside the mobileBanner class, as shown in bold below:

    .mobileBanner a {
       display: block!important;
       padding-top: 43.33% !important;
    }
    

15. Save the file and reload the browser. It should look pretty good at a desktop width.

16. Resize the browser until the mobile-optimized banner image shows up.

17. Now when you hover over the banner, the cursor should turn into a pointer so it’s clickable again.

18. Feel free to keep this page open in the browser as well as in your code editor. We’ll continue to build out the newsletter in the next exercise.

    NOTE: Unfortunately, we cannot assign alt text to a background image. For a workaround, refer to the bonus exercise Alt Text on Banner Swap.