Serve Images from Subdomain to increase website speed [WordPress] [Step by Step guide]

In this post, im going to explain how to serve images from a sub-domain to main domain. If you have checked your website speed using GTmetrix or Pingdom, you would get a recommendation to use cookie-free domain to improve your website performance.

So, instead of buying a separate domain or CDN to setup cookie-free domain, you can create a sub-domain on your existing domain and serve the static content like images from that and get good speed score. Remember that Google considers speed as one of the important factors in ranking the websites.

Benefits of serving images from Sub-domain

1. It increases the speed of your website

Steps to Create a Sub-domain [wordpress]

1. Goto your web-host’s cPanel
2. Under Domains -> Click on Subdomains. It opens a page to create a sub-domain. It also displays your existing sub-domains (if any).
3. Name your subdomain Ex: img. So, your sub-domain will be img.yourMainDomain.com
4. Give the path of your sub-domain folder. You can create a folder at your main domain’s root and give that folder path here (Example shown in below pic).In below example, i have created a folder named ‘img’ at my main domain’s root.This will be your sub-domain’s root folder.

Sub-Domain setup in WordPress

You have created sub-domain using above steps. Now, you have to setup the sub-domain to

1. Change Images upload path to sub-domain
2. Change images URL path to Sub-domain
3. Replace the existing image URLs on your main domain with sub-domain’s URL Ex: from example.com/example.png to img.example.com/example.png

Note: It is recommended to take full backup of your website before doing below steps. We have to execute a SQL query that modifies the database.  

Change Images upload path and images URL path to sub-domain

1. Goto Webhost’s cPanel
2. Scroll down to DataBases section -> Click on phpMyAdmin.  It opens phpMyAdmin page which display all your databases
3. Select the database of your main domain, expand it by clicking on ‘+’ symbol.
4. Click on xxxxx_options table (highlighted in yellow color in below pic)
5. On right side, select rows as 500 and ENTER ‘path’ in filter rows (see below pic) . It will display two options upload_path and upload_url_path
6. Enter img/ as option_value for upload_path option. If you want to set the upload path to some other sub-folder, create the sub-folder inside img folder and set the upload_path to img/subfolder/.  Note that add ‘/’ only at the end, not at the beginning. Click ENTER after entering the value.
7. Enter your sub-domain URL to upload_url_path option and click ENTER. It should start with http or https (if you have encryption) and don’t use ‘/’ at the end. ex: https://img.gethowstuff.com

Good. You have changed the images upload path and URLs from main domain to sub-domain.

Read Also:  How to enable hotlink protection using htaccess file

Steps to replace the existing image URLs on your main domain

You have completed the setup for sub-domain, but all your post image URLs are still pointing to main domain. So, follow below steps to replace the image URLs on your posts to sub-domain.

1. Copy uploaded images from example.com/wp-content/uploads folder to example.com/img/ folder (root folder for your sub-domain). Note that, don’t delete any images on your main domain’s wp-content/uploads folder. You might have shared the images on social networking sites like Facebook, twitter etc. If you delete them, those images will be shown as broken on those websites. So, copy those images to sub-domain, don’t move.
2. On phpMyAdmin, Click on database
3. On right-side, click on SQL tab and enter below query and click on Go button. Don’t forget to replace example.com (http or https)  with your domian URL

   UPDATE wp_posts SET post_content = REPLACE(post_content,'https://www.example.com/wp-content/uploads/','https://img.example.com/');

Excellent. You have replaced all the image URLs on your website with those on your sub-domain.

Now, the last step is to redirect the old image URLs to new ones. Your images are indexed on Google and other search engines. So, we have to tell the search engines that you moved those images to a new address to avoid 404 errors or duplicate content issues.

Steps to redirect the old images to new

1. Access your .htaccess file through FTP
2. Add below line at the end and save the file.

   RedirectMatch 301 ^/wp-content/uploads/(.*)$ http://img.example.com/$1

    

Conclusion:

Your sub-domain to serve the images or static content to your main domain is ready. Clear the cache on your website and recheck your site speed using pingdom or GtMetrix.

Also, to increase the speed of your website, reduce bounce rate and to increase visitor experience

you need to select best web hosting service like Siteground.

Siteground has 98% customer satisfaction rate and it is recommended by wordpress.org.

WordPress.org mentioned that siteground is meeting their wordpress minimum requirements.

Also, Siteground uses latest speed technologies to make wordpress load faster.

Appendix: Link URLs used in this post

1. https://gtmetrix.com/
2. https://www.pingdom.com/
3. https://wordpress.org/hosting/

Also read:How to Replace http links with https | WordPress plugin to update URLs