Join the list for Pinterest Resources

Get free Pinterest resources instantly when you sign up. Content added monthly, so you'll always have updated resources for your Pinterest marketing efforts.

How to Make Website Images Load Faster

October 4, 2020

This post contains affiliate links from products and services I find valuable. If you click through and make a purchase, I'll make a small commission, which comes at no cost to you. This supports my small business. Learn more here. 

If you use Pinterest, you need to know how to make website images load faster because you are placing images on your website to be “pinned”. Raise your hand if you are excited to read about images and optimization? No? That’s too bad because I have some tips that might improve your website ranking and Pinterest reach.

When experts discuss image optimization, they often bring it up because large and unoptimized images slow down your website. This slowness can cause a loss of sales, visitors leaving your website, and a bad user experience.

jpg vs png pinterest pin image

So how should we use our images on our posts and pages? What’s the right way to optimize them for our blog and Pinterest? Let’s look at the best ways to prime our content for Pinterest.

I promise to make it easy to understand and interesting or you’re money back, guaranteed.

 

Why Should I optimize my website images?

Oh, we all love slow pages and those lovely photo frames that appear before the photo loads. I’ve struggled to get my content to load fast on mobile. Sometimes my theme is slow, sometimes I’m just a lazy image optimizer (I totally made that phrase up).

But it’s no joke. There’s a lot of statistics floating around such as these ones:

  • Load time is a major contributing factor to page abandonment. The abandonment increases as a percentage with every second of load time, with nearly 40% of users abandoning a page after 3 seconds. (pa.ag)
  • If your website takes more than 3 seconds to load, users are more likely to abandon it, which will drastically increase your bounce rate, and eventually affect your conversions. (imagekit.io)
  • According to Kissmetrics, 79% of shoppers who are not satisfied with the web page speed or performance do not buy from the same site again(imagekit.io)
  • According to a Strangeloop study, a one-second delay in website load time can cost you 7% of sales, 11% fewer page views, and a 16% decrease in customer satisfaction. (wpbeginner.com)

Yikes. In a nutshell, having image issues that slow your roll is going to cost you. The more you can optimize and reduce the load time, the better off you’ll be.

The Google gods will crawl your site with ease and visitors will thank you by signing up for your paid and free offers. Yah!

Download the FREE TEMPLATES!

Grab a free set of Pinterest templates made in Canva! You only need the free version to use and you can create a variety of Pinterest pins with this mix and match set. 

What does it mean to optimize an image?

The word “optimize” gets thrown around a lot online. But what does it mean? Well, there are a few different meanings when it comes to images. Let’s break it down.

  1. Make the image SEO friendly with alt tags, titles, and good file naming (in WordPress, those annoying boxes that show up when you upload an image).
  2. Reduce the file size without reducing the quality of an image (huh? Keep reading).
women podcaster - save images correctly
Learn How to Make Website Images Load Faster – This image was saved as a JPG and compressed using Short Pixel

I want to look at both of these components because I think they are important for Pinterest, but this blog post will mostly address the issue of point 2. A lot has been said about optimizing your keywords and titles, but not much has been said about the quality of your images.

How to Optimize Your Website Images with SEO

This will be a brief look at point 1 from above. To optimize your images, the basics are

1) Name your image file names with keyword-rich names like pinterest-pins-optimized.jpg instead of something like DSC_123$.jpg. Yep, Google reads that crap so no more lazy file naming.

2) After uploading your image to your website, use keyword titles. Don’t leave these blank. You’ve been warned.

3) Use ALT tags appropriately. You can throw in a keyword or two, but this area is actually meant for visually impaired people. In some instances, you should leave the ALT tag completely blank.

According to W3C, an international organization that sets web standards, ALT tags are for accessibility, not for boosting your SEO on Google.

Guidelines for the alt text:

  • The text should describe the image if the image contains information
  • The text should explain where the link goes if the image is inside an <a> element
  • Use alt=”” if the image is only for decoration

Does that mean ALT tags don’t matter to Google?

Actually no. Google states:

When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in the context of the content of the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam. (emphasis is mine)

So while you should be focused on helping with accessibility, you should also add a keyword into the mix to describe what that content is about. ALT tags strengthen your overall message and make it easier for Google to crawl your site.

For instance, if you have a recipe for low carb chocolate brownies and your keyword is “low carb desserts”, then you could create an ALT tag for your image that says “low carb dessert – chocolate brownies recipe” or something like that. If the image is linked to a recipe, then it should state where the link goes. The ALT tag above works for that as well. It’s still important to use your keywords but to use them in a way that makes sense and is descriptive to Google and for accessibility users.

You can learn about ALT tags and when to use them here.

What is Image Compression?

Now that we’ve covered the first point, let’s look at point 2: reducing file size. If you want to know how to make website images load faster, you are essentially learning how to reduce the file size without reducing the quality. This optimization can be done using a script or plugins. There are two types of compression: Lossy and Lossless.

Lossy compression reduces the file size, especially if the image is saved over and over, reducing it to a blur. Lossy compression is fine for most websites though. This type of compression is most used when you are OK with smaller image sizes. A JPG is lossy and is good for shares on social media.

website images png or jpg
Bright idea – Use JPG instead of PNG when you don’t need transparency

Lossless compression is used for images that you want to maintain the quality no matter how many times it’s saved. A PNG file is lossless. The data remains intact even if you save it a million times.

It’s important to pause for a second and note that in most cases, it’s best to save an image as a JPG. Unless you need true transparency of the image, it’s not necessary to save it as a PNG format. The PNG file is often much bigger and slows your page down drastically.

If you run a photography website where photo quality is of utmost importance, then lossless is the way to go. If your website is mostly articles and information, you are safe using lossy compression.

What about Pinterest?

When you place a Pinterest image on your website, I recommend a JPG. However, sometimes the JPG file format makes the image appear blurry. Here are a few solutions:

1) Create a PNG file that you will upload to Tailwind or Pinterest. The images residing on Pinterest will be full quality and “pinnable” images.

For your website, resave the image as a JPG and compress. This is an option if you aren’t concerned about website visitors pinning your images. Compress the JPG image using a plugin or online tool such as Short Pixel.

2) Use the WP Tasty Plugin which will allow you to optimize your image, but also the Pinterest titles, descriptions, and so forth.

My vote goes to #2 for the WP Tasty Plugin and it’s what I use here. Just use the Pinterest SAVE button and give it a try. You’ll see all my images (most are hidden in the post) and when you pin them, you’ll see the descriptions and titles I’ve set up.

Download the FREE TEMPLATES!

Grab a free set of Pinterest templates made in Canva! You only need the free version to use and you can create a variety of Pinterest pins with this mix and match set. 

How to Make Website Images Load Faster

WP Tasty plugin for WordPress optimizes your images. One way is by allowing you to create your own titles, descriptions, and so forth without touching the alt tag. In the past, people used to use the alt tag for their long descriptions that were supposed to be used on Pinterest. This practice was a big no-no, but it allowed pinners to have their descriptions show up on the pin when others pinned it. Then WP Tasty came along and changed everything for the better.

But what about the image itself? What does the plugin do with the pin? On their website, they state the following:

LIGHTWEIGHT & LIGHTNING FAST
Tasty Pins is built with speed in mind. Optimize your images and improve Pinterest sharing all without sacrificing page load speed.

Even though I’ve been using this plugin for a while now, I wanted to know specifically how to make website images load faster and how the plugin helped keep my website “lightning fast”. So I emailed them and got a response.

Tasty Pins loads the thumbnail version of the image in the image source. However, there is a Pinterest-specific image attribute called data-pin-media that takes the full-size image. This allows websites to load images that are small, but give Pinterest the full-size one, or give Pinterest a comparable image that is better suited for Pinterest (eg. vertical instead of horizontal).

If you don’t use the plugin, there’s a work-around.

You can use HTML to link a small image to a larger image. If you don’t know a lot about HTML, no worries, I got you covered here.

Add your small image to your post or page (I’m using WordPress). Switch to the HTML editor and next to where it says “img src=” and the file name, add data-pin-media=”yourlargeimage.png”. Enter the name of the file before the end tag that looks like this “/>”.

<img src="smallimagefile.jpg" data-pin-media="yourlargeimage.png" />

Linking to a larger file that you can pin will help keep your page uncluttered.

Social Media and File Compression

Pinterest compresses your images a bit. Every social site does. This is because images are huge and it hogs the space. They have this down to an art form balancing compression with quality.

Sometimes the images I place on Tailwind seem to lose quality too. Even if I put a nice PNG file up there, it compresses it. I asked Tailwind about this and the answer I received was that Tailwind compresses the image for the platform, but once it’s uploaded into Pinterest, it keeps the original file size. So Tailwind is compressing the image only on their website. This sort of sucks for Tribes because if your image looks crappy, no one will repin it. But that’s another topic for another day.

All of this to say that every social site and even some apps are going to compress your images, no matter how much you want to retain the quality. The best you can do is try to get it close to perfect. But at the end of the day, Pinterest isn’t Instagram. It’s ok if your images are less than perfect.

WordPress Image Resizing

Some people think when they drag the handles on an image, they are resizing the image. Unfortunately, that’s not doing much for you at all. It only changes how the image appears when published, while still loading the larger image in the background. It’s a bit deceptive, so here’s what to do instead:

The best option is to resize the image in the Dashboard. Go to the photo and the edit settings. Change the size under the display settings. Yeah, I know…it’s more work, but no pain, no gain.

Download the FREE TEMPLATES!

Grab a free set of Pinterest templates made in Canva! You only need the free version to use and you can create a variety of Pinterest pins with this mix and match set. 

So what have we learned?

  • Knowing how to make images load faster on your website will encourage Google to crawl your site and make your visitors happy
  • Use ALT tags to describe, inform, and add SEO keywords
  • The safest choice for your website in most cases is using a JPG Pinterest image vs a PNG image
  • True transparent images should be in PNG – this also applies to images that require high quality
  • Save your images as PNG and direct upload to Pinterest or Tailwind, or use a link instead of placing it directly on your site
  • Compression tools such as Short Pixels work well for image compression
  • WP Tasty Plugin is great for compression and keywords for your pins or use HTML, data-pin-media to link a thumbnail to a larger, higher-quality image
  • Resizing images in the text editor is not good practice. Resize images in the image editor instead.

How do you save your images to Pinterest? Have you noticed a difference in quality? Let me know in the comments!

Loved this? Spread the word


About the Author

Pinterest graphic designer and digital strategist for business owners and change-makers who want to be seen and heard.

Michelle Buck

Related posts

How to Start a Blog on WordPress

Read More

Powerful Online Graphic Design Tool You Need to Use

Read More

How to Create Pinterest Fresh Pins Quickly

Read More

How to Get More Website Views Using Pinterest

Read More
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Get in touch

>