If you run a website or a blog, you probably use at least some images to increase the user’s experience. While images are important for SEO, they can eat up a lot of space and drag your load times down if you are not careful. If you are using Photoshop to edit you pics, you are in luck, because it is really easy to optimize images with Photoshop.
If you’ve looked around my site, you will notice that it is no secret that I love Photoshop. I have been using it for years, and have figured out a thing or two during that time.
I love being able to make my own presets. I love the capabilities that it gives me for editing photos. But, one of the most useful tools is its ability to optimize images for the web.
What is image optimization?
To optimize images simply means that you are serving them in the correct dimensions and resolution but also in the smallest file size that you can without sacrificing too much quality. Without optimization, images can be really large (or heavy). This weight can cause a site to load slowly.
Why is image optimization Important?
The standard good practice for images is to use images that are no larger than the maximum size at which they will be displayed. However, this can be confusing when you throw in all of the things that you must consider – theme sizes, screen sizes, and even retina displays.
According to Google, 53% of site visitors will leave a page if it takes more than 3 seconds to load. Couple that with their findings that about 70% of mobile pages take at least 7 seconds to fully load.
In addition, Google recommends that each page on a site should be less than 500kb. That includes your text. While most sites are not even close to these recommendations, it at least gives us a reference point to start with. If that is not enough to convince you to optimize your images, read on! (Okay, read on even if you are convinced. )
The General Consensus on Image Optimization
There seems to be a lot of people out there running sites without understanding the importance of image optimization. They either are completely unaware that such a thing is required, or they are misinformed on how they should go about doing it.
I once came across a comment in a Facebook group where someone was asking about optimizing an image. The issue was that their image was over 1MB, and they only knew that it shouldn’t be. One person stated that they “shouldn’t worry about it” and if a server couldn’t handle a 1MB image they should “get a new service”.
Obviously, this person was giving out bad advice and was not knowledgable about SEO. Yes, a server can handle many 1MB images, but just because it can
If you use just this one image on a page, you have already doubled the recommendation set by the Google gods. And that is before anything else is taking into consideration. Take a moment to imagine what will happen if they continue to upload images of this size.
If they gain a regular viewership, which I imagine would be the goal, they could have hundreds of thousands of people trying to view multiple pages that have massive file sizes. This is not going to be a pleasant experience for anyone.
And, even if they restrict their usage of heavy files to just this one page, they are still hurting themselves. Because page speed is just that – per page. This post will likely be penalized for being so large and will not rank as high as it could. That means less traffic.
How to Optimize Images with Photoshop: Physical Size
To begin to optimize images with Photoshop, I always start by resizing them. This is the first step in shrinking down the file’s size. Don’t be one of those people who
If you have been doing this, don’t beat yourself up about it. Most of us have all been there. Back when I started my first blog, I had no clue about the importance of this and was uploading super large images to my site.
Don’t do what I did. Make sure that you resize your images down to no more than the maximum size that you will be using. In my case, my themes content area maxes out at 700px. However, I also have margins and padding to consider. So, images within my content area will never appear more than about 600px wide.
How Maximum Sizing Works:
To help you better understand how a site works, think about this. Each theme has a maximum container width or a point at which it will not expand any larger. This is often 1024 pixels wide. This size can vary, but for the sake of this post, let’s pretend that all themes are set to this size.
What this means is that when the theme is viewed on at a screen resolution (not to be confused with rendered resolution) more than 1024px, the space beyond the 1024px will be white space or whatever background color you have assigned. Even though the container will shrink to fit smaller devices, it will never appear larger than those maximums.
Within that main container, there will be even smaller, nested, containers with their own limits to size. Think of it as one large box with several smaller boxes placed inside. These smaller boxes would be your header, footer, sidebar, and content area.
Just like those small boxes placed inside the larger box, you can arrange them in different positions, but they can never expand beyond the larger container. So, when we place things side-by-side, such as the content area and the sidebar, they must share that maximum container space.
Now, let’s say that your sidebar has a maximum width of 300px. It doesn’t make much sense to upload a bio image that is 2000px wide. It will only display as 300px and never larger. Using larger images will just drag your site speed down.
Optimize Images for Retina Screens:
But what about retina displays? In my mind’s eye, I can see some of you are pointing your finger in my face as you wag it in disagreement. 😉 The rest of you are probably sighing over the fact that I am about to mention yet another thing that you must contend with. Just stick with me a few more minutes and we will sort this out.
But, before we get into optimizing images for use on retina screens, you must first decide if this is something that you even want to do. Again, if you have a site where image quality is of the utmost importance, by all means, you want to consider the rendering on retina screens, which we will discuss in a moment.
For everyone else, I urge you to first look at your number of visitors actually using retina display. Maybe you will find that your situation doesn’t merit using large, heavy, image files.
On the other hand, you could also discover that your images are appearing at a much lower quality than is acceptable. Regardless, you still want to make sure that you are not uploading anything more than you absolutely need.
Make a Determination:
The best way to tell how an image will appear at
My concern was that my optimized images would appear blurry, which is common with retina screens that are attempting to make up for the lack of pixels. However, I found that Apple is very good at making up the difference. In my case, the degradation in quality was so minimal that I didn’t feel it would negatively affect the user experience.
Of course, being able to check out your site on all the different devices that are out there is probably not doable. After all, who has that many devices on hand.
So, here is what you can do. Take a drive to your local Best Buy or electronics store. Stroll over to the displays for each brand and look up your site.
I do this at the Apple station all the time. I also check out Android, and PC devices. It is an easy way to see how you appear to everyone without needing to spend any money. Tip – make sure to leave your site on display when you are done so the next person sees it. Free advertising!
But, how do you know how many people are using retina screens and on what device? For that, I dive into my Google Analytics. While it won’t specifically offer you retina resolution numbers, there is a way to interpret the data that it does give you to determine the likely percentage of retina screens being used.
Open your analytics and select a time period of at least 30 days. I recommend going back to the past 90 days. Then, look under “Audiences” in the menu and select Mobile > Devices.
After the new screen opens, you will notice a tab at the top of the results that say “secondary dimensions.” Type “screen resolution” into the box and hit enter.
You will get a result like the one above. You can see from my top 10 devices that almost all of my traffic is coming from Apple products. A simple search of these screen sizes will tell me if they render is 1x, 2x, or 3x.
For example, the top result is for the iPads that have a screen resolution of 768×1024. These iPads (iPad Air and iPad mini) come in both 1x and 2x resolutions. You will also recall that my theme size maxes out at 1024px. So, viewing my images on my iPad @2x resolution is perfect for evaluating my image quality.
Going a bit farther, if I wanted to display my 600 pixel image at optimum viewing on the device with the highest rendering from above (which would be the iPhone X), I would use a maximum image of 1800 pixels wide. To put it another way, 600 @3x resolution = 1800. There is no reason to upload an image larger than this for the container that it will be occupying.
Why Optimize Images if You Have a Responsive Theme?
Someone once asked me why even worry about this since their theme automatically adjusts the size based on the screen being used. And what if you decide to change to a new theme that has different maximums? Or maybe a new device comes out with an even higher rendering!
Wouldn’t it be better to just go super large and let the responsive theme adjust everything down? This way, you don’t have to worry if technology takes everyone to a 3 or 4 scaled retina screen.
Not so fast! Yes, scaling your site to fit different screens is the purpose of a responsive theme. However, it can not optimize your images for you. But wouldn’t it be great if it could?
Unfortunately, it can only work with what you give it. If you deliver a heavy package to it, it will forever be adjusting a heavy package.
As far as changing themes, it is probably going to happen at some point. You will eventually get sick of your current theme and want to change. Technology is also very fluid. That alone can sometimes make one theme become obsolete and require something newer and more current.
The only thing that you can do is try to find a theme that works with your current situation. If you can’t, you will need to start working on revising those posts.
If you are new to blogging, or you are about to start a blog, you should know that you will eventually need to start putting in just as much time updating old content as what you do writing new. So, updating posts will become a way of life anyway.
I know, that sounds exhausting! I sympathize. Try not to focus on what will be coming around the bend. You’ll never be able to predict all of the changes that will require you to make updates. So, why bother? Just worry about the things that are within your control, today.
If You Use WordPress:
One thing worth mentioning. If you do upload images based on the largest rendering requirement, you should adjust your settings to reflect the display sizes that you use most frequently.
If you use WordPress, you can customize your media settings to better support your content. In your settings, you will find the ability to change your own sizing for small, medium and large images. Wordpress will also give you the option to use the original size.
Since I already upload my images at the 600 pixels, I don’t have my large size set to that amount. However, if I were uploading my images at twice the size of the container (i.e 1200 pixels to be viewed at 600 pixels wide), then, I would set my large size to reflect the size I wanted to display.
How to Optimize Images with Photoshop: File Size
Now that you are fully aware of the importance of image sizing, we can move on to getting the file size as small as possible. The goal here is to find a happy medium between quality and bytes.
Some sites may require images that are of very high-quality. While other sites can get away with very small file sizes. What you need will have to be determined by you, but try to keep in mind that 500kb limit, or whatever arbitrary limit you decide to set for yourself.
Let’s say for instance that you want to try to restrict your images to under half of that total page size, or 250kb total. With that being the case, a post that contains 5 images would need to have each image compressed to under 50kb.
Understanding File Formats:
When you save your images for the web, you have a few different options. You can save them as JPEG, PNG, or GIF. The most common of these are JPEG and PNG. But, let’s make sure you understand when and where to use each.
A JPEG file is generally used for most images on a site. These are what are know as lossy compression, meaning that it will lose quality the more it is compressed. It still works well for images and will usually give smaller files than a PNG
A PNG file is best to use when text or a diagram is part of the image. These are lossless. This means that it won’t lose quality as it is compressed.
However, a PNG has to be uncompressed before it can be rendered on a screen. So, these should be reserved for things like logos and special images or diagrams.
You may have noticed that Google is now requesting images also be available in either JPEG XR or WebP versions. That’s a whole other can of worms! Since these are not yet supported by the majority of browsers, I won’t be opening it today.
Saving for the Web:
To optimize your resized image in Photoshop, select File > Export > Save for Web. This will open a screen like the one above.
The image that I am using is a wedding shot. Yes, it is the same one used in my post on embedding videos in Pinterest pins. I chose it because wedding photography is one of those times when quality is very important.
Photoshop allows you to see your optimized image in one of four ways on this screen. You can view just the original, or you can view just the optimized version. You can also view either two side-by-sides or you can choose to see four different side-by-side versions. The tabs for changing th view are located above the images.
When you get to this screen, you want to take note of a few things. First, below each image, it will tell you how large the file is based on your settings. It will also tell you how fast that image will load at a given internet speed. (circled in red)
While the load speed here may or may not replicate the load speed on your site, it is still a good indicator to go by to make sure your images are not going to drag your site down.
Naturally, if it is saying that it will take 4 seconds to load, that is not good. Remember, more than 50% of people will leave if your site takes longer than 3 seconds to load. I recommend making sure that speed is down to 1 second as a guide point.
The second thing you want to pay attention to on this screen are the two red circled items located at the right of the screen. One is an optimize check box. Make sure it is checked. The second is the metadata.
You can choose to completely strip all metadata from the file. You can also choose to leave the copyright and/or some of the other contact information. To get the most reduction in size, select none. This will take all the metadata out.
I also wanted to show you how a JPEG file compares to a PNG. As you can see on the image above, I have 4 side-by-side version, just as I did on the previous image. However, with this image, the first two are JPEG (one the original and the other optimized at a very high setting).
The second, lower, set of images are optimized as PNGs. One is set to PNG24. The other is set at PNG8 with 264 colors selected. This is what I really want to focus on for a moment.
As you can see, the JPEG file is quite a bit smaller in size than either of the PNG files. Even though the JPEG is set at almost the highest quality, it is still resulting at
I also wanted to address why I chose to show you the difference between PNG24 and PNG8 selections. Normally, you would choose the PNG24 setting for an image that you don’t want to lose quality.
However, sometimes it isn’t necessary. For instance, if you are saving a logo that is made of just one or two colors, you can probably use the PNG8 setting. The great thing about PNG8 is that you can then select the number of colors to use for a file.
You can choose between 2 – 256 colors. Obviously, if an image is detailed, it will require more colors to keep things looking as is. But, the logo that I just mentioned, maybe you can get away with 8 or less without losing any noticeable quality. That can mean big savings on those header logos!
When is it okay to use large file sizes?
I would go out on a limb and say never. However, it is possible that you may need or desire a larger than normal file size for an image. If you have a special situation where you are willing to sacrifice load times in exchange for a high-quality image, you may decide against optimizing.
Right off the top of my head, I can think of one situation where the idea of losing image quality wouldn’t be desirable. A photo gallery on a photography site for example. If you are in this boat, you may feel that the integrity of your images is paramount and balk at the idea of optimizing them.
In this case, you have to weigh the integrity of your images against the experience of the user and the desires of Google. However, being a photographer, you should be familiar with the different ways to get the most bang for the buck without needing an overly large file. So, I think this may almost be a mute point.
Some people like to run their images through a secondary compression app or plugin. You can if you like, but I have found that I can almost always optimize images with Photoshop, alone, just as well as I can with the addition of another app.
I also do not find that the benefits of most plugins outweigh the drag that they add to my sites. But, that is a personal preference and may or may not apply to your situation.