• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Best Hosting And Design

Affordable price and peace of mind guaranteed!

  • Services
    • Web Hosting
    • WordPress Installation
    • Website Design
    • WordPress Site Maintenance
    • Website Migration
  • Contact Us
    • Our Goal
  • Portfolio
  • Praise
  • Free Blogging E-Course

How to compress and resize images before using in your WordPress website

posted on February 21, 2018

Tweet
Share14
+1
Share
Pin9
23 Shares

How to compress and resize images before using in your WordPress website

The internet has gone a lot more visual than it used to be. Big blocks of texts are a big no, and you know what I mean if you are a blogger.

You need to put in various elements into the mix and present the blog posts so your readers can read them fully.

So what are those elements?

Images, screenshots, videos, paragraph breaks, bullet points, headings etc.

In fact I have discussed in detail about how you should format your blog posts (so your readers read them fully) in these posts:

  • How to present your long form content like a pro (so your readers read them fully)?
  • 4 Tips to format your blog posts for best reader experience

Right. But now you have something else to consider as well. Loading speed.

We all know how the loading speed of your website is crucial to please your readers and search engines.

And any uncompressed raw image will take time to load, which means it will contribute to the loading speed of your website.

Uploading raw/uncompressed images will only make things worse with your website.

At the same time you cannot compromise on the quality of the images you upload because that will create an amateur look to your website.

Which is why you need to make sure you compress those images (without the loss of quality). Let’s see how you can do that.

Online tools for compressing your images

One way to upload compressed images to your website is to compress/resize them before you upload by using an online tool.

Let’s see 3 free tools (I can give you 10, but that’s not the point) that can help you in this regard.

Compressor.io

Compressor

I use this a lot as it is a very easy and straightforward tool to compress images. It has two compression options – Lossless and Lossy.

I always choose the Lossy option and haven’t found a big change in the quality of the image.

As to file formats, you can compress jpg, gif, png and svg files using compressor.io.

The only downside is that you cannot bulk upload and compress images if you wanted to. But that had never been the problem to me!

Optimizilla

optimizilla

This is another simple yet effective online tool for image compression.

Unlike compressor this one has the bulk compression option that allows you to compress 20 images in one go.

So if you are into bulk compressing of images this will be a good fit.

But compared to Compressor, I personally feel that the platform is bit cluttered. Nevertheless, a great tool!

Tiny PNG

Tiny-PNG

Just like Optimizilla, Tiny PNG also has the option of bulk compression that allows you to compress 20 images in one go.

This online tool allows compression of png and jpg (just in case you thought only png is allowed, from the name).

There are no options or complicated controls – you just have to upload the image(s) and get it(them) compressed.

WordPress plugins for image compression

Now, as much as I love these online tools for image compression, I admire the option of having an onsite image optimization option.

This way, you can automatically have all the images on your site compressed – both the old ones that you have already uploaded and any new ones that you upload.

I know, having one additional plugin for this feature is additional load on the website, but still, images are a crucial part of the content!

Having said that, if you have a website that is not image heavy and if you rarely use images you can simply use any of the online tools.

But I would be surprised if you have a website that rarely uses images.

It is because, nowadays the internet has become a lot more visual – the more images, screenshots and other forms of media you use, the easier it is for you to capture your readers’ attention and hold them longer on your site.

Anyway, I can give you three recommendations for WordPress plugins to help you with image optimization.

Smush Image Compression and Optimization

Smush Image Compression and Optimization

Smush has been my personal choice of an on-site image optimization plugin. The plugin is from the team at WPMU DEV and is quite famous.

It helps with increasing the loading speed of your website by compressing the images (the ones you upload as well as the ones that are already on site).

You can just install the plugin and forget things – and sit back and plugin do the compression for you.

The plugin has a pro version that promises you a few things including

  • Bulk compression of images in any directory
  • Super-Smush lossy compression
  • Conversion of PNG to lossy JPEG
  • Smushing images of bigger size up to 32MB

Etc. But so far I am happy with the free version.

ShortPixel Image Optimizer

ShortPixel Image Optimizer

This one is a smart plugin that is quite popular too. It offers lossless, lossy and also a glossy compression option developed for photographers.

The plugin also does a conversion from PNG to JPEG if that will result in the reduced file size.

The plugin operates on a freemium model.

Imagify

Imagify

Imagify is an image compression WordPress plugin that lets you compress images on your site with much ease – just like the other two plugins.

The plugin offers the standard lossless compression, an aggressive lossy compression and an ultra strongest compression options.

Imagify is free for upto 25MG of images, and you will be given an additional 25MG bonus upon registration.

Final tips to optimise images

Despite the use of an online compression tool or a plugin, there are a few things you could do to keep your images optimised and to avoid your site’s speed being affected by images.

Here are those tips.

#1 Always choose the right file format

Yes by simply choosing the right file format you can already save a few Kbs in images. For instance, if an image has lots of colours in it, go for jpg.

On the other hand, a png format is for images with limited colours and images with transparency: ex: logos and vectors.

If you choose a png for colour rich images the size of the file will be very large!

#2 Choose the right image size

Depending upon where you want to use the image, only upload the correct size.

For instance, let’s say the column width of your blog is 700 px, and  you want to put up an image for your blog post.

By uploading an image that’s 1024 px wide, you are unnecessarily uploading a larger image with a bigger file size.

You should either resize the image using a software like Photoshop, or use the resize option right within WordPress while you upload your image, before using it!

#3 Only use images at appropriate places

Yes images are visually appealing. But that doesn’t mean you can fill your pages with unnecessary images.

Remember, using a lot of images will contribute to using up disk space, bandwidth and also will slow down your site.

So make sure you use images only very appropriately.

#4 Disable image hot linking

Enabling image hot linking will not increase the size of the images, but will use up your bandwidth and *can* slow down the speed of your website.

Hotlinking is when someone directly puts up an image from your website on their own by using your image’s direct URL.

Say for instance, I have an image uploaded at my site and its URL is: https://www.yourwebsite.com/uploads/2018/01/image1.jpg

With hot linking enabled, anyone can simply insert an image into their blog post/page by using this URL.

If that happens, for every page load of their website, the image will be loaded/pulled from your website – which means you will be using up your bandwidth and your server will be serving the image for someone else’s site.

So make sure you have disabled hot linking so that no one can directly link to your images on their website.

Images are BIG. They add visually appealing look to your content.

And they give the eyes of your readers the much needed break from big blocks of text.

But if you don’t follow the best practices, images can add to disk space, bandwidth usage and also make your website load slow – certainly, you won’t want any of these to happen, as a website owner.

Hope this post helps you with that!

Tweet
Share14
+1
Share
Pin9
23 Shares

Filed Under: Blogging Tips, WordPress

About Jane Sheeba

I'm Jane, the owner of Best Hosting And Design, where I help bloggers and website owners to create and maintain their websites. Check out the services I offer here so you can make use of them. For cutting-edge business tips, please head over to Jane Sheeba.

Reader Interactions

Comments

  1. Martin Lindeskog

    February 24, 2018 at 4:47 am

    Jane: I will run your post “through” my webmaker and have a session on how to compress and resize images for my new WordPress site. Do you use a online tool to test the the loading of your site?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

CREATE COMPELLING CONTENT FOR YOUR BLOG LIKE A PRO

QUIT DREAMING ABOUT BECOMING A SUCCESSFUL BLOGGER AND ACTUALLY BECOME ONE!

Jane

Claim your FR​EE access to the Blogging Success Foundation Course.

Popular Posts

  • How to troubleshoot a 500 internal server error in...
  • How to set up a professional email address and con...
  • How to add Google Search Bar widget to your websit...
  • How to remove query strings from CSS and JS in Wor...
  • 10 Best Exit Intent Popup plugins for your WordPre...

The email marketing service I use and trust!


Start Your Free Trial Today!

Footer CTA

About Jane

I'm Jane, the owner of Best Hosting And Design, where I help bloggers and website owners to create and maintain their websites. Check out the services I offer here so you can make use of them. For cutting-edge business tips, please head over to Jane Sheeba.

<span class="screen-reader-text">Jane Sheeba: </span>View My Blog Posts

Popular Posts

How to set up a professional email address and connect with Gmail
WordPress security tips to keep your WordPress site secure
You are doing it all wrong! Here’s how to get more blog traffic
How to add a contact form to your WordPress website (5 Free Plugins)

Don’t miss another update from us!

(c) Copyright 2019 Design and hosting by Best Hosting And DesignBlog Write for us Sitemap Contact