Planning to make your website more interactive? You can simply do that if you embed images in WordPress from versatile sources. You can also skip uploading and directly embed from other platforms easily. If you don’t know how to embed images in WordPress websites, take 3 mins break and start reading this tutorial.
Comparing Importing Images Vs Embedding Images In Websites
Let’s discuss the procedure to embed images in WordPress first. When you embed images in WordPress from other sources, your server will call for a request to the source platform. Then it will be represented on your website. WordPress offers organized and minimalistic ways to upload images for your website.
But uploading images takes a lot of time and space on your server. Heavy images will make your website slow. And slow websites result in a high bounce rate and less engagement. Moreover, uploading images from other sources may claim the source copyright. While you embed images in WordPress, you don’t need to upload them separately and waste memory. Furthermore, while you embed images in WordPress, it’s no violation of rules.
You will be surprised to know that every image online gets indexed in search engines. When there is one image from multiple sources, search engines will rank the new one lower, sometimes plagiarized. Instead of uploading the same image twice, you can embed the image directly from the source and increase site engagement.
How To Embed Images In WordPress?
WordPress is currently the most popular platform for website creation, with 40% of users from all over the world. Whether you are tech-savvy or just a new member of the website creation world, everyone can use WordPress. So do you! Here is mentioning the most popular ways to embed images in WordPress. You can embed some sources totally without coding and some sources with slight HTML tags. Let’s get started.
Go For Embedpress, The Most Popular Embedding Plugin
The most popular and easiest way to embed images in WordPress is using a plugin. While looking for plugins, you can go for EmbedPress, the most powerful plugin with 100+ sources. You can almost embed every source with this stunning plugin. You can feel its popularity with the active user count, 60k+ active users!
Apart from providing you the freedom to embed versatile sources, you will also get the utmost flexibility in customization. With EmbedPress, you can easily adjust embed source height, weight, iFrame, and many more. Also, you can add a watermark on your contents, embed PDF, enable lazy loading, and the list goes on.
Here Is The List Of Popular Image Sources You Can Embed In 1-Click
EmbedPress almost covers all popular image sources for embedding. And you can embed them just in one click! Here is the name of popular sources enlisted in EmbedPress, which you can embed seamlessly in WordPress.
All these are popular image sources. You can easily embed images in WordPress from these sources easily. Another facility of using EmbedPress as your embedding plugin is that you can embed images in almost all page builders and editors. All you have to do is keep EmbedPress activated on your site. Let’s get into the tutorial.
How To Embed Images In Gutenberg?
Gutenberg is now the default WordPress editor, yet the most popular one. If your website is built in Gutenberg editor, then follow this tutorial step by step.
Step 1: Get the URL Of Image Source
The first thing to do is collect the image URL from the source. For the tutorial, we will embed Getty Images In WordPress. Visit the source website from your browser and copy the image URL.
Step 2: Embed Image In WordPress Using EmbedPress
The next step is to embed images in WordPress. Make sure you have installed and activated EmbedPress on your website. Now open a page in Gutenberg where you want to embed the image source. Click on the ‘+’ icon, search for ‘EmbedPress’, and add it to your site. Then paste the image source URL and click on the ‘Embed’ button. The image will be instantly embedded on your website.
Step 3: Publish The Embedded Image In Gutenberg
You can customize the embedded image style, length, with, etc., and add basic Gutenberg advances to the image. After making all the changes, make the website live by clicking the ‘Publish’ button. This is how your embedded image will appear on the website.
How To Embed Images In Elementor?
Using EmbedPress, you can also embed the above-mentioned image sources in Elementor easily. Here is the step-by-step guideline that will help you to embed images in WordPress.
Step 1: Like the Gutenberg tutorial, copy the image source URL from your browser. For this tutorial, we are using the Flickr. Log in to your Flickr account and copy the image URL.
Step 2: Open a page in Elementor. Then search for the ‘EmbedPress’ widget. Drag and drop the widget on your website. You paste the URL and the image will be embedded instantly.
Step 3: From the ‘Style’ tab in Elementor, you can customize the embedded image margin, padding, length, height, and everything. After making all the changes, publish the page. That’s it! This is how easily you can embed images in Elementor easily.
How To Embed Images In Classic Editor, Divi, Beaver Builder & Others?
Are you still using Classic Editor or other popular page builders like Divi, Beaver Builder, etc? Then with the help of EmbedPress, you can embed images in WordPress anywhere and with any page builder. The exclusive feature EmbedPress has is Shortcode. You can embed those shortcodes in any page builder or editor you use efficiently. Here is the guideline for creating a shortcode and embedding images.
You can embed any sources with the help of EmbedPress. For the tutorial, we will create a shortcode for YouTube and embed it on Beaver builder.
Step 1: Copy The Source URL
Go to the source website, for instance, YouTube. Then search for the content you can embed. Copy the URL of the source.
Step 2: Generate The Shortcode In EmbedPress
From your WordPress dashboard, go to EmbedPress. Then navigate to General → Shortcodes. There paste the copied source URL. then click on the ‘Generate’ button. The shortcode will be generated instantly.
Step 3: Embed The Image Shortcode
Time to embed the shortcode in your preferred page builder. Open the page in Beaver Builder. Now paste the EmbedPress shortcode into the builder. The source will be embedded instantly. In this process, you can embed any sources without coding.
Embed Google Drive Images In Website With HTML
Apart from embedding images from multiple popular sources, you can also embed images directly from your Google Drive as well. It is super easy and yes, you don’t need to have coding knowledge. WordPress default editor, Gutenberg offers a built-in ‘Custom HTML’ block. With this block, you can embed almost all embed codes, HTML tags, etc. usually, most of the sources now provide embed code. If not, then follow this tutorial you can easily embed images in WordPress with HTML image tag.
First, upload an image that you want to embed in Google Drive. Then Preview the image. In the URL of the image, you will get the image ID. Basically, the text in between the ‘d/’ & ‘/view/’ is your image idea. Now that from your browser.
Second, open a page in Gutenberg. Then add the ‘Custom HTML’ block on the page. Now paste the new tag there. Replace view&id value with your own image ID value. That’s it. The image will be embedded instantly.
<img src="https://drive.google.com/uc?export=view&id=1aTCY4kd2TKcMdM5iMbEZUO9H5KZB53T8">
Gutenberg has made embedding in WordPress fun. You can almost embed any images you want from your own Google Cloud. This is how the embedded image will appear on your website.
Embed 360 Photos In WordPress
360 photos increase your website interaction and increase engagement. How could anyone skip a 360 photo without exploring it? You can also run great marketing campaigns, preview products, client works, etc. using 360 photos. EmbedPress also helps you to embed 360 photos directly to your website without any alteration. Follow this detailed tutorial to embed 360 photos on your website easily.
Enhance Your Website With Embed Images
With the right plugin, embedding images in WordPress is fun. You can easily decorate your website with multiple images from various sources. While you embed images in WordPress from other sources, it also helps you get more organic reach on those platforms.
Hopefully, you have learned everything to embed images in WordPress. If you find this tutorial helpful, then share it with others. Also, subscribe to our blog to get these kinds of tutorials, insights, tips, and tricks.
