Hello everyone and welcome to our place! 🙂
Due to so many requests (1 to be precise xD) I decided it was time for me to explain how to add images/gifs to your WordPress posts without using any space from your library.
First, I’m going to start explaining the logic behind it!
When you have an account in WordPress you get some GBs for free in their server for media. In this case, it’s 4GBs. If you upgrade your plan they give you more and more space. To be honest 4GBs is a LOT! I’ve been blogging for 9 months now, I add a lot of pics and gifs in all my posts and I still only have used around 45% of my storage space, which means 1,8Gb (However, I’ve upgraded my plan to personal which means I’m at this moment sitting with a 6Gb storage space instead of 4).
Basically what happens is. You upload your media to the little space you have in WordPress gigantic server. See it as a really large dresser and one tiny drawer is for you. When you put the images in your post WordPress goes and gets the image from that drawer and puts it into your post. He does this with a source link.
A source link is something used in HTML programming to get you a media file. If you put the direct link of the image it will appear there. Of course it’s a little more complicated than that, but we don’t really need to know the science behind it!
But, wait… Isn’t there other wardrobes you can use/buy? Of course there are! A lot to be honest. So why can’t you just put your images there and instead of getting your images from that tiny drawer WordPress has for you, get it from other dressers? Well, you can! And I’m going to show how to do it!
In fact , if you know the basics of basic of HTML it’s pretty easy!
But first, let me talk to you about image hosters and where can you store your images (I mean you need to have then in the Internet somewhere or they won’t be able to appear here).
Let’s start with these free “dressers” I’m talking about. They are easy to find. I just googled image hosting sites and a list of 10 hosters appeared in the first hit.
EDIT – GOOGLE PHOTOS CHANGED THEIR WAY OF DOING THINGS AND NOW THE LINK IS ALWAYS CHANGING MAKING IT IMPOSSIBLE TO USE AS A IMAGE HOST! – THIS WAY I’M USING IMGUR!
However, I will later try out other hosts and let you know a small top about the ones I prefer 🙂
– The Process –
I’m going to finally explain how to do insert your pictures in your blog using HTML. Basically why you are here reading this! 😀 So, the code goes like this – remember this code as to be written in the HTML editor of your post, not Visual:
<!img src=”hyperlink” alt=”alternative title” width=”x” height=”y” />
(without the !, that is just to make sure WordPress do not compile that as HTML code)
Yeah, that’s it! Really easy right? Let me explain you each part of it:
- img src=”hyperlink”: the hyperlink for the image. Notice this has to be the direct link from the picture. To get this you need to press right-click on a image and copy link to the clipboard. (I think that’s the name… My pc is in Portuguese not English)
Question: Does it work for any image in the Internet?
Yes, it does. However, you don’t want to do it for images that are not inside your space. The reasoning behind this is that you won’t be able to have any kind of control in that image. Let’s say the website from where you took the image from goes down or deletes the said picture. It will stop showing in your post. So, always add your image to your host account first.
- alt=”alternative title”: You already know this from my class about Google Hits. When you add your images to the WordPress library you click edit and then add the said alternative title. However, since you are not using the library that menu will not work. This way you will need to put it into the HTML
- width=”x” height=”y”: that’s self-explanatory. Here insert the width and the height you want for the image. Just insert the original size (you will resize it later).
Question: How can I resize the image?
After you insert this HTML code go back to visual editor and the picture is there. It’s true that you can’t use the edit button, but you can enlarge or make the picture smaller as usual. You also can align it to where you want as you did before. You can also add captions as before.
WordPress already makes all of your images responsive. (Unless you tell him not to through HTML) This means that your picture will get smaller if someone gets to your post in a mobile phone. So you don’t really need to think about that.
– A Recap –
So, in steps in how to insert images without using the WordPress library:
- Create an account into an image hosting website (I use Google Photos)
- Upload your images to the website
- Go to WordPress and go to HTML editor
- Write the code <!img src=”hyperlink” alt=”alternative title” width=”x” height=”y” /> in the place where you want your image (without the !)
- Copy the direct link from the image you want it and put it where hyperlink is written
- Write the alternative title you want
- Put the original width in X and the original height in Y
- Go back to visual and arrange the size as you want, align it also as you want and add captions if you want
Here’s an example for the first image I have in this post (without the ! of course):
<!img src=”h!ttps://lh3.googleusercontent.com/0KBNA2HmREYdH_Xfqnw9rZre4Vv1aZDKsqphP6Iy4eT_19yKh9MjXluj3w-Eajac6gZTVTkKKq7QcEN7kSsaPzyQQuK1dwVq2VQBp5YNEyRH–74rXIfflHJad4ZofnySbM5kCI1oFi1LUvKRH_g2uGi28JBfwKX67Y6KdWr8xe48zCkw2irXWL_IJzBva2HHMNpFCydsPXNuMl7w_D9uQVj6Ji564PTktH_O2EIuPgf_CnN_u-eRaEpmYz3p9cmqhOAy2o1N8LZou-8UzfHGn3cv7RjYO-zRx9e3YsqOVX8PnyIYrPnmF2rvf8fJR6YZSysJLdnhE_OGjp5ix9IiSzqOe_vq-g0kniduI_VgZTuQYnA0UXgZ5x3_gTsq8f5MQ2ei0QHuldJQLTXvfQW7Bpbj6pTh_mDA8dW7DJwsk8_AF3gzTa4F37VDY5SPDnOOVRx3-cEioE1_u0hHAtwvpN7XhsoF0Md2TaSrpAvWaxoSBPK26D1RuNl7ENu-sAWWjrd1pGT6rWnNW7VWqLgbiPeBDQfi4_unPi8NsS0O7_lCizhLHmGICfPLjXFI1aCQ5A9EJ3PqAKsbVY1l0dq0AhVH35DKmgTCDJ5fA=w1006-h566-no” alt=”How to Save Space from Your WordPress Media Library” width=”1600″ height=”900″ />
When you add the caption, align it and resize the HTML will automatically change to reflect those changes.
– Things that You Can’t do with This Process –
Now, there are things that are out of our grasp (at least as a free/personal user) when using images from a host.
You can’t add the featured image with HTML, so for that image you will always need to upload it to your WordPress library.
Anything that is gallery-ish is also not possible. You can add two images side by side (3, 4, the number you want) for example, but when it comes to a full-fledged gallery it needs more HTML knowledge. To be honest I don’t know how to do it, but I’m pretty sure that you can’t add that kind of HTML as a free/personal user. Probably only with a business plan you will be able to do that.
As you can see it’s possible to have two pictures side by side, but I’ll explain you that another day, if you want of course 🙂 (and yes if you go to your mobile phone they will still be aligned and smaller)
But, well, if you want to a gallery with a lot of pictures like a slide show it’s not possible. For this you will need to upload your pictures into the library and do the “normal” way.
– Conclusion –
Yes, it is not possible to do everything with this process. However I think it helps A LOT when it comes to saving our precious library size! 🙂
Moreover, normally the pictures end up uploading faster using this process than WordPress library. I don’t know the theory behind it, but it’s a fact. Probably because these hosting websites go far and beyond to make sure the pictures are uploaded the fastest they can while WordPress has a lot other things to focus on.
I hope this helps you and that it was not too confusing for you! I tried my best to explain in th clearest way, but well… It’s not a really easy topic to explain! Specially when I don’t understand much of HTML 😛 But… That’s good, right? It means that even if you don’t anything as myself you are still able to do it eheh! If you have any question do it in the comments and I’ll try to answer with the best of my ability! 😀