How to optimize images for your blog for SEO

Why should you optimize your images for your blog or website?

 

Nowadays it’s really important to have good quality images. Whether you are a big corporation, a small business owner or a blogger sitting at your desk at home, you’ll want eye-catching graphics that drive attention and traffic to your website and social media. Long gone are the days when we uploaded to Instagram ugly, grainy, bad-quality phone photos with lots of filters!

 

However, good quality usually equals to big size, which makes websites to load slower. And that, my friend, is bad for SEO (Search Engine Optimization), and we absolutely don’t want that!

 

Add to this color mode. Do you ever look proudly at your photo on your computer and then upload it to your blog just to find out that it looks dull?

 

To avoid all those problems, you must save your images the right way! Keep reading for a complete guide on how to optimize images for your blog or website.

 

Learn how to optimize images for your website, blog or social media for SEO, with this step-by-step Photoshop and WordPress tutorial.

 

1. Saving your images the right way — Step-by-step Photoshop tutorial

The first step to optimize images is saving them the right way, with the right size, right color mode, and right file format!

Have no clue on how to do it? Don’t worry, here I have a step-by-step Photoshop tutorial just for you. It’s really easy! It might seem a lot of steps, but once you do it once or twice, you’ll go on autopilot.

 

Learn how to optimize images for your website, blog or social media for SEO, with this step-by-step Photoshop and WordPress tutorial.

 

Step 1 — Save for Web

On Photoshop, go to File > Save for Web. If you are using Photoshop CC, the command is inside the Export menu: File > Export > Save for Web.

We are going to view the image in the “Optimized” tab.

 

Step 2 — Choosing a file format

Choose your file format. We’ll focus on JPEG, PNG-24 and GIF, the most used ones for the web.

Let’s quickly review the different image file formats used on the web:

  • JPEG: used for photos.
  • PNG-24: you can use this file format for logos, icons or images that contain text. That way you’ll avoid pixelated edges. It also allows saving transparent backgrounds.
  • GIF: pretty much the same as PNG, although it has lower colors and lower resolution. Its main use is for animated images.

 

Step 3 — Transparency

If you’re saving your image on PNG or GIF and you have a transparent background, remember to check the Transparency box.

 

Step 4 — Color mode

Make sure to check Convert to sRGB.

Images on the Interner use sRGB color mode. Remember that — even if your file is in RGB, if you don’t save it to sRGB you’ll see your beautiful vivid colors turn dull!

 

Step 5 — Dimensions

Keep in mind that you need to save your images with a size big enough for your website. BUT that doesn’t mean you should keep your images at 4000 px wide!

Resize your image in the bottom box. Make sure you keep the chain icon checked so you don’t mess with the proportions!

 

Step 6 — Size

Size goes hand-in-hand with dimensions, meaning that both work together, and therefore they both affect the speed of your website.

If you are saving your image in JPG, you can decrease its quality in order to achieve a smaller size without changing the dimensions.

I’ll explain it with an example so it makes sense to you! If you have an 800 px wide image you can decrease the quality to 80% or 70% and look at the size in KB at bottom left corner of the window. For an 800 px wide image, 150 KB should be good.

 

Click save and you’re done with Photoshop!

Let’s jump to the next step…

 

2. Meta information — WordPress tutorial

Moving on to the next step to image optimization!

 

Learn how to optimize images for your website, blog or social media for SEO, with this step-by-step Photoshop and WordPress tutorial.

 

File name

BEFORE you upload your image to WordPress, you have to rename it. Google uses image file names for its image search, so put some nice keywords on the name!

For example, optimize-images-for-seo.jpg instead of _DSC00125.jpg or asdfhsg.jpg like I used to name my images in the past! (Pretty chaotic way, I know. One must learn from their mistakes!)

 

Alt Text

Once you upload your image to WordPress, describe your image in the Alt Text box! This also helps Google to find your page.

 

Bonus Tip: Pinterest uses Alt Text for the default Pin description! So make sure you write something catchy and you include keywords there too.

 

I hope this was useful! If you have any question, don’t be shy and ask in the comments below — no question is too silly! And if you want fast, ready-to-go templates for your blog and social media images you can check out my shop right here 🙂

 

Create awesome graphics for your blog and social media with these ready-to-use Photoshop templates