Why Your WordPress Website Needs an Image CDN

A picture is worth a thousand words, so when it comes to your website, you want the best images possible. The visuals on your site can create an emotional response in your visitors, communicate your message quickly, cross language barriers, and increase engagement. 

Images help tell your story, but some sites might be especially photo-heavy. In fact, no matter what type of site you have, on average, images will make up the majority of your page weight. This can be problematic for some because, while their success might rely on high-quality photos, the more images a site has, the slower it will load. 

Large page size is bad news for page speed — an important metric when it comes to search engine optimization (SEO). Finding ways to speed up your image load times without sacrificing quality or overall impact will help you achieve the best of both worlds — images that look great and load fast.

What is a CDN?

A content delivery network (CDN) is a service that speeds up your website by optimizing how images and other files are stored and delivered to your visitors.

Images and other static files are copied to a network of international servers. These servers can respond quickly to visitors by delivering files from the closest physical location, and by evaluating the visitor’s hardware and software to make sure they receive the best possible image size and format, every time. 

For instance, when viewing the same website, someone using a laptop in North Carolina will receive different files from different servers than someone using a cell phone in Alaska. But both will get the fastest, best user experience possible, as those files will be served by whatever server is closest to them and in the format and size that is optimal for their device.

Image CDN functions:

• Caching image files and serving them quickly from high-speed, dedicated data centers across the globe
• Delivering image file formats and sizes dynamically based on the visitor’s platform and device capabilities
• Automatically compressing and saving images in various sizes for quick delivery
• Allowing multiple files to be downloaded simultaneously by the visitor’s browser

A good CDN service will also introduce lazy loading to your site automatically. Lazy loading means that images aren’t rendered until they’re actually visible; content at the top of the screen can load quickly, and images farther down will continue loading in the background. Giving your visitors visible content as fast as possible means they’re less likely to surf away in frustration.

Sound like magic? It kind of is. But it’s not a quick fix that will solve all your image speed problems. Before you get started with a CDN, you’ll want to do a few things server-side: test your image load times, address image sizes and compression, and make sure you’re using the most efficient file formats. A CDN will help your site speed regardless, but it will do a better job if you’ve performed these optimizations on your site first.

Test your image load times

The first thing you should do is find out how your site performs on a page speed test, and how images might be affecting your load times.

Start by running your homepage through a site speed test website. Just enter your URL, wait a few moments, and a full report of your site’s performance will be generated. 

A few of our favorites include:

• Google PageSpeed Insights. Google’s PageSpeed Insights tool provides an in-depth look at all potential sources of speed problems on your website and suggests ways to improve your scores. Look down the list of reported problems for items specifically related to images.
• GTMetrix. GTMetrix will give your website an overall score that will provide a good feel for how quickly your visitors see your site. Try the Structure tab to look for image-specific warnings that you can remediate.
• Pingdom. Pingdom is especially useful for websites with international audiences, as you can set the location of your testing server and evaluate performance from different parts of the world. It also provides a handy content percentage chart; scroll down to see what percentage of the page images currently account for.

Attack the issues

Problems with images affecting load times often come down to three factors:

• Inefficient file formats. Always save large photos as JPG files, or even better, Google’s relatively new WebP format for extra file size savings. Lossless formats like PNG are best for logos and specialized graphics where a clear background is required, and GIF should be used sparingly when animation is absolutely required.
• Improper sizing. Even if you display an image in a small area on your webpage, the browser must download the full file before shrinking it to fit the allotted space. Don’t carelessly include large images on your site and rely on the browser to resize them for you. Instead, resize them first to match the maximum display size for your pages. 
• Lack of compression. Images can be compressed before uploading with very little loss of quality. Unless you’re running a photography-based site, visitors are unlikely to see any difference and the size savings can be great.

If you already have a website full of photos and aren’t keen on replacing every one, don’t worry — a plugin may be able to help. Plugins can convert your images to smaller formats like WebP, and even serve them to visitors without having to replace links in your existing pages and posts. Plugins can also resize images in your media gallery to more efficient sizes, and make sure that they’re fully compressed. 

There are some plugins that attempt to detect unattached images or unused image sizes and give you the option of removing them, but be careful — these plugins don’t always accurately identify used and unused images. You may accidentally delete an image or a size variation that is attached to a page or post. Always make a backup of your WordPress site before resizing or deleting anything.

Is an image CDN right for your website?

Now that you’ve made some changes to the images on your server, do you still need to install an image CDN on your website? If your site speed check indicates that images are no longer causing a problem with your page load times, then you may not need a CDN. But any site that uses a lot of images might find that just optimizing files on the server is not enough to significantly improve page speed. 

What types of websites would a CDN be beneficial for?

1. Sites with many high-quality images

Lossy file formats and compression are fine for most sites, but when images are what you’re selling, you need to keep quality high. Sites that are about photography or artwork are usually packed with high-resolution images, and compromising on quality isn’t an option.

Other sites might not feature photographs for sale, but may use a lot of images to enhance the user experience. Images can boost your SEO, make your content more friendly to social media shares, clarify your messaging, and make your site more interesting and engaging. The benefits of high-quality images are valuable for SAAS, eCommerce, magazines, and many other types of sites. But many images on a page — even when optimized — can quickly add up, pushing your page size into problem territory

2. Sites with photo galleries

Sites that sell based on visuals often feature photo galleries on every page. If your website has real estate listings, graphic design portfolios, travel packages, interior design makeovers, or how-to projects, then you’re likely to have very image-heavy pages and blog posts that are slow to load and would benefit from an image CDN.

3. Sites that use hero images or sliders

Popular with many different types of sites, hero images in header areas are always eye-catching, but can add a lot of weight to a page. Sliders on homepages, especially at the top, can have a huge impact on page load speed, as many large images are loading at once and preventing the remainder of your content from rendering. In both situations, lazy loading provided by an image CDN is a must.

4. Sites with an international audience

Digital storefronts that target an international customer base will serve their clients best with an image CDN. Large images of products are served from data centers around the world, with the closest physical location to the visitor delivering the actual content. This makes your site speedy for all shoppers — a key element in reducing abandonment rates and boosting sales.

5. Sites that attract a large mobile audience

By 2025, it’s estimated that at least three-quarters of the world will use the internet through a mobile device exclusively. Is your site ready to serve the majority of your future audience? A good image CDN will serve image sizes designed for each visitor’s screen. Mobile users will only download images in the small size they need, increasing site speed and saving on data charges, too.

Choosing the best image CDN for WordPress

If your website runs on WordPress, choosing an image CDN is simple. Jetpack’s content delivery network provides comprehensive optimization while blending smoothly with the WordPress CMS and keeping code weight to a minimum with a shared library. 

Why choose Jetpack CDN?

It’s easy. It only takes a few clicks to add the plugin to your website, and since it’s built by the team behind WordPress itself, you can trust it to be stable, secure, and seamless. Once installed, turning on the image CDN takes just one click — look under the Settings → Performance tab and toggle the option for “Enable site accelerator.” After a few minutes of processing, your image CDN is active and working to improve your website.

It’s powerful. All the features you need to speed up your site and deliver images in an intelligent, optimized way are automatically included. 

• Your images will be stored offsite on WordPress servers, where they can be delivered quickly from locations worldwide. 
• Each image will be dynamically served in the right format and size for the visitor’s device and platform. 
• Lazy loading is included.

The end result? A faster site that fits your users like a glove — meaning better SEO, a smaller bounce rate and better engagement.

It’s free. Literally, free. The CDN feature is included at no cost; anyone who installs the plugin can turn on the functionality immediately. Even better, since images are loaded from offsite servers, your own website server won’t require as much bandwidth on a monthly basis. Depending on how your hosting is set up, you may see a cost savings, too.

Finding the best balance

Images are so important for engagement, communication, and interaction on your website.   Don’t let speed issues force you to compromise on design; instead, create a website that’s both fast and beautiful with the power of Jetpack’s image CDN functionality. 

FAQs about image CDNs

Got questions? We’ve got answers!

Does an image CDN negatively affect photo quality?

Visually, there is no noticeable difference between images served in their original format and those delivered by an image CDN like Jetpack. Jetpack uses the WebP format whenever possible, which compresses images with no loss of quality. If you’re using a modern, WebP enabled browser, try this side-by-side comparison and see if you can spot the difference!

Will an image CDN improve my site speed?

Absolutely! While the impacts will be most dramatic on image-heavy websites with lots of images, galleries, or sliders, you’ll see measurable improvement regardless. Plus, international visitors, people on mobile devices, and those visiting during peak times will notice an additional speed improvement.

Does an image CDN help with SEO? 

Yes! Although images are delivered from Jetpack’s specialty servers, the original URL of each image is included with the page. Images can still be properly indexed by search engines. In addition, search engines like Google consider speed, engagement, and bounce rates when determining your SEO ranking, all of which will improve once an image CDN is added to your site.

Is there a free WordPress image CDN?

You bet. Jetpack’s CDN for WordPress. All image CDN features are part of the free level of Jetpack services.

How easy is it to set up an image CDN?

Installing and configuring an image CDN varies in complexity depending on the solution you choose. But the easiest way to install an image CDN on your WordPress site is with Jetpack. Just install the free plugin, then turn on the site accelerator functionality with a click under Settings → Performance. It’s that easy!

How do I make sure my WordPress website has the best image sizes?

Your image CDN will deliver files to your audience in a size that fits both your layout and their device capabilities in a responsive way, so don’t worry about having to upload an image in multiple sizes on your own. It’s always best not to upload your raw images in a huge format, though. Image CDNs can time out while trying to download or process an oversized image. Even for hero or slider images, keep upload file sizes as small as possible while retaining the desired quality. 

Can I compress images manually?

You can and you should. Images can be compressed manually before upload, or even with a supplemental plugin. A good image CDN will also compress your files, convert them to optimized formats like WebP, and create a variety of sizes suitable for different viewports before delivering them to a visitor — all automatically, behind the scenes.

What is lossless image compression and how can it help my WordPress website?

Since image files often make up the bulk of a page’s size, it pays to compress your images as much as possible. Formats like JPG and GIF use lossy compression, meaning that some quality is lost in the conversion. Lossless compression means that you don’t compromise on quality at all, but still gain the benefits of smaller image file sizes. A good image CDN like Jetpack will convert your files to a modern format like WebP — a lossless format that has excellent compression rates and makes a noticeable difference to your website’s load times.

---