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:
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.
2. Open your image in Photoshop and navigate to “File -> Save for Web.”
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.
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.
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.
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.
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!
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?
If you have any trouble, feel free to leave a comment below. And if this was helpful, hit one of the share buttons. 😎