You are using images on your website, right?
People, in general, are very visual. What do you see when you look at a page full of text? Not, too enticing, right? What about when you see the same text but broken up with images, headlines and captions? Much less stressful to look at isn’t it?
So you’re using images – great!
Where are you getting your images from? Please don’t answer “Google”. I just recently heard about another person getting a letter from someone’s lawyer because she used his images on her website, thinking it was ok to grab images off of Google image search. They are made public, right? Well, here’s the thing – all the images on my website have been purchased by me. That means I have the right to use them on my website. When I buy a book I have the right to read that book, not reproduce it. Same goes with images. It’s always very important to read the fine print when using free images so you know exactly what you can – and cannot – do.
Step One – Purchase Images
When you buy a stock photo you will usually have a few different size options. Depending on what you want to use it for, you may choose different sizes. Bigger is better, right? Well, not always. You don’t want a tiny photo that you need to enlarge – that will just look blurry. What happens if you buy the largest photo? I’m sure you’ve visited websites where the images take FOREVER to load! Most likely that is because they used a huge photo that they never bothered to resize or optimize. (You’ll want to do BOTH, by the way.) Did you get frustrated waiting for the image(s) to load? Did you stay or did you go? Here’s how to keep your visitors from getting frustrated and keep them ON your website.
Yes, purchasing images can be costly, but there are some very reasonably priced websites out there that you can get wonderful pictures from! All the images on my website are from DepositPhotos.com. I’ve also used quite a few pictures from 123rf.com for other projects and been very happy with their selection – and their prices. While sites like Shutterstock and iStockPhoto can be much pricier if you are just buying a couple of images, they do have great rates if you will be purchasing many images on a regular basis.
Step Two – Know Your Sizes
Before you upload anything to your website, know what size image is needed. To find this out, check your theme’s instructions or ask your developer for the sizes. Now, make sure your photo is the correct size/proportions so that nothing is getting cut off. I recently visited a website that was wedding-related. The bride and groom’s heads were cut off! Not exactly the look I think they were going for. Size your images purposefully. Don’t have a program such as Photoshop on your computer? There are some great online options such as Pixlr.
Step Three – Shrink Them
File size that is. Now that you have the images in the correct sizes/proportions, you need to optimize them. An image that weighs in at 30KB is going to load faster than a 100KB image. This may not seem like a lot to you, but to your visitors waiting for your page to load, it could answer the “should I stay or should I go?” question. Stay! It’s especially important if you have a few images on a page – those numbers add up, and page load speed goes down. Try out services like TinyPNG, JPEGMini or Compressor.io
Step Four – Name Them Wisely
SEO – Search Engine Optimization – let Google know what your image is about. IMG06417.jpg is not going to let Google know that your image shows a piece of chocolate cake but chocolate-cake.jpg will. Rename ALL images BEFORE uploading to your website! The same goes for ALT tags (which can be added during the upload process). ALT tags describe your image for the reader in the case they are unable to see the images for any reason, such as using a screen reader. Title text is shown as a tool-tip when hovering your mouse over the image and is not required but can be useful. Using your SEO keywords in the image name, alt tag and title text is helpful.
Step Five – Upload
You’ve purchased, sized, optimized and named your images – now it’s time to add them to your website! Make sure you’re adding them into the content where they make sense and the text is wrapping around nicely, not pushing up against the image. Ask your developer to set the padding around your images if need be.
That’s enough for now! Now let’s go Rock those blog posts!
Do you have any great image tips you’d like to share with us? Please let us know in the comments below.
Like what you’ve learned here today? Share with your friends and let them learn too!
Have some questions, or would like someone to walk you through some of these steps? Set up a free call with me to chat about your options.
Thank you for the great and wonderful post. Very informational and very helpful for me for starting out in the blogging hemisphere being a new realtor as well.
*The Sunny SoCal Realtor*
I am happy to hear this is helpful to you, Robin. Please do not hesitate to ask if you have any questions. 🙂
Helpful info Mindy thank you for sharing!
Thank you, Lynette.
A great reminder in such a visual world. It really is about the graphics we use, not just the great content. Both need to be combined.
So true, Sonya – a perfect mix of content and images!
I love the tip about naming your image! I’ll have to go through some back posts and check all of this!!! Great post and very helpful!
Oh, great, please do! It is so helpful in many ways to have the images properly named.
I recently spent some time resizing images and “smushing” them. I’m so glad to have handy tools available to me to increase the load speed. There are some new resources here for me to check out. Thank you!
Good for you, Jennifer, for resizing them!
Thanks, Mindy. I need to optimize my photos and start using alt text more. I’ve started using this and need to be consistent. I also need to shrink my photos. Thanks for the resources and references to help make beautiful images we own and help make an impact in our message.
Good luck, Tandy! Tackle a little bit at a time and it will get done! You’ll be so happy when it is!
Thanks for these ins and outs of using images. I need to be better about the alt tags for sure. Do you also recommend adding text to all images? I understood this was beneficial..again something I need to do more often
Hi Alene. Alt text should be used on all images as this is how the screen readers will identify the text to both Google and people who rely in screen readers to enjoy your website.
Great article! Love the comment about shrink them – loading time. Will have to work on that!
Great Robin! Shrink them! 🙂
You know me.. love this and I just did a post a month ago about optimizing images… it’s still crazy how many don’t. Thanks for refreshing this much needed topic!
Yes, unfortunately there is not much information out there about this for people getting started and if not taken care of early your site can get way out of hand!
Thanks for sharing. Does this Alt tag actually helps in being found? Do you file them in Flickr or something?
Lorii, the alt tag can help Google in reading your content, so yes, they may help in getting found, but I would not say that is a big reason for adding alt tags – the big reason for alt tags will be for those who need a screen reader and for times when the images may not show (such as someone with slow internet who may have images turned off).
I use compressor.io for my images and it is an excellent tool. It reduces my images from 1MG to about 250KB. Thanks for the information, I will be checking on Pixlr too.
Apolline, compressor.io is a great tool as well. Remember to check the actual width and height of the image and make sure it is not bigger than you need to begin with. Most images can be sized down to under 100KB if sized properly.
Love the advice on shrinking them. Mindy. I’d love you to write about the best sites for beautiful photos.
That would be a great post, Denyse. I have thought about it, but now with your suggestion I will definitely write that one soon! Thank you!
Pingback: I Have a Website - Now What? - Mindy Iannelli