Resizing Images for Mobile Using jQuery

Mobile design is fun. It’s this unique blend of digital, touch and interaction all wrapped into a small device that fits into the palm of your hand. And, let’s face it, it’s still a new, rapidly growing technology. New stuff is always fun.

Now, if you’re like me, you’ve probably read about 100 ways to resize your images on mobile. With the rise in popularity of media queries, people are resizing images based off certain screen widths or event swapping images for smaller ones. While each of these are great, they’re not always realistic for your project. Let me elaborate:

Media queries are awesome. They’ll let you determine what styles to use depending what view-port size you have. Read more about them here to see what’s possible. But media queries only really work well when you’re dealing with a responsive site design, not a site with a custom mobile template.

The technique I’m going to show you works extremely well when you’re serving a different template to your mobile user, or you’re developing a new mobile website for a client that already has a CMS in place that can’t handle swapping out images with lower quality versions.

The jQuery

// Don't forget to load the jQuery library before doing this
// Initialize jQuery
$(document).ready(function() {
     // Set the variable $width to the width of our wrapper on page load
     $width = $('#content').width();
     // Target all images inside the #content. This works best if you want to ignore certain images that are part of the layout design
     $('#content img').css({
          // Using jQuery CSS we write the $width variable we previously specified as a pixel value. We use max-width incase the image is smaller than our viewport it won't scale it larger. Don't forget to set height to auto or else it will squish your photos.
          'max-width' : $width , 'height' : 'auto'
          });
     });

The HTML

Put your img tag here

That’s it! Once your phone/tablet loads, the jQuery will find the width of your wrapper and save it in the variable $width and apply it throughout. The same is true on an iPad or any device. Don’t forget to use ‘max-width’ – that’s the key. If your iPad is 700px wide, and your image is 600px, it will stay 600px. If your device is 500px, and your image is 600px, it will resize your image to be 500px and load correctly.

Looking ahead: A lot of great things are happening with jQuery and mobile phones. If you haven’t looked at jQuery mobile yet, I encourage you too. I’m sure lots of great resources are out there for resizing images on mobile, but this is the simplest solution I’ve come up with to date. I’m open to other ideas or your techniques as well, just post in the comments!

Our Thoughts

The 2010s: The decade of social media

Reflecting on 10 years of social media. In 2010, Tik Tok by Ke$ha spent nine weeks at the top of the Billboard Hot 100. Angry Birds was among the most downloaded apps of the year, and “double rainbow” took the internet by storm. Apple released the iPhone 4, but Siri had not yet been created. Nearly a decade later, Old Town Road by Lil Nas X and Billy Ray Cyrus dominated the Billboard chart for 19 weeks, breaking records....

Dispelling Udder Nonsense with the Nevada Dairymen

In October, the Public Relations Society of America (PRSA) Sierra Nevada Chapter honored us at the annual 2019 Silver Spikes award ceremony for our work with various clients. You can read more about our Silver Spikes haul here, but today we’re mooooving other awards off the shelf to talk about one client in particular: The Nevada Dairymen. Our “Udder Nonsense” campaign, which ran throughout June in honor of National Dairy Month, took home a Silver Spike in the category...

How to take advantage of Google Ad Grants as a small nonprofit

Let’s talk about something nonprofits know very well: Grants! More specifically, let’s talk about something a lot of nonprofits don’t know about, or maybe don’t know how to manage: Google Ad Grants.  Google Ad Grants are a grant offered by Google through their Google for Nonprofits program (If you’re not already familiar, get familiar here) which gives $10,000 real, actual dollars to nonprofits in Google Ads spend. It may sound too good to be true but I assure you,...