How to Optimize Images for your Blog or Website

You’ve spent so much time working on your website, curating your content and making sure you’ve got all your information ready for people to use – don’t make the mistake of forgetting how to properly showcase your images for the web.

Here are a few easy (once you get the hang of them) steps to ensure that happens.

Make sure they’re yours or you’re legally allowed to use them

This is the first and foremost thing you should be doing on your website. No stealing images! Currently, there are so many affordable options out there (or free, for that matter) that there should be no excuse for you using legally obtained images on your website.

Here are a few of my favourite subscription photo websites:

Haute Chocolate – Rachel over at Haute Chocolate is killing it. Her photos are just to die for beautiful and she offers such an affordable monthly subscription membership. She has more of a feminine entrepreneurship vibe so keep that in mind, but as desktop photos are all the rage right now on the web, the subscription may be all you need.

Stock Image Subscription Example Crystals

Subscription Monthly: $75 USD for 3 months of unlimited downloads.

iStockphoto – You used to have to hoard your credits at iStock for when you REALLY loved a photo and just HAD to download it. Nowadays, they have drastically changed their pricing plans and you can get a monthly subscription to their “Essentials” collection with your choice of how many monthly downloads you want. This is what we use at Simply Elaborate but we also have a special plan as we offer photo packs to upscale their designs for all our clients when they get a website design package with us.

Monthly starting at $40 CDN (prices changes dependent on length of subscription)

These are a couple of free stock image websites.

These all contain beautiful and royalty-free websites, but always keep in mind that you’re not the only one searching for free stock images so you’ll see this repeat while you’re doing your own internet browsing every day. AKA this photo (I see this photo everywhere):

Woman Holding Sparkler on Beach

Pexels – https://www.pexels.com/

PIxabay – https://pixabay.com/

StockSnap – https://stocksnap.io/

Unsplash – https://unsplash.com/

Make sure they’re named properly

Naming your photos correctly is half the battle when optimizing your images for the web. They should accurately describe what you’re writing about (if it’s for a blog) or what service you’re offering. Do not – I repeat – do not leave your image title the image you got from your camera upload or downloaded from one of those image sites above or elsewhere (like IMG_4758.jpg).

You know how when you’re searching for something in Google and punch out a billion responses based on your keywords? Well, if you were to click the “images” tab Google will show you a bunch of images that are relevant based on your keywords. So, making sure you’re uploading images to your site that has relevant keywords is just another SEO step for you. Do it.

End point: Name your images accordingly. Girl-Holding-Sparkler-on-Dark-Beach.jpg is a pretty descriptive option.

Use the Alt-Tag when naming your image

Alt-Tag is another must-do for optimizing your images for your website because they are a text alternative for your images when/if your browser somehow can’t display your images.

It’s also another way to increase your SEO due to the keyword feature ** however, it’s imperative it’s understood that while I keep saying “keyword” I don’t mean just name your images a bunch of keywords and expect them to bring you thousands of hits. The keywords need to make sense and should not be a random selection of words because you think it’ll make your blog post rank higher.

Relevant. Relevant. Relevant.

Reduce/Optimize your image files for the web

Using Photoshop here’s how you quickly open the “Save for Web and Devices” tab: (Apple) Shift + Option + Command + S – or “The claw” as an old Photoshop teacher once told me. (Windows – Crtl + Alt + Shift + S)

A pop up that looks like below will show up (yours may look different depending on what version of Photoshop you have).

Save For Web Photoshop Example

 

File Format: This is where you choose the file (should probably be JPEG to keep the quality, but reduce your file size.

Optimization Options: Make sure this is checked and RGB is selected.

IMG Dimensions: This is the actual sizing of your image (which will help with your file size as well).

Quality: You can choose the percentage of quality required for your image – this will directly affect your Expected File Size and you can play around with viewing your proposed saved file against your original file.

Other resources for editing images on the web are:

GIMP – https://www.gimp.org/

PicMonkey – https://www.picmonkey.com/

Pixlr – https://pixlr.com/

I don’t use any of these options but I’m told they’re the best free editing ones. I also recommend Adobe though. It’s worth the cost.

Gif versus Jpeg versus Png

For the web, always choose JPEG for saving if your photo requirements don’t require a transparent background or a moving object. This doe s not apply to your decorative website images (those are best used as PNGs).

Always keep your target audience in mind when sizing up your photos. It may be weird to see that being a focus in this post (but it’s always) because your who your audience is alter how and when they’ll be looking at your website. For instance, if you’re targeting a mid-50s and higher female age range for your cross-stitching blog – you’ll want to pay attention to the fact that your audience is more likely to be viewing your website on their desktop, and on a slower internet speed than your 20-year old audience .

These are some basic tips for making sure your website is loading up as fast as possible to those who are eager to view your information! Drop a line below if you want to share your website with me!

TELL ME YOUR THOUGHTS