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 web page 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 in-depth 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 to 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.
Important note: I do not own, nor am I employed by Pixlr. I am not being compensated in any way 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.
Step 1
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.com 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.
Step 2
At the very top of the page, click on image, then click on image size in the drop-down 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.
Step 3
Now we just need to save and export. Click on File at the top of the screen and click save in the drop-down 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.
Image Name
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 its 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 capital 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.
Image Format
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.
Image Quality
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.
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 the 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 reduce 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.
