While working at an ad agency, I learned (the hard way I might add) why it’s always best to establish a size for your images when designing your website. After testing one of our client’s websites, we discovered that their speed performance was a score of 23, which means that their website was operating very slow (click here to test your site). One of the MAIN reasons why was because when the site was first created, the uploaded image was too large (over 1GB). Uploading large images affects site performance. My manager at the time put me on the case and I ended up finding the same problem in three of our other client’s websites. Resizing and optimizing your images for your website is integral to improving your speed condition, so if you already have a website and want to see which images need optimizing, then I recommend following these steps.
My #1 Piece of Advice – when you first create a website, you should already have these steps in your building process, so that you don’t have to go through the hassle of optimizing hundreds of images on your site in the future. Click here to learn how to properly resize and optimize your images if you’re just starting your website.
Tools You’ll Need:
- WordPress Replace Image Plugin
- Save images in .jpg, .gif, or .png format only.
- .pdf, .psd, .tff, and .doc files aren’t web-compatible.
Pagespeed Insight Score Scale:
- 0-49: slow
- 50-89: average
- 90-100: fast
Steps On How To Optimize The Images:
1. Click here to test your site speed. If your site has a score of 0-70, then I recommend continuing with the following steps. If your site has a score of 71-100, then you’re good to go. The screenshot below has a score of 86, which is average speed but since this is an example, we’ll keep going.
2. To find which images are causing your website to slow down, by scroll down to the “Opportunities” section under “Properly Size Images.”
3. To download those images hover over the link, copy the link, and open it in a new tab. Now, right-click and “Save Image As”, and download the photos into a folder called “Large Images.” Create another new folder called, “Optimized Images.”
4. I like to do 5 images at a time to speed up the process. Select your 5 images and drag them to Photoshop.
5. Command + Option + Shift + S will allow your image to properly Save For Web.
6. Lower the quality of the image to the point where it still looks nice and crisp (you don’t want to lower it too much to where it gets blurry and pixelated). Make sure your image size is less than 400KB (compare the before/after screenshots below).
*Side note: if you don’t see the size of your image decreasing, try changing the width and height to
7. Save them to your Optimized Images folder. Repeat this step until you’ve completed it all.
8. Download the ImageOptim tool, open the program, and drag and drop all your images onto the area with the down arrow. This tool will optimize your images and automatically save them again into your “Optimized Images” folder replacing the original saved files – you can tell this by seeing the “Size” number decrease.
Steps On How To Easily Replace Media Files On WordPress:
1. Go to your WordPress dashboard and under “Plugins”, click “Add New.” Search for the “Enable Media Replace” plugin. Once activated, it works out of the box and there are no settings for you to configure.
2. Go to Media > Library in your WordPress admin.
3. Locate the image you want to replace. Hover over the file name, and click on Replace Media.
4. This will take you to the “Replace Media Page.” Upload your new file by clicking on the “Choose File” button. Once you choose the file, you have two options that you can choose from: replace the file OR you can replace the file, use the new filename, and update all links pointing to the old file. Click on the option that says “use the new filename, and update all links pointing to the old file.” Then, click on the “Upload” button.
WordPress will upload your media file and the plugin will replace the old one. If you opted to use new filename and update links, then the plugin will take care of that as well. You can now visit your posts or page where you had this media file attached and see it replaced with the new file you just uploaded.