Skip to content
Joanna Swartwood, Director of Marketing and Revenue GrowthWed, Jul 10, 2013 6 min read

3 Tips To Optimize Website Images

3 Tips to Optimize Website Images

It's a fact as old as all time - images are heavy files. OK, maybe not all time - but certainly modern computing. This basic truth becomes an issue when you're confronted with the challenge of designing a site that's aesthetically appealing and simultaneously quick to load. How does a Joomla pro cope?

3 Tips to Optimize Website Images

Fear not, because today we'll be reviewing three guidelines that will help you optimize your site for it's greatest performace. 

But before we get ahead of ourselves, let's recall the basics.

  • What is image compression?
    • Compressing images is the simple act of taking a graphic and making it smaller. And I don't just mean reducing the stretch and skew, I mean the actual file size.

  • What are the benefits of shrinking your images?
    • Less bandwith usage - Pretty straight forward. Smaller file size = less bandwith being utilized to load
    • Faster loading times - Piggybacking off the above point, using less bandwith means faster loading times for your visitors. 

Whether you're a professional web designer or a newbie who's getting a handle on the web design and development community, you know decreasing loading time is of the utmost priority.

With that in mind, let's talk about three tips you can utilize in your image optimization process:

  1. Choose the correct image format
    You've seen all the abbreviations: GIF, JPEG, PNG - these are the image formats universally accepted by browsers. But how do you know which type is best suited to your website? Make an educated decision by understanding the differences among them:

    GIF (Graphics Interchange Format) are used for graphics, and not photoragraphs. Biggest advantage: Allows for animated images. You know, things like this.

    JPEG (Joint Photographic Experts Group) images are generally used for photographs. Biggest advantage: Allows you to select what precise amount of compression is correct. Compression is expressed in percentages, with 100% being the largest file size and greatest quality image. Here's a great post on understanding what percentage to use.

    PNG (Portable Network Graphics) are usually used for graphics, not photos. Biggest advantage: Supports transparency in images. This is valuable when you want to overlay an image, like this.

    If you need further guidance for selecting the best graphic, check out this great guide from noupe.

  2. Know the difference between lossy and lossless compression
    These two terms refer to different practices for compressing graphics. On the surface, it might seem intuitive to assume that we'd want to use lossless compression all the time. After all, don't we want to avoid "losing" parts or quality in our images?

    Close, but not quite. Here's a quick breakdown of the two practices:

    Lossless compression preserves all original data from your image, and shrinks it. If you were to decompress the image, you'd have the original in front of you. GIF and PNG images use this format for compression.

    Lossy compression shrinks your image by eliminating some of the unessecary original data, including reducing the image's colors to only maintain those which "matter" for aesthetic purposes. However, lossy compression cannot be undone. JPEG images are shrunken using lossy compression.

  3. Utilize free resources 
    There are a ton of tools out there to aide in your optimization process. We use these tools all the time at Savvy Panda to compress images on Joomla sites, so you can bet they work like they're supposed to.

    And not only do they work, they work for free! What could be better? This service is provided by Yahoo!, runs a basic test on your page to tell you how many bytes you could be saving by optimizing images. It then provides you with a zip file with all images neatly shrunken. All you have to do is save the files and replace them on your page. Easy as pie! You can also directly smush one image at a time through the uploader. I tried it, and honestly couldn't tell the difference in the before and after images.

    TinyPNG: We love this tool, and not just because of their panda mascot! This incredibly smart program searches for places to reduce the amount of color in your image (without altering the aesthetic, of course). This shrinker will also tell you how much space it's saving you. I took this one for a test run as well, with equally great results.

With these tips in mind, you're ready to start your journey towards image optimization. Although it can take a while to shrink and replace all images on your site, remember to keep your eye on the prize! Smaller images are a major stepping stone on the path to a faster site, which translates to a happier user.