Images of blog consume a significant portion of the bandwidth. Many shared hosting providers impose bandwidth and CPU usage limits, which may be reached quite easily if your site has significant amount of images in it. Some providers also kill the processes if they are CPU intensive causing your blog to throw errors.
I heard about using Dropbox’s† “Public” folder to host static content of websites. I have searched on the net and found that there is a WordPress plugin to host theme images. Also, there is a plugin to sync the images of WordPress and load them from Dropbox, though it is not working with the latest version and throwing up lot of errors. I searched the WordPress plugin repository to see if I can achieve the same with any other plugin.
I came up with the following idea, implemented on few blogs of my clients, and now the image bandwidth usage is down to only “few MBs.” Also, the blogs are loading faster.
First, create a free account on Dropbox. It gives you 2 GB free storage.
Install the “Real-Time Find and Replace” plugin from dashboard. It will replaces the code and text from themes and other plugins with your chosen text dynamically.
Offloading WordPress theme files to Dropbox
In Dropbox’s “Public” folder, upload your theme folder retaining the directory structure. Upload only CSS and images. Look at the screenshot. I uploaded the “Pilcrow” theme.
Obtain the public link of CSS file by right clicking on the file and selecting “Copy Public Link.” It will look like this: http://dl.dropbox.com/u/1234567/pilcrow/style.css. From this URL, we can understand that, our theme folder on Dropbox is “http://dl.dropbox.com/u/1234567/pilcrow”
Now, the real magic happens. Go to the Tools>Real-Time Search and Replace. Click the Add button and you will see two boxes, Find and Replace.
Now, browse your blog and see the source of webpage (Ctrl+U in Firefox). Your theme CSS URL will look like http://www.yourblog.com/wp-content/themes/pilcrow/style.css. Enter that in first box and replace URL will be http://dl.dropbox.com/u/1234567/pilcrow/style.css.
That’s all. Now, your entire theme images and CSS will load from Dropbox.
Offloading all the uploaded images to Dropbox
*. We know that all the uploaded images and files are stored in “wp-content/uploads” folder. Go to Dropbox’s “Public” folder and create a folder “uploads.” Download all the files in your blog installation’s “wp-content/uploads” folder and upload them to Dropbox’s “Public/uploads” folder that we just created.
*. Obtain the link of that folder by right clicking on an image. See above to see how we have done. It will look like “http://dl.dropbox.com/u/1234567/uploads/some.jpg.” From this URL, we can note that the link of this folder is “http://dl.dropbox.com/u/6784327/uploads”
*. Now, in “Real-Time Search and Replace” settings, add like this:
That’s all, all images will now be served from Dropbox.
Important Note: When you create new posts, you need to upload those images into Dropbox’s uploads folder as well. If you are organizing uploads into months and years folders, then you need to retain the structure in Dropbox’s uploads folder too.
If you want to upload files to Dropbox without leaving the WordPress dashboard, consider using The Dropbox Plugin.
If you exceed the 10 GB public folder bandwidth of Dropbox or run into any problems, just deactivate the plugin, and all images will be served from your host.
†Dropbox is a file syncing and sharing service. You can use it for storing files and documents and can sync them across all the computers you use. Even, you can sync the files into your smart phones like iPhone, BlackBerry, and Android phones.