Arthis Classroom: How to Save Space from Your WordPress Media Library
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
- Done!
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! π
Hey Arthifis… I think there might be a bug in code ? Many of the pictures are showing up with the “Stop” sign logo. For a moment I thought it was intentional, just mentioning so you can fix that when you’re back!
*
I used to directly upload to wordpress but I realized it was eating up space way too fast (and I calculated another 100 posts before I run out of juice), so I did what you used here too and exploited Google’s ‘unlimited’ space.
*
You should also mention that after the first upload from Google Photos, you can conserve additional space by uploading the same image/gif from the wordpress media storage rather than from google photos again – Each upload from google photos takes up additional storage because a new image file is created in wordpress.
*
Quote: “Probably WordPress would be easier to go down than Google”
Me: Cheers mate! We don’t have to worry for the rest of our lives!
Thank you so much for the heads up!!! I was able to change the HTML code in the hotel thanks to you!!! Of course with so many posts that could go wrong it had to be in the one where I’m explaining how to do the said images -.-” There goes my credibility… Bah!
It seems to be working now though… Hope it doesn’t happens anything wrong since I had tested the post 3 times before scheduling it to make certain that everything was working… I’ll see if everything is ok in the next hours…. Again, thank you so much for letting me not! π
Hmmm I didn’t understand the thing you said me to mention though… I’m not using any type of WordPress space :/ Did the post seemed to be talking about the uploading to WordPress through their add menu? :S Because that’s not what this is :S If you do that you are still using WordPress space. I’m talking about using HTML to get your pictures and don’t use any kind of WordPress space π
Lololol but it’s true, right? π I know WordPress detains 30% of the Interner websites, but still… xD
Again, thank you so much for your warning! If it was not for it I wouldn’t see the error until sunday LOLOL
I think I might have misinterpreted the HTML and WordPress space quite a bit. Just gave it another depth of thought after waking up XβD
Lesson learnt: Waking up early to read posts >> Staying up late to read posts.
*
Really lots of thanks for sharing your wisdom on WordPressβ web mechanics. Itβs definitely helping lots of bloggers here π
it’s worth noting that resizing images with html doesnt actually change the size of the image. so, if you have a shiny 1080p wallpaper that you’ve sized down to fit in your post, the user will still have to load the full image. so if you’re using particularly large images, it’s usually worth scaling them down before uploading them to reduce the size.
personally, i cant be bothered to generate the html tag for every image i put in a post (because my posts tend to have quite a few), so i created some scripts to do that for me. but there’s only so much you can do with a free wordpress account
That’s great advice! π I’ve just didn’t add that part because I’ve already talked about that in the Google SEO posts I’ve did π
Ahahah yeah, I would also do that, but I’m a somewhat of a freeloader still (I just have personal)
Very helpful tip. I was almost out of my 4GB this past April so my solution was to just upgrade my plan lol. Oh well, there were tons of other benefits too.
Thank you! π You are thinking on upgrading to pro or personal? π
I’m currently on Premium. Business is out of my budget range lol. The problem with me is that I like having thumbnail galleries way too much so even with 13 GB, the used space adds up very quickly. Trying to be a bit more careful so that Premium lasts me until I can upgrade Business without getting buyer’s remorse.
Completely can relate with you! XD business is way too expensive… Can’t you so the galleries using html? That way you would still saving your space eheh
Been meaning to try making a gallery using HTML. My brother studies Computer Science in college so he can help me with that.
idk, I like the simplicity of adding pictures and making a gallery through WordPress so I’m kind of just being lazy here lol.
Thanks as always for sharing your wisdom with the community.
Thank you for the kind comment! Always love to help!
That’s how I do almost all of my pictures now. I used to add them all to the photo library when I first started but figuring this out was a BIG deal so good on you for getting this knowledge out there for folks π
Thank you so much for the kind comment! Yeah, at the moment it’s also the way I do all my images! The library space is way too tiny for us avid bloggers ahah
Anytime π
That’s why being crafty with the space is important!
Oh gosh I didnβt even know that I would run out of room. I guess I better βget smarterβ lol
Ahahahah! XD Well, I also had to take some time until figuring this out eheh In fact it was because of my job that I ended up getting to learn the HTML code and so on XP
Thank you for writing this post! To tell you the truth, I’ve used up about half of the space in my media library. My blog is 5 years old already, so I guess it makes sense why. I don’t want to pay for more space, so this was helpful! I will remember this. π
To be honest that’s a great space usage if you asked me! I’m not even 1 year in blogging and I already spent almost 50% of my space ahah Happy that I was able to help eheh
Hahaha, wow… dang.
π Now, that is one of the things that I missed when I was on Blogger; it was difficult to use up one’s storage space.
Here on WordPress, I have to use my space wisely.
In the earlier times of WordPress, one could have paid for more storage and they did not have to upgrade to a domain in order to acquire a large storage space (Things have certainly changed)!
How was Blogger for you? I never used it, so let’s say I’m curious about it eheh
I’ve only been blogging for 9 months (+-), so I really can’t relate with that. However, it’s stupid that they ended up with that! It makes sense that you could do that! I mean, upgrading just for the storage space is not really the best way to spend your money…
? Being on Blogger was a wonderful experience.
However, a person on Blogger has to work four times harder in order for them to build a readership.
Do remember, that bloggers on WordPress can find any category of blog that they are looking for via the WordPress.com Reader.
And, on Blogger, you will have to wait almost an eternity before you can see someone’s comment on your blog posts.
Blogging on WordPress is like a paradise in comparison to Blogger.
Seems I’m not missing out then ahah xD
That’s a bummer though π They should look at WordPress and improve their own service
Thank you for the info <3
I nearly used up all my space within 2 months of starting the blog, now I just upload the images to imgur and paste them in, no need to worry about space ever (I assume).
Yeap! That’s completely true eheh I’m also using Imgur now xD
Thanks for this post and accepting my request
No problem! Glad to help eheh
I’ll be posting another one this Wednesday since I found an easier way to do it! π I’ll be tagging you so you don’t miss it eheh