Remember that this is just for educational purposes. Studying existing code from a website is our top priority here.
Some of these resources can be easily downloaded if they are not made as a css background. Because basically you cannot just right click a css background and download it as an image.
And some are just not visible to the naked eye. But is really found on the site.
The magic happens when you right click on any empty space on the website and select view page source. I’m not going to use any site as an example here. Because I might be breaking a law which I do not know. So just pick out any site that you want and try the same principles that you will find in here.
After opening up page source. You will see a bunch of code. But what you will need to find first is the files which has .css file extension. Because this is where most of the hidden images are being linked. You can find them by pressing ctrl + f on your keyboard and type in .css. Surely something will pop up.
You will just have to click on that link. If the css file is a gibberish like that of Twitter. Then you can’t rely on your naked eye to do the job for you. Just make use of the ctrl + f magic. And search for the following:
- .jpg or .jpeg
Those are the most common image types. If you found one, then just use your common sense and your knowledge on linking directories to get to the image that you want. Most of the time, the filename of the image will tell you what it is.
If the link looks something like this:
And you are currently in(Oops, don’t click the link, I think somerandomwebsite.com is really an existing domain name.):
Then you already know that you have to take 1 step backward to get to the proper directory:
You will do the above if you have found two dots before the img directory, if not then do something like this: