Host Images outside Server, Save valuable disc space
If you’re creative and promising blogger, WordPress users, Site owner or any webmaster you must be using image, in your site. Image is a visual story which is naturally appealing and says much more than Text/Words can.
But using too many images has some drawbacks. Many images in a single page lowers loading time which results in negative effect in SEO. Lengthy page loading is also tiring that causes bad user experience. Image file-size is a matter of great headache. Image file weighs more and occupies several times more space than text file. So, many images are likely to ‘eat up’ most of purchased limited Disc Space of your Hosting Server.
This is the reason why many a webmaster uses image optimization strategy e.g. use image reducing tool to minimize file size and so on. Image file reduction improves loading time to a small extend but it cannot save disc space of any amount.
But don’t lose heart-
Free Image Hosting providers are at your side
However, this image problem can dramatically be solved by changing your attitude; nothing more. What I want to surprise you with: You needn’t store your image in Hosting Server at all. Rather, store them outside your purchased Server space. There are a number of free Image Hosting Servers where you can upload and store and use from them as many image as you wish and whenever you like. All are free. Also there are such paid Services like Photobucket. You can take them up if you need advanced features and functionality.
Today we’re going to represent two such Image Hosting providers which are top-ranked globally renowned Photo sharing sites and of course, are completely free. They are-
- Google Photos by GOOGLE
- Flickr by YAHOO
We’re going to practical process of image embedding through Google Photos and Flickr in next step.
First, let’s see at a glance the advantages of Image Host that can, I’m sure, make you a fan of it-
- Image hosts are more reliable, longer-lasting and secure than Web Server
- This is a lifelong Backup of your valuable images
- You can share image in Social media, with friends and any people from here
- In website, you can create Direct Download link of any image
- You can embed any image to display directly in any website
- Display multiple image as Slideshow
- Display a full Album in any webpage
- Scope to use Unlimited free space
Sorry, these two simple terms may also confuse the beginners and obstruct them go onward. So, clarification needed.
If I create a link for an image in my website with a clickable text (Anchor text), when anybody clicks that link, he/she will reach the destination image. This is simply Linking. In this linking, image won’t show or be displayed in webpage.
But in case of Embedded link, image will show or be displayed in webpage. If clicked, it will open in a new window.
Use Google Photos to host your website images
Google Photos is the most trustworthy free Image Sharing site. Not only website-related image, you can also upload any kind of images- personal, familial, commercial etc in Google Photos. You can store them as Backup or Archive, create Album, Collage, Movie, Slideshow etc. When needed, you can share images in Social media or via email, download them any time and ,above all, use in your Website.
All know, only one Google Account is needed to access all Google products. Hence you need a Google account to enter Google Photos. There is no separate disc space allotted for this Google Photos. Google allots 15 GB free space to each user to use collectively in all Google products. If you need more than 15 GB, you have to purchase space from Google. Alternatively, you can use multiple Google accounts. You can check out your used and available space by entering Google Drive.
However our goal is to represent the process how you can embed any image in your website from Google Photos. Let’s proceed-
First Log-in to Google Photos by the credentials of your Google Account. If you’re already logged-in, hit Google app button and then click Google Photos icon.
From Home page of Google Photos, click Upload button on top-right to upload your desired photo that you want to embed in webpage. If your image was stored previously, move on to next step-
Now it is time to find image link URL. For this-
- Click Photos from left Menu (by default it remains selected).
- Find your desired image
- Click the image. You’ll get to a new screen.
- There are a number of option on top-right. Click the Share icon
- A new window appears. Now click on Get link button
- From next window, click Create Link.
- Your link will be created highlighted.
- Copy it.
The link will look like-
https://photos.app.goo.gl/RsevqY6Y2jC9eg2C9
This is actually a Sharable link not Embed link. You can use this link to create a Direct Text Link that will send a clicker to destination image. Noted, we discussed about this link earlier.
Now what to do to make it an Embed Link. Google doesn’t provide such Embed Link. For this, we have to take the help of a third-party app. Here are two Embed Link creation online tools. You can use either-
Now open any of these apps. Insert the URL (collected from Google Photos) in definite field and click Generate (first app) or CREATE EMBED CODE (second app). Your Embed Link for desired image will be generated. You might go through reCAPTCHA to complete the process.
The Embed Code will look like-
<a href="https://lh3.googleusercontent.com/itfhi6J29ntNWzql6XwLHiec0BLZT9H8BBUrLJ3wh6Yi4yLoXeso-LfuxompVT8Xts3q5nTpLXeR3i0oUJzb9xVUU20D5mO9nuISXZjul578MtzJ87IEkML6ftOSCTlNjETAMydHjg=w2400?source=screenshot.guru"> <img src="https://lh3.googleusercontent.com/itfhi6J29ntNWzql6XwLHiec0BLZT9H8BBUrLs3wh6Yi4yLoXeso-LfuxompVT8Xts3q5nTpLXeR3i0oUJzb9xVUU20D5mO9nuISXZjul578MtzJ87IEkML6ftOSCTlNjETAMydHjg=w600-h315-p-k" /> </a>
This is a complete Embed Link. You needn’t use any extra tag or do anything. Just copy the code and insert it in any html field of your site. In WordPress, open the Post where you want to embed the image. Just add a Custom HTML Block with Post Editor. Paste the code. You’re done.
Now open the linked post of your site in Preview Mode. You’ll see your image embedded like you inserted it from your web server.
Total process is the same. From Google Photos, You just need to collect the Album Link URL instead of single image URL. Do the following-
- Enter Google Photos. From the Left Menu, click Album.
- Find the Album you want to embed. If didn’t create any Album, click Create Album from top-right menu of this page. In next window, give a Album name in name field, select multiple images for Album and complete the Album creation process.
- Now click your desired Album Thumbnail.
- From next window, click Share icon, then Copy link.
- After copying, repeat the next part of the process that we discussed earlier. Thus complete Embedding Album in your site.
Now open the post with embedded Album in Preview mode. You can browse each image of the Album by clicking Right and Left arrow on image.
Embed image in your site from YAHOO’s Flickr
Flickr is one of the best online photo management and sharing applications with advanced and powerful features. Flickr started its journey in 2002 and came out in those years as one of the most influential Image Hosting providers. Flickr is not only place to store, manage, share and embed your own photos, you can also use other people’s photos from Flickr on commercial basis which are marked under Creative Common License.
However, it is not the right place to pose a review on Flickr. Here we’re going to show the process of embedding image from Flickr on any website or blog. Let’s go on-
Flickr is a Yahoo product. Earlier users logged in to Flickr using Yahoo log-in credentials. But since 2018, separate log-in system was introduced for Flickr. So you need a separate account to enter Flickr.
For image embedding from Flickr, do the following-
- Log in to Flickr.
- From Flickr Homepage, Click You button from topmost menu.
- Your Photostream page appears where your photos are displayed roughly.
- Find which photo you want to embed.
- Click the photo
- Selected photo will be displayed in separate screen.
- From this screen, click Share icon (arrow-like) on bottom-right. You see the following pop-up screen
- From this screen, define image size from below if you wish. As you’re going to Embed, keep Embed option selected from top menu.
- Now highlight the generated link and copy it.
- This is all your doings in Flickr.
This is a complete code. You needn’t use any third-party app as we did in Google Photos.
Now, open Post Editor of your website. Paste the code direct within html body or In WordPress, take a Custom HTML block and paste it. You’re done.
Now open the post in Preview mode. Your image must be embedded. If size doesn’t fit, go back to Flickr, refix the size, copy the code again and repeat the next steps.
There might arise another problem. Your image is placed left side. But you want to move it on center. Our following tutorial must give you a complete solution-
Hope you got the glaring guideline to embed any image on your Website or Blogsite from outside your own Web Server.
If you tried the processes by following the examples, please let me know in comment. You can also write on any problem, hassle or question arisen in course of implementing the guide. All are welcomed!
