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.
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.
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!
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!)
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 🙂