Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Exploring context-aware image sizing

From: Responsive Design with Drupal

Video: Exploring context-aware image sizing

One thing we probably don't think about much in the US anymore is bandwidth, and assuming that everyone must have fast speeds and with more users having mobile devices and 4G speed, why would we? How about other countries where bandwidth is not so fast? How does your website look on a mobile device in let's say Africa? How long does it take to load? Even though we've applied responsive techniques to our images for them to scale visually, we are still serving up a larger image file size. Let's remedy that by discussing context aware image sizing and a technique known as adaptive images.

Exploring context-aware image sizing

One thing we probably don't think about much in the US anymore is bandwidth, and assuming that everyone must have fast speeds and with more users having mobile devices and 4G speed, why would we? How about other countries where bandwidth is not so fast? How does your website look on a mobile device in let's say Africa? How long does it take to load? Even though we've applied responsive techniques to our images for them to scale visually, we are still serving up a larger image file size. Let's remedy that by discussing context aware image sizing and a technique known as adaptive images.

Let's begin by browsing to drupal.org/projects/adaptive_image. The adaptive image module provides device- appropriate versions of images from all your fields. You can activate the adaptive images by simply adding an adaptive effect to any of your image styles. The technique used is derived from the adaptiveimages.com created by Matt Wilcox. Let's go ahead and scroll down the page and click on the zip file to download it. Once the download is complete, go ahead and open up your Downloads folder, double-click on the file to extract it, and then let's copy this to our Desktop/Drupal/drupal.responsive/sites/all/modules folder.

With the module in place, go ahead and close the download window, and let's tab back over to our responsive theme. Go ahead and log in, Username and Password all lowercase, the word admin, navigate to modules, and then scroll down the page until we find the module so that we can enable it. Here we go, Adaptive Image. Make sure it's checked, and then click on Save configuration. Unlike most modules, though, there is actually no configuration, so to speak. Instead, we actually need to go to Configuration > Image Styles, and we need to add a new preset for mobile devices.

We can do this by clicking on Add style, giving it a STYLE NAME of mobile, and the naming convention here is whatever you want to call it, but for my purposes, I'm going to call mobile and then click on Create new style. Underneath the Effects, go ahead and select Adaptive and then click Add. For the resolutions, these are actual breakpoints that we've been dealing with. For demonstration purposes, I'm going to go ahead and leave the resolutions as is. But if you have different breakpoints that you're theming against, this is where you would make those modifications. Notice the Mobile First has been checked.

This will send out to smallest version of the image when the resolution cannot be determined. Go ahead and click on Add effect. In order to utilize this effect, we need to go to Structure > Content Types, locate the content type that you want to use this against. In our case, the Article which is our blog post that is utilizing images. I then want to click on manage display, and for the Image field you see a little icon to the right. If I click on this, I can choose my mobile preset that I just configured. Go ahead and do that now, click Save, and you're done with the configuration portion.

Go ahead and click on Home, and then let's go ahead and click on Blog, and then go ahead and click actually on one of the blog posts themselves. What I'm going to do here is scroll up a little bit, and then I'm actually going to start resizing the page. And before, everything was fluid. Now you're actually going to see some different snapping take place. There is one, there is another, now it scales, and then it jumps back. So what's happening is it's actually doing an image replacement when you're seeing this snap based off the different breakpoints. So we're actually serving up a smaller file size of that image.

Scalable images both visually and physically are now capable depending on where your end user market is located and the time you want to spend in implementing context aware image sizing. With the adaptive image module, we're able to achieve that concept very easily and increase the performance of our design in mobile devices. The nice thing about this module is we don't have to create different sized images. By simply making that preset, those images are actually created for us and served up appropriately.

Show transcript

This video is part of

Image for Responsive Design with Drupal
Responsive Design with Drupal

35 video lessons · 6817 viewers

Chaz Chumley
Author

 
Expand all | Collapse all
  1. 3m 19s
    1. Welcome
      51s
    2. Using the exercise files
      1m 25s
    3. Exploring the finished project
      1m 3s
  2. 16m 30s
    1. Installing Acquia Dev Desktop
      3m 37s
    2. Importing a Drupal website
      4m 7s
    3. Restoring database snapshots with the Backup and Migrate module
      3m 13s
    4. Understanding the Devel module
      5m 33s
  3. 5m 48s
    1. What is responsive design?
      3m 32s
    2. Understanding adaptive design
      2m 16s
  4. 15m 33s
    1. Discovering fixed-width layouts
      3m 47s
    2. Understanding breakpoints
      3m 33s
    3. Using Adapt.js with Drupal
      8m 13s
  5. 27m 21s
    1. Discovering fluid layouts
      3m 43s
    2. Exploring fluid widths
      8m 34s
    3. Working with fluid margins and padding
      7m 41s
    4. Making text fluid
      7m 23s
  6. 16m 37s
    1. Discovering fluid images
      3m 5s
    2. Exploring fluid image techniques
      5m 6s
    3. Working with fluid media techniques
      8m 26s
  7. 21m 36s
    1. Introduction to media queries
      3m 2s
    2. Writing our first media query
      6m 10s
    3. Creating a style sheet for each breakpoint
      3m 53s
    4. Understanding media query best practices
      8m 31s
  8. 8m 14s
    1. Introduction to responsive menus
      2m 32s
    2. Creating a responsive menu
      3m 5s
    3. Integrating responsive menus into Drupal
      2m 37s
  9. 14m 52s
    1. Introduction to responsive tables
      1m 25s
    2. Creating responsive tables
      7m 30s
    3. Integrating responsive tables into Drupal
      5m 57s
  10. 21m 6s
    1. Introduction to responsive forms
      3m 9s
    2. Creating responsive forms
      8m 30s
    3. Integrating responsive forms into Drupal
      9m 27s
  11. 6m 38s
    1. Adding min-width and max-width support with Respond.js
      2m 35s
    2. Exploring context-aware image sizing
      4m 3s
  12. 1m 11s
    1. Next steps
      1m 11s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Responsive Design with Drupal.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.