Speed Up Your Website...With Photoshop! - Flight Media Blog
Speed Up Your Website…With Photoshop!

Speed Up Your Website…With Photoshop!

Whether you’re a photographer or a web designer, there is one important thing you must take into consideration when building your website: speed.

Nobody wants to sit on your website for 10 minutes waiting for all your pictures (or even just one picture) to load. This is a HUGE inconvenience to your visitors! Think of it this way:

  • Example
A new store is built in your town. Everyone keeps talking about it and says you must go check it out. As you walk through the big beautiful entrance while an AC fan blasts you from above to cool you down from the 100° weather outside. You walk up to an aisle that catches your interest and BAM! A huge storage door slams in your face and slowly begins to reveal the products behind it, inch by inch. Not cool.

A slow website is not going to make your visitors want to stay very long. There’s no way around it. So how do we fix this issue? Easy. A beautiful little feature in Photoshop will save the day!

1.Select the image you want to downsize.

Optimize001

Notice the enormous file size and ridiculously large dimensions. Completely unnecessary for the web.

2. Open your image in Photoshop and navigate to “File -> Save for Web.”

Optimize002

3. Opening the “Save for Web” box.

This box can be very intimidating at first. However, let’s break it down to some key features that you can use to your benefit.

Optimize003

In the bottom, left-hand corner, we can see our file size at 7.578 megabytes. We want to get this down to around 100 kilobytes , at least. In the top right, we can see the quality, currently at 100. And lastly, the bottom right, we can see our dimensions. These are the three important parts we are going to focus on in this tutorial.

4. Change the quality.

Optimize004

Let’s start out the saving process with the quality. A photograph will maintain a decent quality if you drop this down anywhere from 60-70. In order to get my file size down on this image, I’m going to drop down the quality to 60.

5. Change the dimensions.

Optimize005

Unless you’re displaying images on a large super computer with an ultra, mega, awesome screen, keep these dimensions low! In this post, my maximum width for any content is 620px and I don’t need each picture filling up all that space. So for this example, I dropped the width down to 500px. By doing this, I have control over every picture and I don’t have to worry about resizing images after the fact.

6. Preparing to save.

Optimize006

Now that we changed our quality and dimensions, we’re ready to go! Check your image size again and see what your ending file size will be. If this number is around 100k, you nailed it! If it’s lower, bring up the quality. If it’s too high, play with the quality and dimensions by lowering them to decrease file size.

Tip: If you don’t see any change in the file size from the original, be sure to hit “Enter” on your keyboard. This will either give you a new file size or open the “Save” window.

7. Don’t overwrite!

Optimize007

When you’re finally satisfied with your file size, click the big “Save” button. This will open the window where you select the save location!

Warning: If you choose to save the web version of the picture in the same location as the original, make sure you do one of two things: 1)Rename the file so you know it’s the web version or 2)Make a new folder that’s clearly labeled that it contains images for the web (like I did above). This will assure you don’t replace any originals. Not a good situation…trust me.

And that is how it’s done!

By following these easy step-by-step instructions, your website is guaranteed to load faster :) It’s super simple and there is no reason that your customers should have to wait 10 minutes for one web page to load. Just think: seven 100kb pictures will load just as fast as one 7mb picture…which do you prefer?

Editing Weapon: Photoshop CS6

If you have any trouble, feel free to leave a comment below. And if this was helpful, hit one of the share buttons. 😎

About Isaac Coffy

Photography is my thing. I haven't become a completely established photographer quite yet, however, I do have knowledge that I can't keep for myself!
Scroll To Top