From 2011 to 2012, smartphone web traffic increased a whopping 103% (Hubspot). And, with nearly half of all American adults now using a smartphone according to Pew research, web design for mobile devices has surged in importance.

Mobile web design is all about optimizing text, icons, and images for the smaller screen sizes of smartphones, tablets, and other mobile devices – while also balancing out the need for speedy page load times and low bandwidth usage. The following items are the top five things you need to know about using images in your mobile website design.

Images Eat Bandwidth

A picture is worth a thousand bytes, as the saying so nearly goes. Images make your mobile site visually interesting and can engage your audience more effectively than text. According to WhiteBoardMag.com, “… If a mobile user is not happy with your mobile website, there is a 40% chance they will go visit a competitor’s.”

Choosing the right image sizes and amount of images, then, is integral. Take too long to load, and you’ll risk losing customers.

Using too many images – or a few images with large file sizes – not only makes your mobile site run slow, but also wastes the device’s battery power in processing and displaying those images.

Different Images use Different Formats

Once you’ve decided what images need to stay on your mobile website, make sure each image is in the right format. Using the correct format ensures that the greatest amount of visual information is displayed while simultaneously keeping file sizes and page load times low.

Use the JPEG or JPG format for images that are complex and use a wide variety of colors – especially photographs or images with subtle color gradations.

Use the GIF format for images that use solid colors rather than blends or gradients. The GIF extension can display images with a transparent background, which makes them great for logos and line art.

The PNG format works the same as GIF, but offers smaller file sizes and better transparency.

Responsive Design Isn’t a Cure

Smartphone screens can range in both size and resolution, and an image that looks good on one may look blurry or pixelated on another if you don’t optimize your images correctly. You have several options for resizing the images on your mobile website to fit the wide variety of screens on which it may be displayed; responsive web design being one of them. This technology uses CSS spreadsheets to scale images and website layouts to fit the screen.

This process requires the mobile device to download a large version of each image before compressing each to fit the screen, which can extend page load times and use up processing power.

But Neither is Coding for Every Device

If responsive design doesn’t work for you, you can code your mobile site to recognize a device’s screen size and automatically load the appropriately-sized image on the page.

This technique saves on load times and processing power, but is labor-intensive for the web designer.

Small Screens Limit Design

Formatting your images correctly for the small screen is only half the battle. An image may look amazing on your 1920x1200 HD monitor, but become completely indecipherable on an Android’s 320x240 screen.

Whether you’re designing a mobile website or a banner ad, you need to design with small screens in mind. Remove extraneous design elements that don’t reduce well. Replace busy icons with simpler versions that are easier to parse on the smaller screen.

When it comes to using images in mobile web design, you need to keep a number of variables in mind: amount of images, image format, image size, and screen size. Creating a mobile website that balances out effective images with low bandwidth usage takes some finessing, so just remember: less is more.

Megan Webb-Morgan is a web content writer for lead generation ResourceNation. She writes about small business, focusing on topics such as business sales. Follow Resource Nation on Facebook and Twitter, too!