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.