This is Part 3 of my Beyond the Words series exploring the various and sundry ways in which you can add multimedia such as images, videos, audios, and downloadables (PDFs) to your website to spice it up.
Adding images and visual interest to your blog posts is one of the critical keys to getting and keeping readers engaged with your content. In part 2 of my series, I outlined the why and the how of getting good images inserted into your content – why it’s important and technically how you go about doing it in an eye-catching and strategic way.
But before you fire up WordPress to start plugging in all those amazing graphics, there are some things you want to do to your images themselves to make them website-ready, make things easier on yourself and better for your site and for Google.
If you’re a photographer and take your own pictures for use on your website, first of all – yay! That’s an awesome way to create a unique brand identity for your content. I wish I were a photographer, but alas, I’m mostly reduced to finding interesting stock photography and taking advantages of other people’s amazing photography skills to spice up my own content.
In the world of photography, bigger is typically better. A 5 or 10M image is nice and crisp and high resolution. Perfect, right?!
But if you’re using that image to illustrate a point in your blog post, you most definitely do not want to include it at its original size.
First off, you’ll make your site visitors mad because it will likely take forever (more than 3 seconds at least which is forever in our right-this-instant expectations world of the internet) to load your page, and secondly, it will make Google mad because they really want your web page to load super-fast for your visitors.
So what’s a blogger to do?
There are 3 fairly straightforward steps you can take to prep your images before adding them to your website so that they’re user and google-friendly:
1) Shrink the image down to size
A high resolution image can easily be upwards of 5000px wide (which is ginormous). And despite the prevalence of huge computer monitors these days, the size of most screens that are going to be viewing your content is still less than 2000px wide. So anything wider than that is really just wasted bandwidth, and truthfully, you’re most likely going to be able to get away with something considerably smaller.
There are a couple of ways you can go about figuring out just exactly how wide your images should be, and it will likely vary from site to site. It’s totally dependent on the WordPress theme you’re using.
Ideally, the person who helped you create your website will give you this information or have it pre-set for you in your WordPress dashboard under SETTINGS / MEDIA.
My rule of thumb for it is that the LARGE size should be the full width of the blog post column and the MEDIUM size about half.
But, maybe your developer wasn’t all that thorough or maybe you set it up yourself and never thought to check the Media Settings. Don’t fret – all is not lost. You can still gather this information yourself.
There is a useful little browser extension called MeasureIt available for both Chrome and Firefox. If you install it in your web browser, it creates a button in your toolbar that lets you drag a rectangle around a section of a web page and it will tell you the dimensions of that section. You can see in the example below that the full width of this particular block of text is 660px wide – a good deal less than the 5000px we started out with.
For my own site, I keep this information stored in the notes in my editorial calendar so I don’t have to remember (which is getting harder and harder to do these days) each time I start a new blog post.
So now that we know we only need a 660px wide image and not one 5000px wide, how in the heck do we shrink it down?
This is where some kind of image editor comes in handy. If you have Photoshop or something similar loaded on your computer, you’re golden. But if you’re not a photographer or a designer, you’ve still got options.
There is an awesome online app called Pixlr that is very similar to photoshop. It’s a fairly complex application, and if you want to, you can do a ton of image manipulation with it, but it’s super easy to use it to scale down your images to the appropriate dimensions and be done, too. You don’t even need to create an account if you don’t use it all that frequently.
(Canva is not a bad tool for this either, but I’ve found Pixlr to be much more straightforward for this particular task.)
Once you’ve opened your image in Pixlr, choose IMAGE / IMAGE SIZE and then enter the new width that you want it to be. If you have the CONSTRAIN PROPORTIONS checkbox on, it will automatically calculate the height for you. Then SAVE it back to your computer. I usually give it a new name at this point so I don’t overwrite my original high res image which I’m very likely going to need again at some future point.
2) Compress it
So the next step, once you’ve downsized the image is to actually compress it. There is a lot of information stored in an image file that just isn’t necessary when trying to display it on a website, so let’s compress it to get rid of that because every little byte counts.
This step is a lot easier. There’s a little web app called TinyPNG that compresses both JPG and PNG files. All you do is open up the page in your browser and drag your newly resized image into it. It chugs away for a few seconds and Bam! your compressed image is ready to download. Very often you’ll save like 10-25% of the file size.
3) Give it a good name
If you’ve taken your own picture, your original filename is probably something like IMG_0635.jpg. If you’ve downloaded it from a stock photo site, it’s likely just as nebulous – something like pexels-photo-55662.jpeg. Neither of those names do anything for you in terms of search engine juice or even good organizational habits. And these are both opportunities to help yourself out from the get go by changing that filename.
A couple of tips when choosing a filename
- Do – give it a good descriptive name, actually describing what the image is and include search engine keywords that you’re trying to rank your site or blog post for. Don’t be gratuitous and call it best-coaching-tips-ever.jpg if the image is of a woman working on her laptop. But if you’re trying to rank for business coaching, you can use woman-business-coach-productive.jpg or something along those lines.
- Do – use hyphens (not spaces or underscores) to separate words in your image name. This hearkens back to the days when computers didn’t know what to do with spaces in a file name and thus the file (or image) got broken. Most browsers these days deal with it OK, but there are still instances where a space in a filename will cause an issue, so in general, it’s a better practice to use hyphens between words rather than spaces. You never know when someone on an old computer or web browser might be reading your post. Plus, Google knows how to read hyphens and recognizes them the same as spaces.
- Do – use all lowercase letters for your filename. Like in many things in the internet world, filenames are typically case sensitive, so My-Pretty-Picture.jpg is a different file than my-pretty-picture.jpg. And you’ll drive yourself nuts trying to figure out why your image isn’t showing up if you’ve named it using capital letters but are trying to reference it using lowercase letters and the blasted thing isn’t showing up. Urgh! So keep it simple and consistent and just always use lower case letters.
- Don’t – use special characters in your filenames like & or ? or + (here’s a complete list of characters to avoid if you’re interested: http://www.mtu.edu/umc/services/digital/writing/characters-avoid/). Again – in coding terms and the land of the internet, these mean specific things, and filenames that include them kind of muck things up.
So that’s it. Now you’re ready to go forth and spread beautiful but perfectly sized and suited images all over your website.
Next up in Beyond the Words, we’re going to start tackling videos and the easy and slightly less easy ways you can add them to your blog posts because who doesn’t love a good cat video?
