Bigger is not better.
In today’s world of mobile first browsing and Google Core Web Vitals the faster your site loads the better. In fact if your site is too slow Google has stated that it will count that against you and will negatively impact your position in their search results. When it comes to site speed large image files tend to be “enemy number one”. The bad news is all of those cool transparent .png files and large beautiful photos are slowing down your page load times. The good news is there is now a way to fix it.
Go small.
There are many techniques for reducing image file sizes, many of which you may have heard of including compression and removing exif data (the metadata associated with your image). While those are helpful and still something we should be doing the most interesting and impactful change we can make is often to the file type we are using. There are two image file types that are quickly becoming the go-to solution for reducing file size and consequently page load times. These are .svg and .webp.
SVG
SVG or Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation. Practically that means we can use a .svg file for illustrations. These files scale using math which means the initial file size is extremely small. SVGs are also something that can be created in the browser but that’s another story for another post.
WEBP
According to Google, “WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.” In human language we would say your image file size will be smaller but the image will still look amazing.
Where do I start?
Changing over to .webp and .svg from jpg and png can be a simple but very time consuming process depending on how many images already exist in your website. Fortunately there are some tools we can use to automate this process. Here are 2 of the image compression and conversion plugins we like to use that also have the ability to serve up .webp images.
Image compression plugins:
Need help?
If you’re interested in integrating any one of these image compression plugins into your website, and could you some help, contact us now.