Today I’ll be sharing with you the why’s of using Flickr to host your WordPress blog or website’s images and then teaching you how to do it. I’ll also be going through some of the pro’s and con’s of this method.
If you’re reading this article I am going to assume that you are:
- Interested in improving your blog or website,
- Wanting to increase your blog’s speed getting and your loading times down, and
- Not able to pay your web host a ton of money every month and set up CDN’s etc to do this for you.
Before digging into the step by step guide on “How To Use Flickr To Host Your WordPress Blog or Website Images” I’d like to explain (for those interested) a little bit about more about Page Speed, Hot Linking Images and how images on the internet work. For those that are not interested in learning more about this – you can just scroll past this and go directly to the guide below.
Or simply click here to go directly to the guide.
What is Page Speed and why does it matter?
According to Moz.com “Page Speed is a measurement of how fast the content on your page or post loads.” This is not to be confused with “site speed” which is the average page speed for a number of visits to a variety of pages on your website.
Why does Page Speed matter?
The two most important reasons you want your site to load faster are:
- For user experience: So that people actually stick around to read or view your content.
- For SEO purposes. If you weren’t aware, your website speed is a ranking factor that Google takes into account when determining your position in their search results.
If you would like to view some of the other ranking factors, you can do so here but BE WARNED: getting into this stuff can be a very slippery and time consuming slope. It may be best to ignore the majority of these for now and focus on improving your actual blogging.
Here are two popular tools that will help you determine how quickly, or slowly, your pages are loading and also offer advice on how to reduce those times.
When using the above tools remember: it’s not only your home page that you want loading quickly – it’s your actual posts and pages too. Instead of going through every image on our sitee and reducing their individual sizes, we are going to achieve this by “hot linking” or hosting our images elsewhere.
What does Hosting or Hot Linking my images mean?
Simply put, “hot linking” your images means pulling them from someone else’s website (actually their server.) If you don’t understand what this means I’ll try to explain here it as simply, and as briefly, as possible.
You are probably already familiar with the process of “adding media” to your WordPress website. It’s a simple upload function. Nothing technical. But where are those files going? They are being stored on a web server (a different kind of physical computer that your web host provider own’s and that is connected to the internet.) Also, each image that you upload get’s it very own URL. This is called an Image Address or Image URL. But it works the same as a normal URL.
So when you add those images to a WordPress blog post via the “add media” tab, what you are actually doing is linking to that image file via its image url. It looks like this:
and you can see it is stored under my website’s “wp-content” file. This is where all WordPress image uploads are stored. This is the file that we are trying to trim down or avoid getting too big.
SO if you can use a URL to “pull” or display your images from your server – what is stopping you from pasting a URL link and pulling an image from someone else’s server? The answer is…Nothing at all.
In fact I am doing this with all the images in this article. To find out where they are being hosted just right click any image, select “copy image URL” or “copy image address” and paste it into a new tab on your web browser’s address bar and you will see where i’m pulling them from.
This “pulling of images” is called hot linking and bloggers and webmasters have been doing this since long before WordPress came around.
Is there any harm in Hot Linking images? Yes.
- You are stealing someone else’s bandwidth & causing a drain on their resources. For example – If you pay your web host for 100gb of bandwidth every month and someone is hot linking your images to their blog (hopefully they’ve credited you) – a portion of your bandwidth is used every time someone visits the post that is hot linking your image. Still with me? Good. It is only tiny amounts of data at a time but what if their post goes viral? All that traffic will suck your bandwidth dry.
- The other issue is that if you are hot linking from someone else’s website and that person decides to swop the images but keep the same url’s – your images will swop too!
This happens very rarely but I read of one case where US politician John McCain had hot linked an image (or rather, one of his minions had) and the owner of the original image found out and intentionally swopped the image to something really controversial, causing HUGE embarrassment for Mr McCain.
This was his way of saying “hey! I’m in control of this URL, you didn’t credit me and this my bandwidth thank you very much.” – You can read more on that here. It’s actually really funny.
So if it’s harmful then why are we still talking about hot linking our images from Flickr?
Why host my website / blog images on Flickr?
Now that we know about some of the bad things that can happen WHY are we talking about doing the very same thing on Flickr? Great question. The main reasons are:
- You are in control of the images you put on Flickr. It’s your account. The images are not going to get swopped out.
- Trust: Flickr has been one of the major photo storing sites for years. They are owned by Yahoo and I don’t see them shutting the service down anytime soon (if indeed ever.)
- Flickr’s servers are top class and seemingly unlimited – you know this because Flickr gives anyone who signs up a free Terabyte of space. Which is still impressive in 2015.
- Their server’s are not only unlimited, they are also super duper fast. Or at least faster than anything that you or I will ever be able to afford.
- They want you to. Here are their community guidelines, see point four.
- This is way to use Flickr as a CDN (content delivery network.) It’s not a true CDN in that content isn’t served from your nearest location but it’s still a much faster solution than hosting your own images.
In short, you don’t have to worry about being a drain on Flickr’s bandwidth. They actually encourage people to use it.
So a better question isn’t why do it but rather why aren’t more people hosting their blog or website images on Flickr?
The answer is that most people don’t know that they can. There are hundreds of millions of websites out there and most are terrible. Also only people actively looking to increase their website speed and improve use experience (a fraction of website owners) will ever find about about this method. Or even, this article.
And that, finally, brings us to the guide, the working steps.
How to use Flickr to host your blog or website images.
Here are the steps involved in hosting your images on Flickr and getting a faster, more lightweight and better ranking website as a result.
If you don’t have a Flickr account – Go create one and score 1 terabyte of free space.
You’ll need to upload your photo’s to Flickr. There are a variety of ways in which you can do this. Flickr has actually created the “Flickr Uploadr” program for Mac, Windows, iPhone and Android and if you set this up right all your photos will be automatically uploaded to your account on their servers.
I haven’t set this up properly yet because I had my own system prior to the uploader app. What I do is create blog post albums in Adobe Lightroom and publish those straight to Flick from within Lightroom. **
I would advise creating albums per blog post (especially if your posts are image heavy) but you don’t need to.
In Flickr: Open a photo from an album or your photostream.
Click on the “sharing arrow” and make sure that you select the “HTML embed” tab.
Choose your preferred dimensions. I usually go for 1024 wide (for landscape orientation pics.) The image should automatically resize to fit your blog’s content column width as long as the column width is less than the image width.
For those that are worried about formatting the image size – you can still adjust it in WordPress if you need to. Now right click and copy the html embed code.
Head over to your WordPress post, make sure your editor is in Text mode and paste your embed code into the editor. I repeat: make sure your editor is in Text mode.
It should look like this:
Switch over to Visual mode and hey presto, your image appears like magic! You could leave it like this but what about writing a caption and setting your alt-text.
Also, if people click on the image as it currently is, they will get taken to your Flickr Album (probably not what you want.) To prevent this from happening, the next two steps are VITAL.
Once you see your image appear in Visual mode. Click on it (anywhere) and you’ll see the familiar toolbox pop up. Click the pencil icon to edit the Image Details.
Once the Image Detail dialogue box is open the first thing you must do is look for “Display Settings and under “Link To” select none.
Now you can add a caption in and adjust your alt-text if you like.
When you are happy, click the Update button.
That’s it. Hit preview post, sit back and revel in your mastery of the internet as your images load faster than you’ve ever seen.
It’s definitely a step or two more than if you had just uploaded your pics to your own server but you get used to the process very quickly and you save a ton of loading time while improving your rankings. I hope that you find this trick as useful as we have.
Pro’s and Con’s:
There are pro’s and con’s to almost every action you take online and this is no exception. Blogging is getting competitive; people are investing huge amounts of money and resources into growing their blogs and their audiences. And most of us want to provide a great online resource for our readers. As a result we have become increasingly more
paranoid cautious about taking risks with our work.
- A lighter, faster, more agile website.
- Cheaper (It’s FREE) than getting a CDN (Content delivery network.)
- Having a small website is easier to manage when moving from one web host to another. For example, many hosts offer “free” site migrations. But what they don’t tell you is that there is a size limit (2gb / 3gb etc.) And images (by far) take up the most space on websites.
- Faster loading times = better user experience for your readers.
- Better ranking by Google and other search engines.
- Not having to resize your images before uploading. Flickr takes care of this automatically.
- The faster your images load, the more chance your visuals have of making an impact.
- 1 TB Free cloud storage.
- If you follow the advice I gave about creating albums, your blog images will all be categorised nicely as opposed to being strewn all over your poor computers desktop (you know they are.)
- If you follow my method – specifically step 9 – your readers will still be able to Pin your images from Flickr and still have those pins point back to your website. Which I know is a concern for many people exploring this option.
- Not having to upload the same images twice: Flickr integrates with IFTTT. I created a simple recipe that automatically send images from a specific folder in my Dropbox over to my Flickr account. This saves me time and data.
- Ultimately you are not in control. There is a chance (however small it may be) that one day Flickr / Yahoo changes their policies and your images will disappear. This is the risk that anyone takes when putting images online (anywhere.)
- You have to take one or two more steps to get your images up.
- You won’t get traffic from people that find your image in Google Image Search (but this probably is not a good strategy to have anyway.)
Yes there is a risk, I’m not here to marginalise it. But I’m not here to sell or persuade you to use this method either. As they say “use it, don’t use it.” The purpose of this post is to help you improve your blog with the resources you have available.
Of course there will always be images that you cannot avoid uploading to your server (icons, profile pics, feature images, logos etc) and sometimes it’s convenient to upload a quick small pic to your server, but for the majority of blog posts: this is the best way.
I hope you’ve found this article useful, and if you have any other thoughts and ideas or need to point out something that i’ve missed – please share it in the comments.
- Find out more about Page Speed on Moz.com
- Publish photos from Adobe Lightroom straight to Flickr Albums.
- Hacking John McCain
- PageSpeed Tools
- More awesome IFTTT Recipes from Buffer.