Blogging WordPress

[WordPress] How to Serve Images from Subdomain

How to Serve Images from Subdomain

Hey there fellow bloggers! If you are serious about speeding up your blog, then you must have used tools like Pingdom and GTmetrix to test its speed. These tests usually show recommendations like serve images from subdomain, serve static content from a subdomain or from a cookieless domain or parallelize downloads across hostnames etc.

If you want to get rid of these flags in speed tests and want to speed up your blog, you should consider serving images from a subdomain. This is the easiest and completely free approach which helps in improving site load times.

In this article, I want to show you how to serve images from subdomain and improve page load time of your blog by reducing http requests from a single domain.


But, Why Serve Images From Subdomain?

Good question. In simple words, the number of connection a web-browser can make to a single domain is limited. Most modern browsers can make up to 6 connections per hostname at the same time.

Besides images, there are many things that loads from your domain. This includes scripts, CSS, JS, HTML, simple text files etc. A browser can’t load rest of the files from the same hostname until other files are loaded first. You can think of this as a queue.

This is why, you often read recommendations to use CDN services and other ways of improving site speed. Of course CDN services aren’t free. In such case, serving images from a subdomain is an effortless way of improving speed of your blog by some extent. This method can also be referred to as sharding.


Does Serving Images From A Subdomain Really Help?

Yes, it does. Images are one of the heaviest parts of any site. But they’re also one of the most crucial ones. For better SEO and to provide better understanding of your content, images are must-have.

A subdomain is considered as a separate website. By serving images from subdomain, it will take less time for a browser to load content from your server because the browser can simultaneously load content from different domains.

This significantly reduces the time a browser has to wait before it can serve all the content from your domain, dramatically improving load time of your blog.

I’m also serving images from a subdomain and you can checkout my blog’s speed ranking on Pingdom or GTmetrix before you continue.

If you are ready to learn how to serve images from subdomain, then keep reading.

Requirements

  • Some knowledge of cPanel and phpMyAdmin.
  • Patience, a lot of patience.
  • Ability to keep calm if things don’t go out as intended.

Services Demonstrated in This Article

Note: Replace http:// with https:// everywhere in this guide if your blog has https certificate (like mine).

Blogging Tip: Struggling with a slow blog? Switch to Dreamhost - a powerful and affordable web host. Plans start at just $2.59/month.

How to Serve Images from Subdomain?

Step 1: Creating A New Subdomain

To begin with, we will need a subdomain. To create a subdomain, log in to your cPanel and find Subdomains option. Click it to enter.

Creating Subdomain on SiteGround

Under Create a Subdomain, enter the name of your subdomain. You can choose any name that makes sense. For example, you can use img, images, media or anything of your choice. I’m choosing media.

Choose your domain from the drop-down list (of you have more than one) on which you need to create this subdomain. I will choose techstuffer.com.

Change the Document Root to your WP Content folder. By default, it’s public_html/wp-content/uploads if you never changed it.

Creating Subdomain in cPanel

Attention: If you changed the upload path in past for any reason, enter that path here. For example, you could have changed the wp-content/uploads folder to content/files. In this case, enter public_html/content/files under Document Root.

If you’re unsure whether you changed this path or kept default, then open an image from your blog and see the path. If it looks like yourblog.com/wp-content/uploads/image.jpg, then you have the default path.

Now click Create and a subdomain will be created.

You now have a working subdomain. Great! So lets move ahead and tell WordPress to upload new images in the new location. Keep cPanel open. We will be coming back here.

Step 2: Changing Media Upload Path in WordPress

Log in to your WordPress dashboard and go to Settings > Media.

Under Full URL path to files, enter your complete subdomain including http://. I will enter https://media.techstuffer.com. Remember NOT to add any trailing slash (/) here.

Change Media Upload Path in WordPress

Save the settings.

If you can’t find the Full URL path to files option under Media settings, you can do this by entering a hidden WordPress options area. Enter your blog’s address in the following manner to access the options panel: http://yourblog.com/wp-admin/options.php.

Once the options area is open, search for upload_url_path. Enter the subdomain here including http:// and without a slash at the end. I can enter https://media.techstuffer.com here.

Change Media Upload Path in WordPress

Scroll down and save these changes.

Okay, so from now on, any new image uploaded to your blog will carry the new URL. If you upload image2.jpg, it will be available at http://subdomain.yourblog.com/image2.jpg.

You’ve told WordPress about the new media upload path. Very well done. Now the next step is to change URLs of images in old blog posts to new ones. Keep reading on next page.

About the author

Parvez Shaikh

A blogger by profession, Parvez is passionate about new technology and gadgets. He's pro-encryption and enjoys his privacy. When not blogging, he enjoys reading books and other blogs or planning a never ending vacation.

Leave a Reply

20 Comments

  • Thank you for a great tutorial. I have do it and worked perfectly but not completely I still get the Parallelize downloads across hostnames Warning
    This I know is due to a directory of thumbnails for my Online Arcade Games Site that are not inside the uploads folder.
    How would I include these
    http://www.3aliens.org/wp-content/thumbs/fog/A/asteroid-mining-empire.jpg
    http://www.3aliens.org/wp-content/thumbs/mochi/A/abe-clone-wars_img1.jpg
    there’s a lot more of them

    • Hi Mitch. I’m glad to know this tutorial worked for you.
      About the ‘thumbs’. How exactly these thumbs are generated? By the theme you use? Or by a plugin?

      • Generated by a plugin but these are from an old setup the current thumbs are put into the uploads directory.
        I have found a solution to move them into the uploads directory and change the posts image urls a lot of work so I will leave that for when I have free time.
        thanks for getting back to me.

  • For this, and my mistake if I missed it in the tutorial itself, but would the existing uploads directory have to be moved into the new sub domain so that past images work normally? Thanks.

    • I’m sorry for replying late and I hope you’ve found your answer already.
      You are not actually creating a new directory. You are keeping images in the same directory (wp-content/uploads) and just changing the domain to a sub-domain. So you will not need to move images anywhere.
      Just follow Step 3 and 4 so images are served from new location.

  • Hi Parvey,

    Thanks for the instructions and useful tips. I am trying to do the trick now but obviously on the latest WP version 4.9.8. I also use Siteground. I have created the subdomain without issues and changed the url upload path but I get a syntax error message when I try to run the SQL query, probably due to the newer version of SQL that i have.

    Also I realised then that some images are now randomly showing broken links. I reverted to the classic media path to fix this, but still keen to get this going. Could you assist please?

    Thanks
    Thomas

    • Hi Thomas.

      My blog used to run on SiteGround and now I’m using DreamHost. I am using the same setup as descibed in this post to serve images from a subdomain.

      I’m not sure if the newer version of SQL is causing the error because I recently ran the query without problem.

      I suggest you to take a look at the query for any breaks while copy/pasting.

  • Hello! I have two questions:

    1. Is this tutorial still up to date?
    2. Can I completely remove /uploads folder after completing this tutorial?

    Best regards,
    Kacper

    • Hi Kacper.
      Yes, the tutorial is up to date and working.
      You don’t actually remove /uploads directory. Your files are still uploaded to wp-content/uploads. What changes is the URL your files are served from.

  • Thank you!
    I already moved my images to subdomain, but I can’t replace old images. When I typed query in Phpmyadmin, this error showed up.: #1064 – You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near ‘://mysite.com/wp-content/uploads/’,’http://subdomain.mysite.coml/media/’)’ at line 1
    Do you have any idea what I should do?
    Thanks,
    Kacper

  • Make sure you are entering the path correctly. Look for possible spaces or typos.
    Also, why does your URL look like subdomain.mysite.com/media/. It should be simply subdomain.mysite.com/

  • Sir it shows me error in Step 3: Update Image Paths In Old Blog Posts:
    #1064 – You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near ‘://kashpick.com/wp-content/uploads/’,’http://media.kashpick.com/’)’ at line 1

  • Hi, I could not open your site to check it. It looks like it”s under development or a new webiste. If it’s a new website, you don’t need to follow step 3 as you won’t have any images on the old path.

    Make sure there are no unneccessary spaces in the query or try to type it manually. Also, I am not sure how this works with MariaDB.

  • I’ve followed this tutorial and changed everything. The URL is pointing to my img.subdomain.com but I’m still getting 500 error and no files are displayed in WordPress too. The URLs are changed in the DB and redirect is done I see that the URL is pointing to the right subdomain. Can you please let me know what am I doing wrong?

    • Do you receive error 500 on your main domain or only on subdomain while trying to access files from the new path?
      Your new path should look like subdomain.domain.com/wp-content/uploads/file.jpg and the change has to be made in WordPress options area for the images to be displayed.