What’s the difference between lossy and lossless image compression? How do you…
Images account for a big portion of a website’s load time. What most people don’t realize is that stock photo websites often provide images that are not optimized for a regular website. These images are high quality but they also happen to be very large and very heavy. It is one of the many reasons why images could be behind the slow load times you’ve been experiencing on your website.
- Heavy images: A large image is going to take a long time to load up. If you’ve got a ton of large images on your website, you’re adding extra load time for every picture.
- Unspecified image dimensions: scaling images appropriately is important. For example, if you have an image that is 1000 x 1000 pixels, but you have scaled it down to 100 x 100 pixels, your browser must load ten times more than necessary.
- Images without caching information: browser caching lets you store some of the images temporarily on a visitor’s computer so they don’t have to wait for it to load every time they visit your page. Image caching makes a real difference for your users.
- Complex file formats: some formats are naturally larger than others. Browsers can load JPG, PNG, and GIF images nice and quickly. But, heavy formats like TIFF and BMP are going to eat huge chunks into your load time. Avoid them!
- Text graphics: visuals containing text are another potential issue. Graphics like these take a lot longer to load compared to a simple font alternative.
So how do you go about fixing images slowing down your website?
- Heavy images: fixing issues related to images are relatively easy. It is more about establishing a process than finding a quick fix.
- Download smaller versions of the image on your stock photo website
- Save images in Photoshop with the option “save for the web” selected
- Compress your images on your website automatically with a plugin like Imagify or via an API
- Unspecified image dimensions: simply specify image size to be loaded in your CMS or ask your developer to do it when setting up your templates or pages.
- Images without caching information: use a caching plugin like WP Rocket or optimize your .htaccess file to specify caching information. Using a plugin like WP Rocket can be done by anyone using WordPress however modifications to an .htaccess file should be done by a developer.
- Complex file formats: Make sure you use JPG, GIF or PNG formats.
- Text graphics: avoid using text graphics and prefer positioning text with CSS over an image. It’s better for load time and better for SEO!