In this post, I’ll show you exactly everything I do to ALL of my blog pictures, from editing them to optimizing them for my blog. The whole process only takes about 2-3 minutes per photo in Photoshop.
Why Optimize Your Images
You might know how to edit your pictures, but are you optimizing them? Optimizing them means that their file size is as small as possible, which decreases load time.
You want your blog to load FAST for 2 reasons.
- 1. Avoiding poor user experience and bounces. Your visitors aren’t going to stick around if the images are loading like it’s 1998.
- 2. SEO benefits. Loading time is part of Google’s algorithm, and Google favors sites that load quickly. I’ll also show you how to name your pictures to up your chances of getting more Google traffic.
Even under great lighting, my pictures always need a boost in Photoshop. You can either play with the Curves or adjust the Brightness and Contrast.
Go to Image > Adjustments > Brightness/Contrast.
From here, pump up the brightness until it
burns your retinas and blinds you looks as bright as desired. You can also turn the contrast up if and only if the image calls for it. You can tell by looking at darker tones (and especially black). I rarely play with the contrast.
This step is optional. Sometimes, my photos don’t need to be cropped. Sometimes, a quick crop can make your picture go from wonky to funky (I couldn’t find a better rhyme). Especially if you’re not using a tripod, you might need to straighten your photo in Photoshop. This is where cropping comes in handy.
Click on the Crop Tool on the left (or hit CTRL/COMMAND + C). You can now crop the picture and find the best way to frame it. Click a corner and hold SHIFT to maintain the current ratio.
Or let’s take this example of a picture I took that’s tilted to the side (see below). To correct this using the crop tool, click outside of your image and move your mouse up or down. This will crop the picture while rotating it.
Next, I like to resize my pictures. This is a must. In Photoshop, go to Image > Image Size (or COMMAND + ALT + I).
Pick a width that’s as wide as your content section on your blog (I chose 800px). You don’t need to set the size to anything bigger than your content’s width unless your theme uses a huge featured image.
This is THE most important step! Saving for web compresses your image thus optimizing the load time of your whole blog. You want to achieve this without losing image quality.
Go to File > Save for Web.
Make sure you’re picking JPG at the top right. Then, set the quality. I like to set mine at 70 as it’s not a perceptible difference (i.e. you can’t tell the quality is lower) but it brings down the file size considerably.
Next, click save. It’s now time to name your file. This is where you optimize your image for search engines. Give the file a descriptive name. Google can’t see images, but it can read text. By naming my file glossier-haloscope-highlighter-stick.jpg, I’m telling Google to show my image to people who are image-searching for “glossier haloscope highlighter stick”.
This step is only necessary if you want people to find your images when they search Google for images. I don’t optimize the name of every single picture. Use your best judgement.