As a product manager, you are likely constantly trying to increase your internal team’s efficiency while improving the user experience for your customers. You are in luck because image optimization is a relatively easy way to achieve both goals that most PMs overlook. By image optimization, we mean ensuring your images look flawless on mobile and desktop without impeding website performance, which involves activities like selecting the correct file type and sizing images just right.

If you are thinking that making pictures better cannot possibly move the UX needle that much, hear us out. You will be shocked to know the real benefits of picking up the slack on simple image optimization methods your team might be ignoring.

Why You Should Care About Image Optimization

Optimizing your images creates a positive ripple effect. The most immediate benefit is drastically decreased page load time because optimized images are smaller and take less time to load. As a result of this decreased load time, your UX improves because users hate slow-loading content and will exit if a page does not load almost instantly. Furthermore, UX improves because optimized images look good on any screen size, providing the consistency that is key to satisfied customers.

A low bounce rate paired with fast site speed improves your SEO authority because Google’s algorithm deems sites with satisfactory usability to be more reputable. Image optimization also involves organizing your assets, which improves your internal team’s efficiency by removing the need for developers to guess which image size or file to use. Finally, organizing your images earns SEO credibility because Google values sensical website structure and order.

8 Practical Image Optimization Tips for Your Team

Here are 8 tips and tools your team can use to get started.

1. Learn the Basic Image File Types You cannot optimize images if you do not know which file type to select, and even competent designers sometimes choose the wrong type.
   • JPEG: This is the most common format and should be your default choice because JPEGs generally load the fastest and are supported in nearly every browser.
   • PNG: These tend to be higher quality than JPEGs and allow for transparency, making them perfect for logos, though the larger file sizes can slow site speed.
   • GIFs: These also support transparency and function similarly to PNGs, but they should be used sparingly due to larger file sizes.
2. Consider Aspect Ratio When Sizing Images Talented designers sometimes size images once regardless of the application, but you must consider the aspect ratio—the ratio of an image’s width to its height. Optimizing means adjusting image sizes for different screens, such as mobile versus laptop, to ensure responsive design. Companies like AirBnB get this right by ensuring their signature images are always centered regardless of the device used.
3. Understand Pixel Density People often conflate resolution and pixel density to their detriment. Resolution is simply the basic picture size (height and width), while pixel density refers to the number of dots (pixels) per inch in an image. Understanding this difference helps teams select the correct graphics for print versus web applications.
4. Scale Your Images Down, Not Up Do not grab a small version of a photo and try to make it fit your screen. This ruins the image quality, making it blurry and garbled. Instead, start with the largest image size available and scale it down for your needs to ensure the images never look stretched out.
5. Organize Your Image Files It is overlooked but easy: instead of throwing everything into one folder, separate your images into a hierarchy. For example, a clothing retailer should have an “Images” folder containing a “Products” folder, which then contains specific folders like “T-shirts” and “Pants”. This aligns your internal team and benefits SEO since Google appreciates a well-organized site.
6. Leverage a Content Delivery Network (CDN) While storing files locally is okay for simple products, you should consider leveraging a CDN for complex sites with lots of images. A CDN allows you to store assets on a separate server, such as Amazon Web Services (AWS). This makes websites incredibly fast because you are storing code—which loads instantaneously—rather than storing the actual images on your site.
7. Take Advantage of Free Browser Inspection Tools To ensure you are not taking up unnecessary space, you can use the free “Inspect” tool right in Google Chrome to check your image sizes. By right-clicking an image and selecting “Inspect,” you can see if your image is way larger than necessary. This is an underutilized option to test page load speed and image responsiveness.
8. Stop Relying Solely on Photoshop Design tools like Photoshop, Sketch, and Affinity are great, but they are not the be-all and end-all. Photoshop is not optimizing your images for you; in fact, cranking the quality setting to 100% will only bloat your file size. Instead, try completely free tools like TinyJPG and TinyPNG, which allow you to optimize images exactly as you need them.