As a product manager, you’re constantly trying to improve the user experience for your customers and increase your internal team’s efficiency.
You’re in luck.
There’s a relatively easy way to do both that most PMs overlook: Image optimization. By image optimization, we mean ensuring your images — on desktop and mobile — look flawless and don’t impede website performance. At a high level, image optimization activities include things like sizing images just right and selecting the correct file type.
If you’re thinking, “Seriously, making my pictures better? That can’t possibly move the UX needle that much.” Hear us out. You’ll be shocked to know some of the simple image optimization methods your team is ignoring — and the real benefits of picking up that slack.
Why Should You Care about Image Optimization?
Optimizing your images has a positive ripple effect. See for yourself:
Improved Site Speed = Improved UX = Improved Google Reputation
The most immediate benefit of optimizing your images is drastically decreased page load time because optimized images tend to be smaller and, therefore, take less time to load (more on this later).
Then, as a result of the decreased page load time, your UX improves. Why? Because users HATE slow-loading content. If your page doesn’t load almost instantly, they’ll just exit — that’s not exactly the way to create happy, loyal users. The UX also improves because optimized images look good on any screen size, and consistency is key to satisfied customers.
Back to page load time and the ripple effect. When your website pages load faster, your bounce rate lowers, too. Users are more likely to continue reading content on your site if they’re not waiting for everything to load and growing impatient.
A low bounce rate coupled with fast site speed not only improves UX, it also improves your SEO authority. Google’s algorithm values both metrics and, in general, deems sites with satisfactory usability more reputable.
Translation: Higher ranking opportunities on Google.
Better Image Organization = Better Internal Processes & Better SEO Authority
Image optimization also involves organizing your assets (again, more on this later). And organizing your assets improves your internal team’s efficiency. When your designers hand their files over to your dev team, the dev team won’t have to guess which image or image size to use.
Your team might even ship products faster as a result.
Last thing: Organizing your images also earns you SEO cred because Google values sensical website structure and order.
8 Practical Image Optimization Tips for Your Team
You’re convinced optimizing your images is worth your team’s time. But what exactly should you do? Here are 8 tips and tools your team can use. While some might be old hat, we bet even seasoned designers can learn a new trick or two.
1. Learn the Basic Image File Types
You can’t optimize your images if you don’t even know which file type to select to begin with. And you’d probably be surprised to hear that even competent designers sometimes choose the wrong image type for their applications.
Fortunately, a little bit of knowledge can go a long way. Try to remember the use cases for the main image file types:
- JPEG. A JPEG is the most common image format — and for good reason. JPEGs generally load the fastest and they’re supported in nearly every browser. This should be your default choice.
- PNG. PNGs tend to be higher-quality than JPEGs. They’re perfect for print, and they can also be transparent. If you need to superimpose your logo onto something, a PNG is a great option. Just remember that higher quality images make for larger file sizes, which can slow your site’s speed.
- GIFs. A GIF is another good option if you need an image that supports transparency. GIFs function similarly to PNGs and should be used sparingly because of their larger file sizes.
2. Consider Aspect Ratio When Sizing Images
Responsive web design — design that works on all screen sizes — is table stakes. And yet lots of talented designers size images once, regardless of application.
Aspect ratio is simply the ratio of an image’s width to its height. Considering aspect ratio when you’re optimizing images means adjusting image sizes for different screens, say mobile vs. laptop.
AirBnB does aspect ratio right. Whether you’re browsing listings on your phone or on your computer, that signature front-of-house image is always in the top center of the screen. If AirBnB ignored the rules of aspect ratio, the photo might suddenly take up the entire mobile screen — not a great user experience.
3. Understand the Difference Between Resolution and Pixel Density
Aspect ratio isn’t the only misunderstood image optimization term. People conflate resolution and pixel density all the time — to their detriment.
In reality, it’s quite simple: Resolution is basic picture size. Height and width. Pixel density refers to the number of dots (aka pixels) per inch in an image.
Understanding the difference between resolution and pixel density will help your team select the correct graphics for web vs. print applications.
4. Scale Your Images Down, Not Up
Lots of people grab a random stock photo — or worse, an image directly off Google Images — and scale it up for their use. They take a small version of a photo and make it fit their screen.
Don’t be like those people. The image quality is shot to hell, all garbled and blurry. Instead, start with the largest image size available and scale it down for your needs. Scaling down ensures your images never look stretched out.
5. Organize Your Image Files
We talked earlier about the benefits of organizing your files. But how should you go about doing it?
It’s stupidly easy, but so often overlooked.
Instead of throwing all your images in one folder called, “Images,” separate them. Say your company sells clothing; you’d have an “Images” folder, then a “Products” folder, then a “T-shirts” folder, and a “Pants” folder — and so on. It’s a hierarchy.
As mentioned, this is beneficial internally, keeping everyone aligned. But also for SEO purposes since Google appreciates a well-organized site.
6. Leverage a Content Delivery Network
Your files should be organized no matter what, but where you keep them is up to you. Many companies store their images on their networks. Then, images are read and loaded locally each time a user visits a page.
Storing your image files locally is an okay option for simple products with few assets. But, if your site is complex with lots of images, consider leveraging a CDN.
A CDN — or content delivery network — allows you to store your assets on a separate server. Basically, CDNs make your website incredibly fast because, instead of storing the actual images on your site, you’re just storing code. Code is much smaller than images and loads instantaneously.
In the market for a CDN? Amazon Web Services (AWS) is a good option in that space.
7. Take Advantage of Free Browser Inspection Tools
One way to optimize your images is to use the smallest possible size for each application. That way, you’re not taking up unnecessary space and slowing your site down. Fortunately, there’s a free tool you can use to check your images’ sizes — and it’s right in Google Chrome.
Open a page in Chrome, right-click any image, and select “Inspect.” You’ll see a window pop up on the right side of your screen with tons of valuable information. You may realize that your image is way larger than you ever need, even for the largest desktop screen. You can save the largest version elsewhere, but upload the size you need to, again, save space and increase site speed.
You can also leverage browser inspection tools to:
- Test image responsiveness
- Test page load speed
It’s a free yet underutilized option your team can leverage to optimize all the images on your website or app.
8. Stop Relying Solely on Photoshop
We saved the best, most shocking tip for last: Give Photoshop and other design tools (we’re looking at you Sketch, Affinity, and friends) a rest. They’re great and necessary, but they’re not the be-all and end-all.
Too many people put all their stock in the Photoshops of the world. They think if they save something for web or crank up the quality settings, Photoshop will automatically make their images perfect. But Photoshop isn’t optimizing your images for you. In fact, cranking the quality setting to 100% will only bloat your file size.
How can we help your company use great design to achieve its business goals?
Whatever you’re building, our workshops and project engagements can help you do it better. Reach out to discuss your project or request a quote.