What is the use of Static Resource in Visualforce in salesforce ? How we can use it in vf pages.

Static resources allow you to upload content that you can reference in a visual force page. Resources can be archives (such as .zip and .jar files), images, stylesheets, JavaScript, and other files.

You can use static resources in the ways but first of all, you have to upload these resources as a static resource in Salesforce view source print
<apex:image url="{!$Resource.TestImage}" width="50" height="50"/>
<apex:includeScript value="{!$Resource.MyJavascriptFile}"/>
<apex:image url="{!URLFOR($Resource.TestZip,'images/Bluehills.jpg')}" width="50"height="50"/>
<apex:includeScript value="{!URLFOR($Resource.LibraryJS, '/base/subdir/file.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.style_resources, 'styles.css')}"/>

Hi Hariom,

Use static resource in Visualforce – Salesforce
Force.com platform provides us a facility to upload, manage and use the content that is static (not changing) for your organization, and it can be stored under “Static Resources“. It can be a Javascript file, CSS file, an image or even a zip file containing all the files required in one zip file. Today we’ll see how to use static resource in Visualforce – Salesforce.

Use a static resource to display an image on a visualforce page
In example we will cover, how to use a static resource to display an image on a visualforce page.

Below are the ways to use the static resources in our visualforce pages:

Suppose there is a single file like any single image or standalone css file, that you need to refer in your VF page, then you can directly use the “$Resource.resourceName” to refer the static resource where ‘$Resource‘ is a global variable to use any static resource within visualforce page. You need not to hard code the path of the static resource in VF page code. Below are some examples of the same.