Your Images May Be Killing Your Site Speed
Regardless of what CMS you’re running or language your site is built on, you’ll likely be working with images. Visuals are an important piece of any site that should always be an asset, complimenting and elevating the text content of whatever they accompany. However, if you’re not making informed decisions when it comes to prepping those assets, instead of bringing value to the table, they’ll be sinking your site loadtime.
If you’re like many of my clients, you may be unknowingly making missteps when it comes to your images putting you in that camp. The good news is it’s incredibly easy to course-correct here by knowing some basic fundamentals about image formats, when to use them, and tools that can help you further optimize your images from there.
An Overview of Common Image Formats
The most common image formats you’ll see are JPG, PNG, GIF, and SVG. For the most common image formats, they’re best fit for:
JPG: Standard photos without transparency. If you take a picture with your camera or buy a photo off a stock site, those should be in JPG format when uploading to your site.
PNG: Much heavier than JPG, should be used selectively for images that have transparency, possibly icons that can’t be supplied in SVG format.
GIF: Commonly seen for animated GIFs. If you’re using this format in a CMS like WordPress, you’ll likely need to use the full image size vs. a smaller auto-generated size to retain the animated movement as oftentimes GIFs lose their animation when auto-resized.
SVG: By far the best choice for icons and logos. For WordPress, you can’t upload SVGs into the Media Library by default. I recommend Safe SVG.
Hands down, the most common (and costly!) error I see clients make time and time again is misusing PNG format images in cases where it should be JPG. The number one tip I can give you for image optimization on your site is to learn the use cases for PNG vs. JPG and ensure you’re not choosing the wrong format as it can have devastating results if misused sitewide.
Now, you may be thinking to yourself. “Kristin, this is great but I’m up to my neck in PNG images and I know I need to make them JPGs but I have no idea how to do that.” Great news is there are so many options to help!
Tools to Help with Image Conversion and Optimization
WordPress Plugins or Shopify Apps: If your site is built on a CMS like WordPress or Shopify, there are image optimization tools that convert file formats like PNG to JPG. They also do other great tasks, like compress images further, generate next gen image formats to serve conditionally (like WebP), and more! If you’re on WordPress, I really dig Imagify, but there’s also ShortPixel, Smush and others. If you’re on Shopify, TinyIMG and others. This is a great solution as it’s a set-and-forget type of solution vs. a more manual process like web-based tools and apps.
Web-Based Tools: There are web-based tools for image optimization and image file format conversion, like Tiny PNG, PNG to JPG, Online Image Compressor, and others. This process is just slower as more manual effort is involved.
Apps: There are Mac and PC image optimization apps, as well. For Mac, I like ImageOptim.
Fix Those Images!
If you’re realizing that your assets are in the wrong format, the good news is it’s super easy to correct the issue. Upon doing so, you’ll see instant improvement in your site speed and your images will now be working for you vs. against you.
Want to Make Sure the Images in Your Next Project are Set Up for Success?
I’m a freelance senior WordPress + Shopify developer who knows the importance of asset optimization across the board when it comes to overall site performance. If you have an upcoming project and want to ensure optimization is prioritized, reach out and let’s start a conversation!