It’s not exactly news that everyone on the Internet prefers faster load times and properly formatted content to fit their device’s screen. But, content on the web often comes with videos and images, which significantly increase how long it takes to load a website due to their larger file sizes. Images, especially, are a fundamental part of almost any WordPress’s design, but reducing how long it takes to display them isn’t just a one-trick pony. Optimizing your site’s images for the fastest load times without losing quality is an achievable goal, and there are some tried-and-true practices that make the balance between quality and speed happen.
Knowing Your Format Options
The list of image types on the Internet, from BMPs to SVGs to GIFs and more, is long, and most formats aren’t necessary even for very popular websites, so don’t worry about keeping track of them all! PNGs and JPG/JPEGs are the most popular on the web, and for good reason.
JPG/JPEGs are what’s called “lossy,” meaning when an image is saved in that format, unnecessary data that doesn’t really affect how it looks gets removed and the image itself takes up substantially less hard drive space, which makes loading faster.
PNGs are a lossless image type, keeping all of an image’s data for higher visual quality and editing capability. Like JPGs, they have very high compatibility with WordPress sites, but they’re more malleable, allowing select parts of an image to stay transparent. They’re especially useful for images with text or that have backgrounds that a designer needs to be transparent. While still streamlined for the web, they’re a little bigger than JPGs, sometimes two or three times the size.
Compression
Images that take a lot of time and horsepower to load usually benefit from compression, and it’s a great general practice to compress all images you’re using for your WordPress site to keep load times quick.
Specialized applications like Adobe’s Photoshop have a bigger range of compression options that are harder to find elsewhere. For instance, a lossier image type like a JPG has “High” and “Low” compression scales you can experiment with to get your site looking just right, image-to-image.
Some of the best online compression services offer type-specific image compression and have a loyal user base of developers and designers. Here are some of the most used on the web:
- TinyPNG – No frills JPG and PNG compression
- Optimizilla – Allows bulk image uploads that lets you scale quality
- Kraken.io – Premium compression service with a great UI and a free-to-use version
Scaling Across Devices and Screens
If you’ve ever looked at the same website between a PC and a cellphone and been surprised at how big the images look on a smaller screen, you’re probably a victim of poor image scaling. For instance, if an image is 900 x 700 in size, that might be overdoing it for a phone or tablet, especially if you’ve got a slower connection or if you’re using an old device.
Thankfully, WordPress can scale images for each device’s browser size by using an image’s “srcset” attribute. Srcset formatting loads different versions of the same image dynamically for different devices based on their size, which makes loading times quicker for all devices involved!
While higher resolution mobile devices are on the rise, the rule of thumb is to use images only up to twice the device’s maximum display size. Always make sure that images are optimized in size for each device, but don’t make an image larger than you need!
Contact FreshySites today if you have any image formatting or website design questions!
