Responsive Images

While the intern project is still in full swing, I have also been working on GitHub issues for the front-facing websites. This was my first time using GitHub for a multiple person, large scale project. While I’ve dabbled in it previously for school projects, I had not used it at its full capacity until this project. The hardest part of getting into GitHub was remembering the terminal commands and knowing when and where to use them. After a couple iterations, I was able to smoothly interact with the version control system. One aspect that I really appreciated while working with the Industry Dive repositories was the streamlined process. All issues and pull requests had templates, creating a consistent bug and solution reporting process. Another thing I was introduced to with these projects was Sass, a CSS extension language. The only adjustment that I had to make when using Sass was making sure that I understood all of the variables and nesting structures.

Two of the issues I was assigned concerned responsively serving images. My only experience with responsive images up until this point was with retina and non-retina images. To fully understand the breadth of options for responsive images I took the Udacity course Responsive Images. This helped me understand possible solutions to make the images responsive. Another great reference that helped after I had taken the course was A List Apart’s article Responsive Images in Practice. Together both of these resources helped me pick the best solutions for my issues.

Screen Shot 2016-07-21 at 12.28.48 PM
The Respsonive Image Udacity Course

Challenge

My task involving serving responsive images was more complicated than I anticipated. Both issues involved three types of images: background images in CSS, fixed size icons, and fluid width images. Each one of these required a slightly different solution given their specific case: the background images needed media queries since they were in CSS; the fixed size icons would just need to have a retina and non-retina option; and the fluid width images would need srcset and sizes. The fixed size icons were the easiest because they just need two sizes and the background images were straightforward as well since I had used media queries before. The most challenging issue was the fluid width images.

Approach

The approach I took for the fluid width images was to first figure out all of my use cases. I ended up boiling it down to five options: small (non-retina), small (retina), medium (non-retina), medium (retina) and large.

Once I determined the options, I then had to figure out what breakpoints the site was using. It turned out there was a specific rem size for a small and medium breakpoint. Then I had to determine the largest image size needed for each option and resize the images accordingly. I then implemented either the media queries for the background-images or the srcset and size for the fluid width. The last step was to test that each device was being served the correct image. I used the Chrome developer tools to test the site on different devices. The one caveat was that I had to make custom non-retina devices to test those use cases.

Results

The results were images being served correctly. Below is the code for an example of one of the fluid width images. The sizes are calculated based off of the grid being used. The .66 is the 66% that the image is taking up of the screen and the 1.875rem is the padding around the image. The final size is 100 because in mobile it takes up the entire screen. I ended up only needing three image sizes for the five use cases since the large (1200) could be used for both large and medium (retina) and the medium (800) could be used for both medium (non-retina) and small (retina).

<img srcset="/brandstudio_600.jpg 600w, 
/brandstudio_800.jpg 800w, /brandstudio_1200.jpg 1200w"
sizes="(min-width: 40.0625em) calc((.66*100vw)-1.875rem),
(min-width: 64.0625em) calc((.66*62.5rem)-1.875rem), 100vw"
src="/brandstudio_800.jpg" alt="Responsive"/>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s