Practical advice all around! Gather, my friends. This is gonna be as quick as possible. Today we’re talking about how to optimize your images to improve user experience (“UX” – fancy word for “how much sense your site makes”) and SEO (“search engine optimization” – your ranking on Google, basically). Without further ado, here are your 2 tips:
1. Resize your images!
When you get a picture from Unsplash, NoHipsterStocks, or another stock photo website, they’re usually ridiculously big. Like 5000px by 3000px big. If you’re using the image as a static background, that’s one thing. But if you’re using CSS to resize it and make it 500px by 300px, you’re not doing yourself any favors in regards to SEO.
You see, the bigger your picture, the longer it takes for the page to load. Long load times make users antsy – and thereby hurt SEO. So resize your images not with “width=x” and “height=y” properties (this does nothing for page load time because the full image still loads!), but manually using Photoshop or Paint or something. Resize the file and then upload.
Things to keep in mind about image resizing
PNGs tend to have larger file sizes than GIFs and JPEGs, so they take slightly longer to load. But they’re also higher quality. The rule of thumb I follow is as follows: If I have a page with a ton of small or medium-sized pictures (like in an e-commerse store), I’ll convert them all to JPEGs. If I have one or two medium sized pictures that I want to be sharp, I save them as PNGs.
Also, keep in mind that when you resize non-vector images (PNGs, JPEGs, GIFs), you always reduce the quality. If you try to make an image bigger, you’ll notice it a lot. The image will be noticeably fuzzy. If you try to make an image smaller like I suggested above, it’ll also happen, but it’s a lot less noticeable when you make images smaller. So only ever make an imager smaller – never larger. Just something to keep in mind.
2. Use alt tags!
Google “reads” pages. What that means is pictures are overlooked. Words are king. So in order for your pictures to mean anything, you need to include an alt description. Like this:
<img src=“http://leisamichelle.com/wp-content/uploads/2017/02/day-06-BONUS-the-key-to-creating-e1491513062200.png”>
With alt description:
<img src=“http://leisamichelle.com/wp-content/uploads/2017/02/day-06-BONUS-the-key-to-creating-e1491513062200.png” alt=“the key to creating”>
The pictures look exactly the same to the user. But search engines can only “read” the second version. So take a couple extra seconds and throw in an alt description for your images.
BONUS: What size should my featured image be? 600×325!
Wanna share your post on Facebook? Make the featured image 600px wide and 325px high. That’s the magic ratio for thumbnail images.
When the featured image is bigger than 600×325, it gets cut off:
When it’s 600×325 though, it looks beautiful
BONUS: Quick design note.
WordPress desaturates images. If you use a really saturated color in an ad design, upload it to WordPress, and then get confused why it looks faded and dull, that’s what’s going on. Sniffle sniffle…
Recap
There’s only two tips, so make sure you do this right. Keep your page load times under control by resizing your images before you upload them, and include an alt description in your img tag. The little things add up.
Happy marketing!
This post is a part of The Budding Marketer’s Guide to Marketing.