The Blogger’s Guide To Optimizing Images

The Blogger’s Guide to Optimizing Images

The fact is, very large images can slow down your website. Each image on your blog will add extra load time, so making sure that you optimize to get the smallest file size without losing quality is important.

I have realized that I haven’t been paying as much attention to my file types and sizes as I should, so I decided to write this post as a guide for others but also as a reminder to myself!

(This content may contain affiliate links where I may receive a small commission at no additional cost to you.)

The Blogger’s Guide to Optimizing Images

What is the best image format for web?

A good rule of thumb is to use JPEGs/JPGs for complex images with millions of colors, gradients, and blends, such as photographs; and to use PNGs for images with fewer colors.

PNGs are great for simple images (especially PNG-8 if you are looking for a much smaller file size). However, if you have a complex file, you may end up with a larger file size than a JPEG. Ugh!

PNG-8 has a 256-color palette and supports transparency.

GIFs have the same color palette as PNG-8, so they won’t be great for complex photos. However, they are great for simple animations.

SVG is the latest of the file types and is vector format, so it can be scaled to any size without ANY loss of quality. SVGs will remain sharp at any resolution!

SVGs can be edited in any text editor and modified by JavaScript or CSS.

I like to use SVGs for my logo and simple background images. The more complex your image gets, the larger your SVG file size will become – and they can get very large!

Also, social media sites like Facebook don’t support SVGs for sharing.

Hint: WordPress won’t allow you to upload an SVG file. Maybe one day they will? I use a plugin called Safe SVG.

JPEG

  • Colorful and complex photos and images
  • Photo friendly
  • Compress to around 70% for a good balance between quality and file size

PNG

  • Simple images with fewer colors
  • Lossless compression
  • Results in larger file size than JPEG for complex images
  • Supports transparency

GIF

  • Simple animations
  • Simple images with fewer colors
  • Simple images where transparency is required

SVG

  • Simple logos and icons
  • Vector format
  • Can be scaled to any size without loss of quality

What is the best way to compress images?

Plugins

You can compress your images automatically on your WordPress website using plugins.

Before you do this, however, crop your images to the maximum size they will be on the website before uploading them.

Using the ‘Save for Web’ option on your graphics software is recommended.

It’s a good idea not to upload large, high resolution images to your website.

Once your images are uploaded, I highly recommend using a plugin called TinyPNG.

TinyPNG

It will compress your images as you upload them and you can bulk optimize. It supports transparency and works by reducing the number of colors in the image. The effect is nearly invisible but it makes a very large difference in file size!

Other plugins you may like to consider are:

EWWW Image Optimizer (I have used this in the past and it works well.)

reSmush.it

Online Tools

There are also some free online tools you can play around with for your image compression.

Google has designed a new online tool called Squoosh in an attempt to help speed up the web.

Squoosh Image

I have played around a bit with Squoosh. It’s very straightforward and user-friendly. It supports a range of web formats.

Just drag and drop your images from your computer and you will see a 1:1 visual slider. Toggle the slider to see the difference between the original image and the optimized (squooshed?) image.

On the bottom-right you have the option to change the image size, format, and quality.

You can then click on the download button to download your new optimized image to your computer.

It’s a pretty handy tool!

How do you test your website speed?

Enter your URL into an online page speed test like GTmetrix or Pingdom.

A little advice: I used to get very obsessive about my page loading times. It’s great to optimize for speed but don’t get too bogged down with it as you will probably never get a perfect score!

Before you go…

Are you looking for a simpler way to design your blog? One that will give you complete control over all aspects of your website?

Perhaps you want to add forms, price lists, Woo-commerce widgets, social share buttons, etc., and you are looking for the simplest way to do this?

I highly recommend Elementor Pro. It is the most advanced page builder plugin for WordPress.

Elementor Pro

It is a fantastic drag-n-drop page builder tool. It’s really simple to use and highly intuitive. You can customize every aspect of your website. No coding skills needed!

The Pro version will help you with email integration, offers over 75 templates for you to customize, and helps you to speed up your workflow. It integrates well with any existing theme you may already have.

Most importantly, Elementor Pro empowers you with more professional tools that allow you to get more conversions and sales.

It really is the simplest way I have found to build a website for both beauty and function.

Say goodbye to expensive themes!

If you enjoyed this post please share!

PIN WITH ME!

The Blogger's Guide To Optimizing Images
The Blogger’s Guide to Optimizing Images
The Blogger’s Guide to Optimizing Images
Pin
Share
Tweet
Share