How To Optimize Images For Your Business Website (Windows & Mac)

How To Optimize Images For Your Business Website | Windows and Mac

Hey there! This blog is all about how to optimize images and reduce their file size to make your website run faster!

You need to optimize EVERY SINGLE IMAGE you put up onto your business website.

Why is It So Important TO Optimize Images and Reduce Their File Size?

By shrinking down the file size of every image, you’re ensuring that every page loads fast and that you deliver a great digital experience to visitors—regardless of what device or network (home internet or 4G or whatever) they view your site from.

With Google’s Page Experience algorithm updates coming in May 2021—page load speed and performance will play an increasingly important role in how your website gets ranked in search results.

Meaning—if you overlook or avoid optimizing images—you could be directly harming your google search impressions AND traffic.

That’s potential business you’re leaving on the table.

So today, let’s cover the four (4) main things you need to consider as you shrink and optimize your website images and graphics.

And since—seeing is believing—I put this video together to roll through those. Plus, you can follow along to optimize your images using GIMP, Photoshop, or Mac’s Preview. Plus some other handy tools…

Helpful Links:

  • 4 Optimization Considerations: 0:42
  • Using GIMP (Windows): 2:25
  • Using Photoshop (Mac or Windows): 4:30
  • Using Preview (Mac): 5:19

4x Considerations To Optimize ImageS and Reduce Image File Size

The important takeaway is that you want to reduce the file size of your images and graphics without compromising the quality so that it negatively impacts your visitor’s website experience.

Generally—you should aim for EVERY image on your website to be LESS THAN 400KB.

You read that right!

In most cases—even large full-width images at ~2000px can be reduced down to ~200KB.

This can be a balance. Every image will “behave” slightly differently when you go to optimize. However, it is possible to build yourself a quick and easy-to-use workflow to take care of these tasks and always be sure you’re uploading lightweight images to your site.

The primary four (4) considerations for optimization are:

1. Image Resolution

Recommendation: 2000 pixels max

Regardless of whether you visitors are coming to your website on a smartphone or a larger monitor—typically a max resolution of 2000 (or “1920”, as in “1920×1080”) will suffice.

For hero or banner images that need to span the width of the screen—2000 is usually plenty of pixels to maintain a really high-quality image and experience.

For thumbnails or profile pictures or other images that will be displayed smaller (in a sidebar or half-size image for example)—you can usually reduce that to 500–1000 pixels or even smaller and still retain quality. This saves a LOT of space.

And of course—if you’re using images for “icons” and other small graphics—these can be really small. Somewhere between 75–250 pixels is all you should need.

2. Pixels Per Inch (PPI)

Recommendation: 72ppi

Alright, next up is Pixels Per Inch aka “PPI”. This setting (also labeled in many apps as “pixel resolution” – to add confusion :P) refers to pixel density.

Now, if you’re like me—you might take pictures on a mirrorless or DSLR camera OR find marketing and creative assets on stock photography sites. In many cases, those images “straight out of the camera” or off a stock site—will often come over to you with giant resolutions and have a pixel density of 300.

That’s far more than you need when displaying images on a digital screen (or your website). Higher densities in the 200–300 range are needed when printing images.

So, pay attention to PPI and reduce it down to 72 for the lowest possible image file size.

3. File Type (JPG & PNG)

Recommendation: JPG for photos, PNG for vector/simple shapes

The specific image/graphic and file format you choose to save it as—both play an important role in your final file size.

Essentially, choose JPG when you’re working with pictures or photographs (people, landscapes/nature, food, anything out of a camera).

PNG is a better choice if you’re working with vector shapes, simple computer artwork, etc. PNG also offers you the ability to display graphics with transparent backgrounds—so it’s often used for logos etc.

This is a simplification of a longer file type conversation, but I wanted to share the basics.

Yes, GIF animations can work too. File types like SVG or other media formats (like lotties) on your website can even store “images” in a “code-like” format offering tremendous file size advantages.

But JPG and PNG are the most common. At least for now…

4. Compression/Quality

And finally, compression and quality trade-offs offer further file “weight” savings.

With JPG files, for instance—you can reduce the quality of an image by adding more compression during export. It’s possible to save up to 80% or even 90% of a file’s size just by adding compression—all while maintaining a level of quality to keep the image usable.

With PNG files—you can choose between PNG-8 (8-bit) or PNG-24 (24-bit). I’d recommend typically using PNG-24 as this provides a wider range of colors and produces better quality. But depending on your tolerance for file size—choose the option that you’d like.

With other applications like TinyPNG or ImageOptim—you can even “resave” and compress your JPG and PNG assets, adding compression and shrinking the file size.

That’s it! Those are the main points you need to think about. But there are some other considerations and methods for saving EVEN MORE space on your images…

Some Additional Guidelines To Optimize Images

If you’re looking for additional size/weight savings, read on.

Before we get into these, I just want to reiterate—remember to consider the context of every image. Sometimes the smallest little tweaks can save 100 or 200 KB on a file’s size. Spread that across a few images on a webpage and that adds up to substantial savings.

A couple of additional ways to shrink and reduce file sizes:

  • Add overlays or vignettes (dark or light) to reduce dynamics (super bright and super dark aspects). Images that are more neutral and consistent throughout will generally produce smaller file sizes, especially with compression.
  • Install an additional optimization tool on your website (such as Smush or Jetpack for WordPress, etc.) Consider using these as a “catch” or “safety” for any images that get missed. A word of caution—I wouldn’t rely on these as your primary way of optimization as they won’t always do a great of a job particularly with completely raw (unoptimized) images.

There you go—you’re a pro now!

Now you can just focus on good asset hygiene like ensuring file names, descriptions, and image alt tags are all consistent and support your image or page’s SEO goals.

Applications & Tools To Optimize Images (File Size, Compression, Etc.)

The best applications and tools I’ve found for reducing file size on Windows and Mac are:

Image Editing Applications:

Compression Tools:

The Best Workflow To Optimize Images (File Size)

And finally, here are application-specific steps for shrinking your resolution, PPI, and image quality. Use these in coordination with our YouTube Image Optimization video (linked above).

NOTE: Settings displayed may vary based on image type.

Steps To OPtimize Images In GIMP

Open your image in GIMP..

  1. Go to Image (Menu) > Scale Image…
  2. Change Image Size (Width and Height) to your desired size (e.g., 2000px)
  3. Change the X and Y resolution (pixel density) to your desired number (e.g., 72ppi)
  4. Click Scale
  5. Then, go to File > Export As…
  6. Click Export
  7. Change Quality to your desired level (JPG Only – e.g., 50%)
  8. Click Export

Tada! You’re a GIMP master..

Steps To Optimize Images In Photoshop

Open your image in Photoshop…

  1. Go to File > Save For Web (Legacy)…
  2. Change Image Size (W and H) to your desired size (e.g., 2000px)
  3. Change Quality to your desired level (JPG Only – e.g., 50%)
  4. Click Save…

Short and sweet!

Steps To Optimize Images In Preview

Open your image in Preview…

  1. Go to Tools > Adjust Size…
  2. Change Width and Height (resolution) to your desired size (e.g., 2000px)
  3. Change Resolution (pixel density) to your desired level (e.g., 72ppi)
  4. Click OK
  5. Go to File > Export…
  6. Change Quality to your desired level (JPG Only – e.g., 50%)
  7. Click Save

And a pro with Preview? Nice!

Post Compression Tips

Once you’ve got an image with a reduced file size—drop them into TinyPNG or ImageOptim for further savings.

Don’t forget to “batch process” your work. Typically, I’ll build out an entire webpage in one sitting—so I can improve my efficiency by batching these efforts across a dozen or more images at once.

Now Go Build Lightning-Fast Web Pages That Delight Your Visitors!

For additional tips and information check out our blog on website performance optimization to learn how to improve your page load speeds, rank higher on search engines, and impress all of your website visitors!

Learn more about our Search Engine Optimization services!

The Ultimate Website Optimization Checklist | SequoiaCX

The Ultimate Website Optimization Checklist

We’ve designed this resource to help you make the most of your website and online presence. Inside, we over over 34+ critical website elements across four (4) major categories. Let’s get your website working better, harder to bring in those leads!

Related Posts