ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

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

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

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

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

301 redirect

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

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.

  • Author Bio

  • Latest Post

Article by JIT DUTTA

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… add one }

    Leave a Comment