How to Optimize Images for Faster WordPress Websites

Welcome to a new Site Ground video! And today we are going to learn about image optimization. We will talk about what it is, why it’s important, and how you can use it to speed up your website. Image optimization is the technical term for making sure that your images are as small as possible without visible resolution. Large images will slow down your website and that not only affects your SEO but also makes for a less-than-optimal user experience.
When we optimize images,  we decrease their file size.

Since according to the experts, images are 21% of a webpage’s total  size, this can have a significant impact. There are 2 aspects of an image that we need  to consider in order to optimize it, the format, and the size. The first thing we need to talk about is the format your images are saved in because this alone can make a significant difference. Image formats fall into two categories, lossless and lossy.

Lossless means that the compression done when programs save into this format will not result in the loss of detail or resolution. Lossy is the opposite of lossless. When saving images in a lossy format,  you can control the “quality” of the image. A lower quality score means that less detail  is being saved and thus a smaller image. Obviously, if you are dealing with medical images like X-Rays, you would never use a lossy format.
However, for most of the images being displayed on the web, a lossy format is acceptable as long as you don’t go too far down the quality scale.

Just remember, if you save an image at a lower quality in a lossy format, you can’t re-open it and save it at a higher quality later on. So, either be very careful with this or do what most professionals do and keep an archival copy of your important images stored in a lossless format. So, what are your format options? There are 3 main formats currently in use. PNG, JPG, and GIF.  Most of these have been around for a while. PNG was created as a lossless format. It has larger file sizes because of this. However, it can also be used as a lossy format. In most cases though, PNGs are used for pictures with intricate detail that you want preserved at all costs. This means larger file size. JPEG was created in 1992 by the Joint Photographic Experts Group.  JPEG is a lossy format and in most programs that manipulate photos, if you save as a JPEG,  you have the option of deciding the “quality level” of the image.

By playing around with the quality level you can usually find a good balance between size and resolution.

Remember, most cameras in use today can take pictures more detailed than the human eye can see. So reducing  the quality is usually not a bad thing. GIF, however you choose to pronounce it,  is the Graphics Interchange Format. It was created in 1987 by the online service CompuServe. GIF is  a compressed image format but it is a lossless compression.
Many meme images you see floating  around the web today are GIFs because it was the first image format to support animation. The biggest downside to the GIF format is that it only supports 256 colors. Therefore, it’s not a great format for detailed photographs. The new kid on the image format block is WebP.  WebP was released in 2010 by Google to replace the other 3 image formats.

Because of its compression  algorithms, WebP images are smaller than the other 3 formats saved at the same quality level. WebP  images can be either lossless or lossy depending on your needs. It also supports animations. All things considered, WebP is the best format to use going forward when creating  new images for your website. The other factor to consider when optimizing your images on your website is their size.

Most programs used to develop websites will allow you to drop a sized image on a page and resize it to be the size you want.  The problem is that the re-sizing is visual only. If you take an image that is 3,000 pixels across and resize it to be 500 pixels across, the image itself hasn’t changed, just the display of the image. This means you are still downloading that huge image but displaying it small.  A much better option is to resize the image to the size you actually need.
If you only  need an image that is 500 pixels across, then manually resize it to 500 pixels across.

Of course, if you are using WordPress as your platform for your website, you don’t need to worry about this. When you upload an image to WordPress, these days, it creates several sizes automatically. When appropriate, your image tag will contain a property “screw” that lists the same image in several different sizes. Your browser selects the appropriate one for the device your page is being displayed on and only downloads that one.

Now that we know that we need to optimize our images, how do we go about doing it? There are 2 main actions to be done in order to optimize your images:  First, as we discussed, compression, which essentially makes your images smaller in byte  size.

You can implement compression by resizing your images and using the WebP image format. Second, Lazy Loading, which basically tells the browser that an image can be loaded after the web page paints because it won’t be seen until the user scrolls down anyhow. This can have a dramatic impact on your web pages’ paint time or the time that it takes for your page to load and display.
Paint time is an important factor in determining your web page’s SEO score. Thankfully, implementing all this is easy with WordPress. There are many good plugins out there that will help you manage image optimization.

I’ve used a lot of them myself and they all do a decent job. These days however, my go-to plugin for managing image optimization is the Site Ground Optimizer plugin, which is free to use for all WordPress users.

It’s kind of a Swiss army knife when it comes to all thing’s optimizations.  Let me show you how to use it! To implement Image Optimization using the Site Ground Optimizer, first you need to make sure it is installed.

If you don’t see “SG Optimizer” in your Admin Bar, you need to install it like you install any other WordPress plugin.

Once it’s installed and activated, click on the SG Optimizer menu and select the “Media” option.

The first option we are presented is for Image Compression. If you are curious about how the  different compression levels will affect your images, click on “Preview”. This will bring  up a dialog box where you can compare an image as is, versus different levels of compression.  This won’t actually make any changes, it is just so you can figure out the best compression  levels for your images. As you can see, high compression leaves pixelization in the background and less detail in the dog’s face.

Now that you’ve figured out how you want your images compressed, it’s time to click “Edit” and actually make the changes. First, select your compression level. I prefer “Low” as it reduces my image size  but leaves me with a quality image.

Next, check the relevant boxes. I always backup the original images unless I don’t have the space to do son.

If you are regularly backup your website, you don’t have to check this box since you already have a backup copy in case something goes wrong. Next, I check that I want to compress my existing  images, since this is the first time I’ve run this operation on this particular site. Finally, I tell it to overwrite the original images with the newly compressed images.  Since I’ve got the originals backed up, there’s no sense in not doing this. Click on “Confirm” and it will start the process.

If you have a lot of images, this process may take a while.

The other option in “Compression Settings” is to force the use of WebP images. If you click this option on, Site Ground Optimizer will convert all non WebP images to the WebP format with the same quality level. Like Image Compression, this operation is done in real time so it may take a while if your site is a graphics-heavy site. Now that we have our images compressed, we’ve got one more thing we can do to optimize  things even further, “Lazy Loading”.

By default, WordPress marks all images except for the first three as images that can be lazy loaded. In most cases, this is fine, however, there are some edge cases that may break or at least make your screen paint weird. An example is if you have sliders that have graphics, if the graphics for the sliders are lazy loaded but they are visible, your screen won’t fully paint until they are loaded. It’s because of this that it is better to use the Site Ground Optimizer to control Lazy Loading. To turn on Lazy Loading, select the “Media “menu option that you can find in the main menu of the Site Ground Optimizer plugin.

First, turn on “Lazy Load Media”. This will tell SiteGround Optimizer to help you with your lazy  loading. This allows the plugin to exclude certain images and other media types from lazy loading  that WordPress would allow by default. If preloading a specific image, like a slider graphic, is causing your site to act abnormally, you can exclude it from lazy loading by clicking the pencil next to “Exclude CSS Classes from Lazy Load” and enter the class applied to that image in the box provided. If you need to exclude multiple classes, click the plus sign to the right and you can add more.
Click “Confirm” when you are done. The other option that SG Optimizer gives you that native WordPress does not is the  ability to exclude by media type.

By default, all of the media types that are defined by SG Optimizer are excluded from lazy loading. To adjust, you can click on any of the excluded types, and it will be moved to the list of possible media types to exclude. Click “Confirm” when you are happy with the list.

The Site Ground Optimizer also gives you one more important feature, the option to define the Maximum Image Width allowed for images on your website. Many themes and plugins come with large images which can  slow down your site. If you are using any of them,  you can make use of this feature to resize your images automatically to a maximum width. Images are important to any website but if you don’t optimize them they will  slow your site down. WordPress has a lot of ways to optimize your images.

The problem is not that it is difficult to implement, the problem most people run into is that there are so many options that it can be overwhelming. That’s why using the Site Ground Optimizer plugin will make your life much easier. It gives you the options to optimize the images on your site, but it does so in a simple interface. It takes you a couple of clicks to get everything set up and running the way, you want it. If you aren’t yet using the Site Ground Optimizer plugin, get it now for free on the link in the description below.

Try it and see how easily you can optimize your images and make your site faster! Now, I want to hear from you. Have you implemented any image optimization techniques on your site?  Did it speed things up? What is your favorite technique to implement?

Leave us a comment below so that we can all learn from each other. Hey, I want to thank you for joining us today as we learned. I hope you found it both educational and interesting. If you enjoyed this video, make sure you click on the subscribe button on your screen to subscribe to our YouTube channel. Click the bell icon also so that YouTube will notify you every time we release a new video.

Finally, follow us on social media to stay updated about all the news, trending content and resources for successful website management that we share.

Thanks again for watching and see you in the next video!

BioVanish™ Affiliate Resources
https://hop.clickbank.net/?affiliate=aff61bz25k&vendor=biovanish&v=bvsl

Email Dyno Backdoor Pass

AI Smart Report Builder + Commercial License

Ahrefs   <<– Instant access to your free boosting tools!

SEO toolset offering keyword research, backlink analysis, site audits, and much more. The most accurate tool for traffic volume and keyword research, and the backlink profiles are second to none.