Blogging

4 Steps To Quickly Edit And SEO Your Blog Photography

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.
Step 1. BRIGHTENING

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.

brightening-ba

Go to Image > Adjustments > Brightness/Contrast.

bright1

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.

bright3

Step 2. CROPPING

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.

cropping-da-pic

Step 3. RESIZING

Next, I like to resize my pictures. This is a must. In Photoshop, go to Image > Image Size (or COMMAND + ALT + I).

image-size

image-size-2

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.

Step 4. SAVING FOR WEB

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.

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.

save-for-web-2

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”.

naming

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.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

2 Comments

  1. Hi Suzi.

    My names Laura. I absolutely love your blog Cruelty Free Kitty and as I’m in the process of creating a blog myself I’ve found rosevibe so useful and inspiring to guide me with setting up my website. I was wondering (only if you don’t mind) if you could offer me any advice on how you create your amazing graphics on cruelty free kitty where you include an image of the product in the graphic design. I really want to be able to include a clear image of the product I want to discuss in my graphics for my articles but I am terrified of the horror stories you hear about copyright images. I have recently become an amazon affiliate and I would love to use the images that amazon displays of their skincare products in my graphics on my blog but I have no idea if that is allowed? As I can’t find specific product images on royalty free sites like pixabay or unsplash. Everywhere I look there’s such conflicting information and then I came across your blog and the more I read and learn about your blogger journey I thought you may be the perfect person to ask for some advice as your graphics are absolutely beautiful and quite similar to what I had in mind for my own blog. I truly hope you don’t mind me asking and even if you don’t reply I’m so happy to have found your blog rosevibe because its really offering me inspiration and motivation for my own blog.

    Thankyou Suzi and truly good luck in your blogging journey.

    I hope I hear from you soon.

    Laura ๐Ÿ™‚

    1. Hi Laura! Of course I don’t mind you asking and thank you for all the kind words. ๐Ÿ™‚ I use Photoshop to make all the graphics on my site, and to add a transparent background to product images, I simply select the background with the wand and delete it with the eraser. I only use product images that come from the websites I link to (for example Amazon, Sephora, Ulta), and as long as you’re directing your audience to those sites, there should be no problem (this would be different if you’re using anything but “official” product pictures).

      Good luck with everything!