RevOps & Managed HubSpot with Squad4

RevOps + Growth

Streamline RevOps, empower your sales/ops teams, and build resiliency into your business.

    HubSpot CMS Website Design from Squad4

    Managed HubSpot

    Your CRM is the engine behind your teams, customer experience, and success. Let's Grow!

      HubSpot CMS Website Design with Squad4

      CMS Website Design

      A lead-generating, CRM-powered website is the tactical advantage your business needs AND deserves.

        White-Glove HubSpot Onboarding With Squad4

        HubSpot Onboarding

        Accelerate your CRM success with onboarding and training from our experts and years of experience.

          Resource Center

          Explore our blog—or a variety of other resources we've compiled to help you scale customer ops and grow!

          Ready. Set. Grow.

          Subscribe to our newsletter for actionable RevOps insights!

            Customer Experience CMS Websites

            A Comprehensive Guide To Optimizing Images For Your B2B Website

            By
            5 Min

            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 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 250KB.

            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 “1920x1080”) 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!

            Scott Flanigan

            Scott Flanigan

            Scott is a full-stack digital marketer (aka "markitecht"), solution architect, developer, and serial entrepreneur. He has over a decade of experience helping organizations in a variety of industries rapidly architect, implement, and scale new platforms. With a broad technical skill set and wealth of operations experience—Scott loves helping teams adopt and grow using new digital tools & workflows.

            Author
            Improve Your Business Website Performance & Page Load Speed
            4 Must Haves Before You Invest In Marketing Automation