• X

    How to Redirect WordPress Images to Sub-Domain for Faster Loading

    By in WordPress

    Bluehost hosting

    We all know, loading of a website matters a lot for great user-experience, and for search engine ranking. There are many CDN network (MAXCDN, Cloudflare), which will let you setup content delivery network, and speed up loading time of your website. Though, we can’t achieve CDN like feature, with our own hosting, but we can speed up our blog by loading images from sub-domain. You can also use sub-domain to server static files (CSS, JS) and other files.

    By using your sub-domain for serving images, you are enabling parallel download. This will help in improving page performance, and loading time. Many high traffic websites are using CDN or sub-domain to divide the load from main domain. For other tips to improve page performance, you can read this handy guide from Sixrevisions.

    In self hosted WordPress websites, the uploaded images and media files are stored to the /wp-content/uploads folder location. Anyone, can add a sub-domain like img.yoursite.com (specified for image uploading here), and points it to the /wp-content/uploads folder of www.yoursite.com. Thus the new image url would be changed from http://www.yoursite.com/wp-content/uploads/imagename.jpg to http://img.yoursite.com/imagename.jpg.

    If you add this sub-domain immediately after installing your website then this is very good. But 99.99% bloggers hardly have a knowledge of this kind of web-development at the initial days of blogging. So if you have already created a number of posts with images, and came to know about serving images from a sub-domain, you have to redirect the previous URL’s (i.e. http://www.yoursite.com/wp-content/uploads/imagename.jpg) to the new sub-domain URL’s. Otherwise search engine treats your image url as a duplicate one. So you need to modify .htaccess file by adding a simple 301 redirect code.

    Generally adding the following code to .htaccess file can redirect the blog’s url to the new sub-domain.

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

    But when ^/wp-content/uploads/ is used for 301 redirection then it redirects all the /wp-content/uploads/ folders to http://img.yoursite.com. As the main .htaccess i.e. under public_html directory controls all the redirection of a main root directory . So it also redirect’s the image url’s of add-on domain based websites because there are also /wp-content/uploads/ folder available for www.addondomain.com. Thus images will not be displayed for the add-on domain websites. So you can’t use the above mentioned 301 redirection for you main domain as it affects the add-on domains. You shoud edit .htaccess file in such a way for 301 redirection so that it only redirects /wp-content/uploads/ folders of a specific domain only bypassing the other sub-domains or add-on domains.

    This types of redirect is called wild-card redirect. Their are two methods are available for making such wild-card 301 permanent redirect.

    • Using Redirect Option From your host Control-panel   or
    • Edit .htaccess file manually

    Use Redirect Option Of Your Website’s Control Panel

    Some popular hosting companies (Hostgator, Bluehost) offers redirect option under cPanel, so that one can easily redirect any link without having a minimum knowledge of coding.

    Just navigate to “Domains” section of your web-hosting control panel and open ‘Redirects’ option.

    redirect option How to Redirect WordPress Images to Sub Domain for Faster Loading

    Now under “Add Redirect” section fill the form as seen in the below figure:

    301 redirect How to Redirect WordPress Images to Sub Domain for Faster Loading

    Don’t forget to tick the Wild Card Redirect Option. Otherwise all the /wp-content/uploads/ folder under the main directory will be redirect to img.example.com and thus it will show broken images. However ‘Redirect’ option is not always available for every web-hosting. In order to manual wild card 301 redirect you should add some code to the .htaccess file of the website’s root directory.

    Serving images from Sub-domain using .htaccess :

    Of all the method, I prefer using .htaccess for redirection. If you are new to .htaccess file, here are two resources to help you out:

    Open the file manager from your control panel and navigate to /public_html/.htaccess folder.

    Right click it and press ‘Edit’ option.

    htaccess file edit How to Redirect WordPress Images to Sub Domain for Faster Loading

    Paste the following code to the .htaccess and save it:

    RewriteCond %{HTTP_HOST} ^yoursite\.com$ [OR]
    RewriteCond %{HTTP_HOST} ^www\.yoursite\.com$
    RewriteRule ^wp\-content\/uploads\/?(.*)$ "http\:\/\/img\.yoursite\.com\/$1" [R=301,L]

    Note: replace all “yoursite” word with your own domain name where you have to apply the code.

    I hope this tutorial will help you to understand, how to serve image form WordPress sub-domain, and before you making this changes on your main site, I would recommend you to try it on test site. If you are stuck in between or have any query, feel free to ask my via comments.

    This is a guest post by Jit from TechnTrix. If you would like to write for ShoutMeLoud, check our guest posting guidelines.

    Get Free Blogging updates in your Email

    Article by

    JIT has written 1 articles.

    If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

    { 7 comments… read them below or add one }

    Mahesh

    I wasn’t aware of the fact that subdomains can help in increasing page load time. Thanks for your detailed and elaborate post which makes it easier even for novice user. How much can does it speed up? How much does it help in a page full of images ?

    Reply

    Ritish Verma

    I think this is the best way to speed up the loading time of your site if you can’t afford those expensive cdn services.

    Reply

    chaitanya

    Nice one but if move images to some other hosting this will be create problem

    harsh i have one dobt Thesis 2.0 is not working now

    do u have any idea

    Reply

    Harsh Agrawal
    rakesh kumar

    This method will increase the page loading of our website. But little bit confused whether we have to follow both method or single one? and if one of them what is the advantage of .htaccess method over cpanel based redirection method?
    My third question here is it will not eliminate the problem of unnecessary cookies set by these images thus increase the page load time. Do we have any method to remove or reduce these cookies.

    Thanks for this wonderful guide and waiting for your response.

    Reply

    Jit Dutta

    If you have a domain and multiple sub-domain then you have to use second .htaccess method. First method does not provide any kind of wild redirection. So second one is much accurate for single domain based web site or multiple sub-domains with a main domain based web sites.
    Thanking you.

    Reply

    Gaurav

    Sir, Here is an error , I am using Wordpress 3.5 and there is no option for change my Image URL , So pleas please please help me sir :)

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `