Spread the love

Humans are visual animals and you know including enticing blog images and graphics is going to make your website irresistible.

If only there wasn’t so much confusion around finding great royalty free images, editing, and optimizing them.

Don’t despair – make yourself comfortable, grab a glass of your favorite beverage (I won’t judge ;))  and let’s go through the essentials!

 

Roadmap to a Successful Online Business – Part X | Ultimate Beginner’s Guide to Creating and Optimising Blog Images

 

Before we dive right in, let’s look at what the Solopreneur Safety Net can help you with. I’ll make it quick, I promise!

In a nutshell: If you are toying with the idea of building your own online business as a blogger or infopreneur but are feeling totally lost and don’t know where to start – you have come to the right place! 🙂

My mission is to help you get out of that confusion and overwhelm and break things down for you, so you can follow along easily. My Roadmap to a Successful Online Business blog post series will take you through all the major steps of building your blog or online business. Download your FREE overview business guide and let’s get going!

 

Online business roadmap free download; post | The Solopreneur Safety Net

 

Disclosure: This post contains affiliate links. This means when you purchase something through those links, I may receive a small commission at no extra cost to you. All opinions expressed here are my own!

 

The Importance of Including Images Into Your Content

I already mentioned it briefly when I talked about writing an engaging blog post: Articles including images  get 94% more views than articles without (Jeff Bullas)

And it doesn’t stop there: Posts including images also get much more social shares, as shown in an analysis by BuzzSumo. Reviewing over 1 million articles, they found that articles with an image rate of one image per every 75-100 words received double the social media shares as articles with fewer images.

What makes images that valuable? As you are probably aware, huge blocks of text are much harder to read than text that is structured and interspersed with a few images to help illustrate your narrative. And you know the saying “A picture speaks a thousand words”. Well, there is a lot of truth to that. At least, the brain is able to process pictures much quicker than written words. And it grasps complex connections much more easily when they are presented visually.

Fun fact: Did you know that words are embedded into long-term memory using ONE code, whereas pictures are stored using TWO codes, one visual and one verbal? Those codes are stored in different parts of the brain and can be accessed independently. Ever wondered, why its so much easier to remember images than words? Now you know. The odds of excavating the nugget of information from the goldmine of your memory are twice as high for pictorial information (Dewan: Words Versus Pictures: Leveraging the Research on Visual Communication). 0_O

I’m digressing… Since you aren’t here to listen to a neuroscience lecture, let’s jump into the nitty-gritty of how to create and optimize your blog images. 😉

 

Pinterest graphic: how to create and optimize blog images - ultimate beginner's guide | PearTreePond - The Solopreneur Safety Net

Pin me!

Which Kinds of Images to Use For Your Blog

Let’s start by looking at 5 kinds of images you could include in your posts to greatly improve the quality of your website’s content.

1. Your Own Photos

Obviously, you can take your own photos for your blog posts (duh). If you have the time and skills to do this, this is probably the best thing to do. You don’t have to worry about royalties, licenses or your post looking like a clone of everyone else’s blog posts.

Moreover, you are in control and can brand the images any way you want. Take advantage of trends like creating beautiful flat lay photos to display your products or create gorgeous backdrops for text overlays.

Nowadays, most smartphone cameras will be absolutely sufficient for taking amazing high-quality images. When I take my own photos, I either use my iPhone camera or my good old Canon EOS 750D.

 

2. Free Stock Photos

Ok, I get it – you don’t have the time nor the inclination to fiddle with a DSLR or any other camera. Fair enough.

So if taking your own photos isn’t working for you and you are on a budget, you could look for free stock photos to use as your blog images. Always check the copyrights though! Public domain or Creative Commons (CC0) images are generally a safe choice, still, double-check whether or not you are allowed to edit them and need to credit the artist.

There are lots of places where you could go to find free images for your blog. My two favorite sites are Unsplash and Pixabay – they have millions of images that you can download for free.

The one downside to using public domain or CC0 photos is that EVERYONE is using them. So having them as your blog images or in your social media graphics will not look overly original.

 

3. Premium stock photos

Next up are paid stock photos. If you wanna look more professional and less generic, you can opt for using paid stock photos as your blog images.

Good places to buy stock photos are Creative Market, Adobe Stock, and Shutterstock.

The great thing about Creative Market is that you can sign up for free and get 6 free design goods delivered right into your inbox EACH week. Woohoo! From stock photos to templates and beautiful fonts – their freebies are always useful and high-quality. Can anyone ever have too many design assets? I’m definitely guilty of hoarding them like a squirrel hoarding nuts for winter… You never know when you’ll need them, right? Truth be told like a squirrel I’m equally bad at actually FINDING them when I need them… But that’s another story.

Powered by Creative Market

 

If you are already using other Adobe products like Photoshop or Illustrator, you might wanna look into the Adobe Stock collection – you can check out their one-month free trial to see if you like their offer.

 

 

4. Screenshots

Especially useful for tutorials, design work or showing off your analytics results – screenshots are a great way to visualize complex content. Instead of explaining to your readers, where to find the hidden button in a programme, just show them a screenshot and it will be much easier for them to follow along. Or instead of explaining your design, show them a screenshot. You catch my drift.

Not sure how to take a screenshot?

On a Mac: Press cmd + shift + 3 to capture your whole screen or cmd + shift +4 to select only a portion of your screen (by dragging a rectangle around the chosen content with your mouse).

On a PC: Press windows + print to capture your whole screen or windows + shift + S to select a portion of your screen (by dragging a rectangle around the chosen content with your mouse).

 

 

5. Graphics & Infographics

This group encompasses things like optimized graphics for Pinterest, mockups to advertise your offer or flow-charts and infographics you create to illustrate a complex process.

I know a lot of people hide their Pinterest images because they find the long vertical graphics misplaced on the blog post. I, however, don’t hide my Pinterest graphics anymore – if you create Pin-images, I’d suggest you make them easy to spot and pin. Makes more sense to me. If your readers don’t see something pin-worthy straight away, they might not be inclined to pin anything at all.

The time-saving and easy way to incorporate stunning graphics is to buy templates from places like Creative Market and quickly customize them for your needs.

But even as a non-designer you can totally make your own graphics. Free tools like Canva or Easil have ready-to-use templates that make it easy for everyone to create great-looking graphics in minutes. If you want something less off-the-rack, you might still have to invest in a few stock photos or illustrations though. Another drawback I noticed with Canva is that you can’t download your graphics as PNGs with transparent backgrounds on the free version. But sometimes that’s exactly what you need.

If the design force is strong with you, skip the cutter-cutter templates altogether and make your own! I use Adobe Illustrator to create mine. Intimidating as this programme might seem at first glance, believe me, it’s not that difficult to use once you know a few basics (I’ll show you in another post). And then there is no going back to any other programme…

As for creating infographics specifically, you can find templates on sites like Canva, Easelly, or Venngage.

 

 

3 Basic Methods For Editing Your Blog Images in Photoshop [Photoshop Tutorial]

Ok. Let’s assume you’re still at the beginning of your journey towards becoming a graphic design Jedi and creating complex graphics and infographics is out of the question for the moment.

All you want is take an image and edit it so you can use it on your blog as well as on other social media.

The programme I use for editing all my photos is Adobe Photoshop. And because I’m a big fan of the Adobe products,  I’ll quickly show you three basic methods for editing your images in Photoshop (I’m using Photoshop CC 2018, in case you were wondering).

Seriously, don’t be intimidated by these programmes.

They are wonderful tools and you’ll quickly learn how to use them. By learning to use the right tools early in your design journey you save yourself the time and hassle of switching programmes later on.

 

Resizing Images in Photoshop

Chances are, you start out with a huge image file. And now you need to resize it because otherwise, your website will take forever to load.

1. Open your image in Photoshop (right-click on your image file -> Open With -> Adobe Photoshop).

2. From the top bar menu choose Image -> Image Size -> set height/width of your image.

 

How to resize images in Photoshop | PearTreePond - The Solopreneur Safety Net

Resize image in Photoshop

 

What size should you use? WordPress usually displays your image in one of three predefined sizes: Thumbnail, Medium or Large. You can check the dimensions of those settings by choosing Settings -> Media from your WordPress Admin panel.

Say your settings for the largest image size are 1024 x 1024 pixels (maximum height/width), then there’s usually no need for you to save bigger images.

If you are preparing your image for one of your social media networks, check their current (!) image dimension requirements (Social Media Image Size Cheat Sheet) and use these to resize your image.

 

 

Cropping Images in Photoshop

Now if you only want to use a certain part of your image, you can use the crop tool and select the part of the image you need.

1. Open your image in Photoshop (right-click on your image file -> Open With -> Adobe Photoshop).

2. Choose the crop tool from your Photoshop tool panel -> click on your image to display your selection rectangle -> drag the sides of the selection rectangle over your chosen part of the image -> press the ‘Enter-key’ on your keyboard to commit to your selection. Don’t like the result? Choose ‘Edit’ from the Photoshop top menu -> Undo Crop. You are back to where you started. Easy-peasy. 🙂

 

How to crop an image in Photoshop using the crop too. | PearTreePond - The Solopreneur Safety Net

Cropping images in Photoshop

 

 

Adding a Text Overlay to Images in Photoshop

Another thing you’ll likely want to do is adding a text overlay to your image. Here’s how you do it:

1. Open your image in Photoshop (right-click on your image file -> Open With -> Adobe Photoshop).

2. In your Layers-panel, choose ‘Create a new layer’ from the bottom menu bar. In case you don’t see the Layers-panel, go to ‘Windows’ in the Photoshop top menu and select ‘Layers’.

 

How to create a new layer in Photoshop | PearTreePond - The Solopreneur Safety Net

Create a new layer in Photoshop

 

3. Once you added a new layer on top of your image, select that layer in the Layers-panel. Then choose the ‘Horizontal Type Tool’ (T) from your tool-panel. Left-click into your image where you want the text to appear, keep pressing the mouse button down while dragging the cursor across, to open a text box.

 

4. Type in your text.

 

 

How to add a text overlay in Photoshop | PearTreePond - The Solopreneur Safety Net

Add a text overlay in Photoshop

 

 

 

Compressing and Optimising Your Blog Images For Your WordPress Website

Now that you edited your blog image the way you wanted, it’s time to compress and save your image. Remember, you want your images to look clear and crisp, BUT you don’t want to slow down your website by using huge image files. It will always be a tradeoff between image size and image quality. You need to walk the line of reducing your image size just that far, that the quality of the image doesn’t suffer discernably.

 

Image Compression: PNG vs JPEG

Generally, there are two compression formats you could choose to reduce image size: PNG or JPEG. Which one should you use?

It depends. PNG files are usually much larger files, so I would go with JPEG whenever possible. But then there are times when you need transparency in your image – which you’ll only get in a PNG. So unless you need the PNG, go with JPEG.

 

Saving Your Image File

Now if you created your image in Photoshop and you are only going to use your image on the Web, select ‘File’ from your Photoshop top menu bar -> Export -> Save for Web (Legacy). From the presets, choose JPEG Medium (50) -> Done. That should give you a decent enough result.

 

Choosing an Image Title

Remember to give your image file a meaningful, descriptive name like photoshop-tool-panel.jpg instead of radompicture123.jpg. This will make it easier for yourself and search engines to find the right images.

 

Adding ALT-Text to Your Blog Image

One last thing to remember: After uploading your file into your WordPress library, edit your image and add ALT-text. Alternative text aka ALT-text is shown whenever your image cannot be displayed and is also read to visually impaired readers by screen reader programmes.

 

Conclusion

 

  • Readers are more likely to read and share posts with images.
  • Including images in your blog posts makes them easier to read, understand and remember.
  • You could include your own photos, stock photos, screenshots, graphics and/or infographics to improve your content.
  • Easily resize, crop and label your images in Photoshop.
  • Choose the right image compression, give your image file a descriptive name and add ALT-text once you imported your blog image into your WordPress media library.

 

Enjoyed this post or have anything else you would like to know about creating blog images for your website? Just let me know in the comments below! 🙂

Sharing is caring – please feel free to pin and share this blog post to your heart’s content.

 

If you haven’t done so already, join my mailing list and look forward to weekly extra tips, pep-talks, and heartfelt support.

 

Happy experimenting!

Yours,

signature

 

 

 

Related reading:

Prelude: DO YOU HAVE WHAT IT TAKES TO BE A SOLOPRENEUR?

          I:  WHAT IS A NICHE AND HOW TO FIND YOURS

 II: GROWTH MINDSET SECRETS OF SUCCESSFUL SOLOPRENEURS

 IIIHOW TO WRITE A SERIOUSLY HELPFUL BUSINESS PLAN

 IV: BRAND YOURSELF – BEGINNER’S GUIDE TO BUILDING AN AMAZING BRAND 

V: HOW TO CREATE A PROFESSIONAL WORDPRESS WEBSITE ALL BY YOURSELF

VI: THE FIRST 5 THINGS TO DO ON YOUR NEW WORDPRESS BLOG 

VII: KEYWORD RESEARCH – A POWERFUL SEO STRATEGY FOR BLOGGERS

VIII: WHAT’S THE BEST KEYWORD PLANNER IN 2018? – ADWORDS AND ALTERNATIVES

IX: HOW TO WRITE A BLOG POST YOUR AUDIENCE LOVES

XI: THE NUMBER 1 MARKETING & PROMOTION STRATEGY TO BOOST YOUR BLOG

XII: MONETIZATION STRATEGY – 9 PROVEN WAYS TO MONETIZE YOUR BLOG NOW

XIII: 6 WORK-LIFE BALANCE TIPS FOR SOLOPRENEURS

3 REASONS WHY YOU NEED TO CREATE A BLOGGING WORKFLOW NOW

 

 

 

 

Claudia

I'm Claudia from PearTreePond - The Solopreneur Safety Net. My mission is to help aspiring bloggers and infopreneurs to build a sustainable online business from scratch.

RELATED POSTS

Leave a Reply

avatar
  Subscribe  
Notify of