Visualforce - Beyond Basics Series 40 - Static Resource is not the only one

Where do you normally store resources in Salesforce ?

As a developer, we know that most of the resources for projects like images(icons, labels, loaders), javascript, css files is Static Resource. But, there are few different areas in salesforce we could leverage.

What are the specific purposes for different areas ?

These are the different areas where you could store resource & use them in your visualforce page.

Static Resource

Like the name suggests, one should store the resources that is a static one which doesn't change over the course of time. So, all images, css/js files which has a very stable version should be stored in it.

Tips :

1. One tip is that Org should maintain a proper repository for their static resources & avoid duplicates among the resources. For example, i have seen jquery, loader images all over the static resource packages. This is very ineffective management for the storage space allocated for static resource.
2. Another tip is to not create package per projects. This will lead to contain duplicate resources. Rather than, better maintain static resource per resource like JS, CSS, LOGOS, LOADERS, etc.

Notes & Attachments

If the resource like Text Documents (rtf, msdoc, csv, pdf, css, js, etc), Images (jpeg, png, gif), videos (flv, avi, mp4, etc) are attached to any Standard/Custom objects like Account, Contact, etc, we could leverage that & use those in Visualforce Pages.

Example :

For example, recently, i have built a visualforce page that displays the product image for an account. I could have uploaded them in static resource. But, its specific to the Account, so i have added them to Notes and Attachments & used them in visualforce.

Documents

This is the storage area one should use when the resource is not associated to any Object. If it's a single file that is slightly large one, could easily fit in this area. One more advantage is that not only developers, admins can also share this space.

Chatter Files

This is the storage area shared between chatter users, admin & developers. But, one should use this space only if the visualforce page is related to chatter functionality. Otherwise, there's no guarentee that this resource will exisit, as any chatter/admin could modify/delete this resource.

Hosted External

This is the technique of storing the resources outside Salesforce. This is also a efficient method, as there are so many reliable systems out there today for each resources.
         Javascript  - Google hosted resources, JQuery, Angular, etc
         Images      - Github, Flickr, etc
         CSS          - Google hosted resources, Bootstrap, W3.CSS, etc
         doc           - Google docs, etc

Where is the Code ?

For illustration, i have shown the images from 'Static Resource', 'Notes and attachments' & Documents.

Any Screenshots ?

Walk through in a video ?