Sep 152011
 

If you owned a WordPress blog, you must be concerned about the page loading speed because most of the readers don’t like to visit slow loading websites and Google-bot may hesitate to crawl your site due to the slow site response. Normally, if your posts contain lots of images, the WordPress web page will load slower because too many concurrent requests are queuing at the apache webserver for the same domain.

Therefore, the best way to increase page loading speed is to host all WordPress images in a subdomain (self host images) so the web browser can download the images in parallel with other resources from your primary domain. For your info, WordPress does not allow you to host images in different domain except subdomain.

We will try to guide you step by step process on how to host images in your subdomain, migrate old images from default folder (wp-content/uploads) to a subdomain and extra tips that you must know if you are using CloudFlare service for your WordPress sites.

Reminder: Please backup all your WordPress database for easy restoration if anything goes wrong.

Create a Subdomain

First you need to login to hosting panel (cPanel or DirectAdmin) to create a new subdomain.

cpanel domains

Click on Subdomains and create your desired subdomain such as image.yourdomain.com or media.yourdomain.com. For me, I choose media01 as my new subdomain. Once done choosing the subdomain name, click create button to create subdomain.

create a subdomain

Reminder: If you are facing problem in creating new subdomain, kindly contact your hosting provider.

Update Default Image Uploads Folder in WordPress

Login to your WordPress dashboard and navigate to Settings > Media

Look for Uploading Files and fill up the blank fields:

Store uploads in this folder:

Full URL path to files: http://media01.money4invest.com

Click on Save Changes to apply the new settings and all your future upload images will be stored in the new created subdomain.

media settings

Reminder: If you have created a folder for example: “images” in your subdomain, then put the folder name “images” at Store uploads in this folder field and all the upload images will be stored in this folder.

Until here, you have successfully created a new subdomain and changed upload path to host for new uploaded wordpress images. However, if you want to change all the old post images to the new subdomain address as well; keep on reading!

Advance Level: Update Old Images Location

Warning: The steps below will involve running some SQL queries using phpMyAdmin to update MySQL database. Never try to do it if you are not familiar with it as you may crush the whole site if you did any mistake, make sure you have the latest database backup before continuing the below process.

As we know, all the previous WordPress post images are still stored in the default upload directory under /wp-content/uploads/ in the server and we need to change and update these images location to the new subdomain path. Therefore, download all the folders that contain images using Free FTP client such as FileZilla. Normally, the location of these images is under /public_html/wp-content/uploads/.

images uploads folder

Then, upload all these images folders via FileZilla to your created subdomain location. In my case, I should upload them to my subdomain at public_html/media01/.

Now, we will run a few lines of SQL script to replace the old image location in the post content to newly created subdomain directory. You can use phpMyAdmin in hosting panel to execute the SQL query on your database.

phpmyadmin

Click phpMyAdmin > select WordPress Database > Click SQL tab > put the below SQL query in the box. This query tells WordPress to replace all image location path at ‘http://www.money4invest.com/wp-content/uploads/’ with ‘http://media01.money4invest.com/

UPDATE wp_posts SET post_content =

REPLACE(post_content,'http://www.money4invest.com/wp-content/uploads/',

'http://media01.money4invest.com/')

Reminder: Replace money4invest.com to your own domain name and if you are using other subdomain name, change media01 to your created subdomain name.

phpmyadmin sql query

Then run the following SQL query to update the images link in the media library.

UPDATE wp_posts SET guid = 

REPLACE(guid,'http://www.money4invest.com/wp-content/uploads/',

'http://media01.money4invest.com/')

Reminder: Don’t forget to replace the domain & subdomain name in the query before running it.

Update Search Engines with New Image Urls

By now, you almost completed the whole task except redirect old images link to new subdomain location. You need to let Google know that you have moved the images with the new address to avoid duplicate links and good for SEO purpose. Therefore, we need to add the following redirection rewrite code in .htaccess file which can be found in the WordPress root directory. Just add the code before the # BEGIN WordPress line.

RewriteEngine On

RewriteBase /

RedirectMatch 301 ^/wp-content/uploads/(.*)$ 

Reminder: Again, replace the above urls with your own domain url. If you can’t found the .htaccess file, you can create it using notepad and save as .htaccess file and upload to WordPress root directory.

Problem with hosting multiple addon domains in same CPanel Account

If you hosted a few other domains under the same CPanel account, please be aware that the above images RedirectMatch 301 rules might cause all your other addon domain’s images to be redirected into new subdomain also. Let me describe the real scenario here:

Let’s say money4invest.com is my primary domain account in Cpanel (/public_html/) and I have other addon domains for example: mydomain.com (/public_html/mydomain) and both domains are WordPress blogs which have default images uploads location (/wp-content/uploads). When you put the above .htaccess file at the root of WordPress (/public_html/), the rules will apply to all addon domains. Therefore, I have tried to modify the redirection rules to suit the situation. It will only apply to the specific domain instead of all other add-on domains.

RewriteEngine On

RewriteBase /

RedirectMatch 301 ^/http://www.money4invest.com/wp-content/uploads/(.*)$ 

Reminder: Remember to replace the above domain url names before using it. Kindly consult with your hosting provider if you do not know how to configure .htaccess file.

Tips for CloudFlare users:

Some WordPress owners used CloudFlare free or paid service to get faster site performance and better security protection. Therefore, kindly take note the below steps if you want to use CloudFlare service to support your subdomain as well.

Firstly, let me assume that you had already configured the primary domain (for example: money4invest.com) to use CloudFlare and now you need to add the subdomain (for example: media01.money4invest.com) into CloudFlare settings. Without adding the subdomain that is hosting your images now into CloudFlare will prevent the images to show up on your WordPress site because of different DNS settings between main domain and subdomain.

Follow the below steps to add the subdomain in CloudFlare:

1)      Login to Cloud Flare.

2)      My Websites > DNS Settings

cloudflare dns

3)      Scroll down to the very bottom of page and choose “CNAME (alias)” from drop down box.

4)      Fill up your created subdomain name (for example: media01) and domain name (for example: domain.com) just as shown in the below screen.

add subdomain in cloudflare

5)      Leave the TTL as automatic. Click I’m done entering my DNS records button and let CloudFlare do the rest configuration. Within 30 minutes or less, your subdomain will be supported by CloudFlare as well.

Conclusion:

By now, I believe you have successfully created a new subdomain to host your WordPress images and the web browser will download images parallel from your web server and thus making your WordPress blog loading faster.

Does this method work for you? Or do you have better idea to host your WordPress images? Love to hear your thoughts.

  7 Responses to “How to Host WordPress Images in Subdomain Tutorial”

  1. I think this a nice idea. I like to have that one. The tutorial is very helpful to me. I learn more about that. Thank you.

  2. I have a website that is hosted on a VPS and is mirrored with Cloudflare, but I really have no Idea how to set up this tutorial with Cloudflare.

    I’ve made the CNAME/Subdomain which is cdn.domainx.net
    Whenever I upload new pictures, they appear as broken images. I really have no idea how to set it up and how to “create” new folders for this subdomain that is created through Cloudflare. I did add the url in the Media settings page as you’ve mentioned.

    Do you have any advice?

    • @Renkozu: I’m not familiar with VPS as my site is hosted on share hosting. From your comment, your primary domain is domainx.net and subdomain is cdn.domainx.net. Right? That means the CNAME should be cdn. For your info, this tutorial can only work for primary domain and its subdomain.

  3. Well, let´s ignore the fact that my website is hosted on a VPS.

    I´ve made a CNAME on cloudflare. That CNAME is CDN, which means the subdomain is cdn.domainx.net.

    I’ve set up cloudflare just like how you’ve explained in your tutorial. The only thing I do not know, is how to assign this “Images” folder to this CNAME/Subdomain.

    What confuses me, is that you assign a root folder in step 1 to the SubDomain. In Cloudflare, I do not see the option to do this.

    • @Renkozu: When I created my subdomain (media01), the document root will automatically appeared as (public_html/media01)as what you seen in step 1. In Cloudflare, I manually added the CNAME as you can seen in the last screenshot. The CNAME does not automatically appear in CloudFlare but need to add in manually.

  4. I’ve just managed to move all my post images in a “cookieless subdomain” and serve them in this format (path) when a user accesses the post: img.domain.com/year/month/file.jpg (1)

    Now all my old images have this format but everytime I create a new post and upload an image, the image path shown is this: domain.com/img/year/month/file.jpg (2)

    So what I’m trying to do is to force the site/server to use (1) instead of (2).

    I’ve already tried everything in Media Settings tab, the only thing working is to write in the “Store uploads in this folder” and “Full path to files” fields the subdomain name (“img” that is).

    The images in this article are the best example.

    Any suggestions?

    I’m thinking is a Cpanel setting I’m doing wrong.

    Many thanks!

  5. @stow: Hi, you mentioned about:

    “I’ve already tried everything in Media Settings tab, the only thing working is to write in the “Store uploads in this folder” and “Full path to files” fields the subdomain name (“img” that is).”

    So, it’s working after you put img (subdomain name), right?

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close