Learn it fast with expert-taught software and skills training at lynda.com. Start your free trial

By Chris Converse | Saturday, July 26, 2014

Optimize Graphics for the Mobile Web

mobile-web-hero

When creating graphics for the web, we walk a delicate line between file size and image quality. We want smaller files for faster performing sites, especially on mobile, but we also want beautiful imagery on today/s high-quality screens.

With nearly 20% of all web traffic coming from mobile devices, it’s important to consider the file size of your graphics. The irony of this trend is that mobile devices have higher quality displays and, typically, a slower internet connection. This challenges web designers to create high-quality graphics with smaller file sizes.

This is a pretty tough order, but I have some techniques that can help reduce sizes and optimize graphics for web delivery.

By Lauren Harmon | Tuesday, January 21, 2014

Exporting an illustration as a universally supported PNG file: Deke's Techniques

Exporting a PNG avatar from Illustrator

Explore Deke’s Techniques at lynda.com.

Welcome to the final stage in the Deke’s Techniques avatar challenge—where you transform your Adobe Illustrator file into a PNG graphic with a transparent background. Transparent PNGs are now supported by all major web browsers, so it’s a great file format choice for graphics you intend to display on the web. The trick to this technique is to take your file back to Photoshop. From there, you can compare it to your reference photograph for accuracy and make sure the avatar scales down correctly. Deke also shows you how to nicely center your avatar on the canvas, and choose the resampling option that’s best for reducing the size of your artwork—and (surprise) it’s not the option Adobe recommends. Learn all about it in today’s free video.

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to our subscription library courses
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Start your free trial

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.