Easily Optimize Website Images For Free
If the page load time on Amazon.com slows by one second, they lose $1.6B annually. I don’t even know what $1.6B looks like but that stat comes from a recent study geared toward learning more about the tolerance of slow webpage speeds for the average U.S. web user.
Although most of us will likely never face such serious consequences due to our page load times, it is one of the most common reasons I encounter for websites having a poor SEO score. SEO stands for “search engine optimization” for everyone playing along at home and there are a lot of factors that play into your SEO score, which we’ve covered pretty indepth before in this past article. However, often the largest culprit of slow loading pages is the use of large or high resolution images.
The contents of my pocket. Not pictured: $1,599,999,999.74
We all know that humans have short attention spans and that long loading times will deter them from sticking around to view your website, but your page load time also factors into the SEO score for search engines, especially Google. With more and more websites being viewed on mobile devices (and people are paying for the data they’re using on their mobile plans) it’s becoming increasingly important for websites to be lightweight and as load as quickly as possible.
The issue of how the average website owner is supposed resize and optimize images with no previous photo editing experience, or access expensive programs like Photoshop comes up on an almost weekly basis in my business. Since I experience this obstacle pretty regularly, I decided it would be a good idea to create a little tutorial and a step-by-step guide showing quick and easy ways you can resize and optimize images for your website using a free online tool called Pixlr.
If you’re interested in learning about different image formats and when to use them, read on. If you’re impatient and ready to dive into optimizing your images, click here. If you’re just here for the free bonus download PDF where I’ve taken this entire article and condensed it to a simple, 3 step checklist which you can print out and leave next to your computer, click here.
Not all image types were created equal
Before we get into optimizing your images, it’s important that we first talk about the different image types (jpg, png, gif, etc) you’re going to encounter and when you should use them. For the sake of this article, we’re really only going to be briefly covering the three most commonly used image file formats for images on websites, which are JPG, PNG and GIF. If you really want to learn in depth about the differences between all of the image file types (or you’re having trouble sleeping) there are roughly 24 million articles on the internet that will happily oblige you, however, that’s beyond the scope of this article. Let’s get started!
Using Pixlr to optimize website images
Important note: I do not own, nor am I employed by Pixlr. I am not being compensated in anyway for discussing them here. I am mentioning them because at the time of this writing, I’ve found them to be incredibly helpful (and free) for my clients who want their websites to perform the best that they possibly can.
Pixlr.com Is an awesome online image editor that doesn’t require you to create an account or download any software. Simply visit the website, scroll down to the “Pixlr Editor” section (not Pixlr Express) and click “Launch Web App.” Now that you have the web app open here is how to optimize those images you want to use with Pixlr.
Click on “Open image from computer” and select the image from your hard drive that you want to edit.
In my example, I’m going to use this picture I found on unsplash of a juicy hamburger. Because I’m hungry. Also, yesterday was my cheat meal day.
This image happens to be a very large, high resolution image. 4000px wide by 2667px tall according to Pixlr (you can see this information under the lower left corner of the hamburger image in the screenshot above), and 5.6mb in file size. If I were to upload this image to a web page as is, it would take just shy of eternity to load (or feel like it anyway) and my visitors would hate me for it. The final size you’re going to make the image depends on where you’re using the image on your website. You should ask your web developer for ideal image dimensions for your website but for the sake of this article, let’s assume we’re just adding images to accompany some text on a page. While there are a lot of different opinions on what the ideal image size should be, I tend to suggest these images be about 700px to 800px wide. If you vehemently disagree with me, let me know about in the comments.
At the very top of the page, click on “image,” then click on “image size” in the dropdown menu that appears. This will show you the current dimensions of the image.
You’ll notice there is a checkbox that says “constrain proportions.” Always make sure this box is checked. When this box is checked, you can change the width of the image and it will automatically adjust the height to keep the image proportional, that way you don’t end up with an oddly squished blackmail photo of Karen in HR at the New Years party hitting on the boss.
I’ll change the width of this juicy hamburger from 4000px wide to 800px wide and the height will be updated for me automatically to 533px. Click “OK.”
Now we just need to save and export. Click on “File” at the top of the screen and click “save” in the dropdown menu that appears.
In the window that pops up, we have a few additional options we can take advantage of to further optimize our image.
You’ll notice my image is named “photo-1458677677220-000ddaa037e3.” While this name might make sense for a computer system that catalogs images to keep them in order, this is a terrible name for an image on a website as it tells us (and Google) nothing about the image. A better name for this image of a juicy hamburger would be “juicy-hamburger.” Without even seeing the image, you should be able to wager a decent guess at what the image is of, just based on it’s name.
This brings me to another important point. Notice I didn’t name the image “Juicy Hamburger” I named it “juicy-hamburger.” You should always, always, always use all lowercase letters when naming files that will be uploaded to the internet and use hyphens instead of spaces. I repeat, do not use spaces. Yes, using captial letters and spaces in a file name will still work, but using lowercase letters and hyphens is considered best practice and will greatly reduce the potential for errors down the road.
The image type here is already set at “JPEG” which is perfect for this image because it’s a photo of a real life event, so we can leave this option as is.
This setting will take some trial and error depending on the program you’re using. The goal here is to find an acceptable balance between image quality and file size. The more you decrease the image quality, you’ll notice the file size decreases as well. Ideally, you want the smallest file size possible that still maintains an acceptable level of quality. When I export JPG files in photoshop, I usually put the quality at 60 – 70 and I’m good to go. I noticed that in Pixlr, setting the quality to 70 didn’t produce the quality of image that I was looking for, so each program is going to be different. It also makes sense because Photoshop is a paid software and Pixlr is free so manage your expectations accordingly. I ended up settling on a quality of 80 for my juicy hamburger image.
The SEO Payoff
So now we have our new image ready to go on the website but let’s first take a look and see what we’ve gained. You’ll recall our original image had a file size of around 5.6mb and our new image has a file size of around 80kb. Let me put that into perspective for you. 5.6mb is roughly 5600kb (close enough for the purpose of this article) so we’ve managed to trim the file size by about 98.57%. I know, right? Let that sink in for a moment.
So now that you’re equipped with a handy “step-by-step” guide to start optimizing your images for free, go forth and make the internet a better place, one faster loading page at a time.
Bonus: Free Download
In an effort to make your life a little easier, I’ve condensed this entire article into a simple, 3 step checklist which you can download and keep by your computer so it’s handy the next time you need to optimize your images. To download the PDF, enter your name and email address and the download link will be on it’s way to you in no time!
As a fun test, choose a page on your website that might be using unoptimized images and run it through GTMetrix and note the loading time. Then, go through and optimize your images using the method I’ve outlined and then run that page through GTMetrix again. How big of a difference did it make? Let me know in the comments or if you have an easier method for optimizing images I’d love to hear about it!
Other Posts You Might Be Interested In
One of the most often overlooked steps of creating a website page or blog post is optimizing the URL. While all of the major content management systems (CMS) like WordPress give you the ability to edit the URL for each page, they will also auto-populate this field for...
A website’s bounce rate is an often misinterpreted statistic and it’s a metric I get a lot of questions about. I’ve talked about bounce rate as part of an overall SEO strategy before, but today I wanted to focus in and talk about ways you can improve your site’s...
92% of consumers read online reviews before making a buying decision. 92%. Think back to the last time you were looking for a product or service; did you check out their reviews first? Whether we’re talking about Google, Facebook, Amazon or just about any other...