There is nothing worse than a slow site. There is also nothing worse than a slow site that happens to be yours. Trust us.
You do all the right things; blog, choose good images and then you blink, two years have passed and your site is heavy and slow.
Whilst this post is not going to go into details about how to speed up your site with a 10 step tutorial covering all bases; we are going to show you how you can quickly and safely optimize your existing (already uploaded) images on your wordpress site.
There are two elements to think of when looking at resizing, the first being the actual resizing of the images and the second, compression. Both are equally important and done right, you can easily save yourself 60-80% of the total file weight without any heavy lifting.
What needs resizing?
You’ll need a solution that sorts any new images uploaded to your WordPress site in the future (EASY) as well as fix existing images. Here’s the snag; when you upload an image to WordPress, it automatically creates versions of this image such as thumbnail, medium, large and the original image size. These sizes are determined by the inputs under Settings –> Media –> Image Sizes.
This means that any solution must also take care of all the sizes retroactively, as well as for future uploads.
The Solution: TinyPng
TinyPng (also has TinyJPEG- but both do JPEG and PNG image files) is by far the safest, easiest and least intrusive way to get the job done. Oh and did we mention there is no quality loss?? Nice!
So we are going to base this whole post on the lovely product they offer.
- Head over to their website tinypng.com
- Hit “Developer API” from the top nav.
- Put your full name and email address in- you’ll be sent a key to be able to login to retrieve your API (needed later).
- Click on the link you received via your email.
- Copy the API Key on screen.
The only negative to TinyPNG or similar, is that when you upload an image to your WP media library for the first time, it takes slightly longer for the image to upload. This is due to the file being compressed on the fly by TinyPNG and is a small price to pay for the gains your site viewers will experience when everything goes fast on the front end.
Hey… This is not your usual web signup where you get hit with a subscription option, 25 registration fields and your credit card information needed off the bat kind of gig. First 500 compressions on the house, the rest is a ridiculously low $0.009 per image thereafter and only gets cheaper.
We’ve run sites with 100’s of new articles per month and never went over a $5-$10 spend per month. For most sites, the first run will cost you as we will be resizing and compressing existing images and the multiple versions that WP has created.
Install the plugin
- On your website, head over Plugins –> Add New (top) –> Search for TinyPNG
- Click install and activate
- A message will display that you need to validate or insert your API key for the plugin to work. If not, head over to Settings –> Media –> and insert where requested.
- Insert your API and viola.
Fiddle with the settings to get it just right.
You have the option to set the max width / max height of images under Settings –> Media. Remember that most websites have a page container width that everything fits regardless of the screen size. This number is usually up to 1200px wide for most standard sites, but sometimes can be larger if your website takes up all the screen canvas.
Regardless, there is no reason for an image to be 2000px wide. Find out what your site’s max page container width is or optimal image size for full width viewing and go with that as your maximum. Height is also similar and whilst many sites have endless scrolling, this does not mean you need a 5000px long image. Again, find the optimal height for your site and set those digits as your max.
Here you also have the ability to choose which sizes (thumbnail, medium, large et al.) will be compresses. Note that each will count toward your monthly free quota. You can minimize the spend here by selecting only the sizes most used by your theme. In our case we only use three sizes in total, thus we can get away with less.
Your case might be different and you could be using all sizes. If you don’t know, simply give them all a good compressing ;).
Original Image- best to resize your original images as this is where most of the file weight comes from.
Now let’s bulk resize and compress!
Thank f—k this is the only plugin that doesn’t scare the nonsense out of you by giving you massive warnings to backup your site first. In reality, this should not cause any harm as the plugin is resizing images then compressing them. Simple.
Go to Media –> Bulk Optimization then hit that big blue button “Start Bulk Optimization”.
Leave the page open and let it do its thing. Depending on the size of your site, server capacity et al., this can take some time. If you cannot leave your screen open until the magical 100% mark, don’t fret, the optimization starts off from the last point every time.
There you have it folks, expect to see some delicious savings as TinyPNG does all the heavy lifting and sifting for you.
Note: there are many plugins, methods et al., available on the web today. We always recommend TinyPNG (not agents or affiliated in anyway) as it simply works. It’s cheap, even for larger sites, and we’ve never had any issues with it lagging, hanging or messing anything up on our sites or those we manage.
