Image optimization – fast loading WordPress

Images (photos, graphics, gifs, etc.) are an important part of modern web design. On their own, they can transform an otherwise flat and faceless design into an extremely attractive website. In the context of the content of the page, images can reinforce the message that the page conveys.

“A picture is worth a thousand words”

Very often, however, images are the cause of a slow loading website. What is done in this case? If the images on the website are a really important part of it, then you need to learn how to optimize them without losing quality.

In this article, we will explain in more detail how to optimize images to improve WordPress loading speed.

Why you should optimize images in WordPress

Many websites suffer from slow loading times. This badly affects user experience, completed orders, returning users and customers, increased bounce rate and last but not least SEO.

The loading speed is determined by multiple factors: maybe the theme is not fast, maybe the incoming site traffic is too far away and the server is not able to send the images to the browsers quickly without the help of a CDN, maybe the site is not secure enough and is flooded with malware. It is possible that speed optimizations regarding JavaScript and CSS files have not yet been performed.

There can indeed be many reasons why a website and users’ browsers don’t communicate with each other as quickly as you’d like. Through optimization and proper server setup, you can improve response times and speed up image loading. This leads to some great benefits, for example:

  • Web pages (not just images) will load faster.
  • The content will be more imaginative and attractive as you can use high quality and high resolution images to tell the story.
  • As your website’s performance and aesthetics improve, you’ll likely see your bounce rate decrease.
  • In turn, this will reflect well in search engine crawls, leading to increased search rankings.
  • Creating backups on the site will take less time and space.
  • Will reduce the cost of bandwidth and server storage space.

But what about the images themselves?

We already know that by optimizing the server, images can load faster. But is there anything you can do with images as files that will essentially make them easier to work with when they are uploaded to WordPress?

The answer to that is yes!

Learn more about our WordPress and WooCommerce Speed Optimization service.

How to optimize images without loss of quality before uploading them to WordPress ?

The WordPress Codex includes a quick guide on how to determine the right image size and quality for your website. There are four factors to consider:

  1. Physical size: how the image actually performs (in terms of dimensions) on the website.
  2. File size: how many kilobytes or megabytes the image file itself is.
  3. Resolution: this refers to the number of pixels that exist in an image. The higher the resolution, the clearer the image.
  4. File type: this refers to the format in which the particular file is saved. When we talk about images, we usually mean PNG, JPG, SVG and GIF.

Let’s take a closer look at the different factors to follow when optimizing images before uploading them to WordPress.

Physical image size

The physical space that images take up on a page of your WordPress site is determined by which device and what page users are viewing from. For example, an image used in a blog post may only need to be medium sized (e.g. 400px wide), while the header image (hero image) on a home or landing page needs to be full width for the image (e.g. 1920px).

You don’t need to upload a high resolution image to use in a blog post for example, where it displays at 400px wide. Note that applying a css style to reduce the size (style=”width:400px” for example) does not make the image load any faster.

It’s no coincidence that Google Page Speed often gives the instruction “Serve scaled images”.

What does Serve scaled images mean?

A scaled/rescaled/scaled image is an image that is adjusted to match (scale to) the exact image dimensions needed for a site. So when you “serve scaled images”, you adjust those images to the correct size before they are sent to the browser and rendered.

A properly scaled image should not lose its qualities after resizing has been performed. This means that the image will not only remain clear, but also be smaller or larger as the case may be.

Displaying scaled images on the website improves its performance. Scaled images can save resources when images are downloaded as they do not take up much space on the server. Because of this, the website becomes significantly faster.

Plus, fast page load times and minimal resource usage make your site better in several ways:

First, site speed improves SEO and helps to rank higher in SERPs (search engine results pages). This means more people will find your site.

Secondly, more people who find your site will stay longer and come back to use it again. Internet users are very impatient. This means that a slow loading site will cause many users to leave it. Conversely, a fast site is a pleasure to browse, you will see an increase in users who browse many pages and come back repeatedly.

Resolution of photos

DPI (dots per inch) is the reference to look for when evaluating image resolution. 72 DPI (pixels per inch) is the standard resolution you will see on most images, while 300 DPI is commonly used in stock photography. Higher DPI means more pixels, i.e. more information, which means a larger image file size.

While there are no specific recommendations from WordPress on what types of resolution images should be saved at, they do advise that care should be taken not to use resolutions higher than necessary, especially for large file sizes. The higher the resolution, the larger the file size. If the image looks crystal clear at a lower DPI, then you can save it at the lower DPI.

File size

The file size of the image itself is one of the most important factors when it comes to optimizing website speed. WordPress recommends that larger images should be between 60kb and 100kb, and smaller images should be no larger than 30kb.

Of course, quality should not be compromised here just to reach this small size. At Pixadoro we have observed that for a FullHD photo, reducing the file size to 150-200kb is quite possible without losing image quality.

Image compression with TinyPNG.com

All Pixadoro customers are recommended to use the online tool TinyPNG.com / TinyJPG.com. Both domains actually use the same technology and in practice you can only use one – it doesn’t matter if you optimize a .jpg photo in tinypng.com or vice versa.

TinyPNG/TinyJPG is a powerful image compression tool that can achieve up to 70% file size reduction. In addition to compressing without loss of quality, unnecessary meta data will also be removed from the photo, further reducing the final file size.

The web version is free and allows you to optimize up to 20 photos in total, each up to 5MB in size (if you’ve already reduced the image resolution, which we talked about above, it will hardly exceed 5MB). Great for compressing the image as a final step before uploading to WordPress.

There’s also a WordPress plugin – https://wordpress.org/plugins/tiny-compress-images/ – that will optimize photos already uploaded to WordPress.

At the end of the article we will offer more image optimization/compression tools.

File type

There’s no hard and fast rule that says you should always use JPG instead of PNG, or that SVG is the modern standard we should all adhere to. Usually the file type to use comes down to what we’re going to do with it.

JPG

JPG files are the ideal file type for photos. Although this format does not support transparent backgrounds, its natural ability to compress files without compromising quality is ideal for high-resolution photos. JPG uses a lossy compression method, which generally speaking means that unnecessary background data is removed to achieve a greater reduction in file size.

If you want to work with smaller file sizes, JPG is the format to use.

Another thing to note about JPGs is that there are two options for how to export them from Photoshop, Lightroom, Gimp or any other software: baseline or progressive.

Baseline JPG is one that consists of a single layer. This means that when used in WordPress, if there is any delay in loading the page, visitors will see the image slowly start to load from top to bottom.

Progressive JPG, on the other hand, consists of multiple layers. When a visitor attempts to view a slow-loading page with Progressive JPG, the image will load entirely in the frame it should exist in. Initially, however, it will be a bit blurry until the other layers appear on top, and so on until the image is fully loaded.

The ideal option to use in WordPress is the progressive JPG, as this will result in less load on the server (as it doesn’t load one layer of the image at a time).

PNG

PNGs are more suitable for design elements such as buttons, banner ads, screenshots or icons, etc. that need a transparent background.

Like JPG, PNG uses a compression method known as “lossless”. Lossless compression, unlike lossy compression, preserves all of the original image data. Since you can’t reduce the file size this way, lossless compression looks for ways to break the image into smaller pieces that will make it easier to load the page.

Although this type of compression guarantees higher quality when exporting, the file sizes are larger than JPGs. So if quality is more important to you or you need an image with a transparent background, PNG is the file type for you.

SVG

This file type isn’t often talked about when discussing images for WordPress, but it’s still worth noting here as minimal design and iconography are becoming more popular in web design.

SVG is a scalable super lightweight vector image, making it perhaps the most versatile of all image types. However, SVG is only ideal for small elements that you want to scale well – logos, icons, and simpler visual elements.

While a PNG logo might be around 30kb-50kb, the same but in SVG format would be 2-5kb!

WebP

WebP is a file format developed by Google to reduce the size of images without having to sacrifice quality. WebP images are designed to make the web faster, with smaller and richer images for developers to use. WebP’s lossless images are 26% smaller than PNGs and up to 34% smaller than lossy JPEGs at an equivalent structural similarity quality metric (SSIM).

GIF

You can, of course, also use GIFs in WordPress. GIFs are a nice alternative to video content as they are much lighter (if you plan to store video files on your server). With the proliferation of social media, GIFs are definitely an easy file type to use in WordPress, though you’ll want to use them sparingly.

optimizing images for wordpress.

7 good free plugins for optimizing images in WordPress ✌️

  1. EWWW Image Optimizer – https://wordpress.org/plugins/ewww-image-optimizer/
  2. ShortPixel Image Optimizer – https://wordpress.org/plugins/shortpixel-image-optimiser/
  3. Smush – Lazy Load Images, Optimize & Compress Images – https://wordpress.org/plugins/wp-smushit/
  4. Compress JPEG & PNG Images by TinyPNG – https://wordpress.org/plugins/tiny-compress-images/
  5. Imagify – Optimize your Images & Convert WebP – https://wordpress.org/plugins/imagify/
  6. Imsanity – https://wordpress.org/plugins/imsanity/
  7. Optimole – https://wordpress.org/plugins/optimole-wp/

5 good free online image optimization tools ?

  1. CompressImage – https://compressimage.toolur.com/
  2. ImageSmaller – https://www.imagesmaller.com/
  3. ResizeImage – https://resizeimage.net/
  4. TinyPNG / TinyJPG – https://tinypng.com/
  5. Kraken Image Optimizer – https://kraken.io/web-interface

Final words

Optimizing (or compressing) images/photos is an important step towards a faster WordPress site. The combination of proper resolution and reduced image file size can shave precious seconds off page load times, which will prove positive for user experience (especially on mobile), more sales and leads, more returning customers and last but not least make everyone, including Google happier :)

Learn more about our WordPress and WooCommerce Speed Optimization service.

Share: