Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsWhere Should I store Images For Website?
I'm a bit confused. Where do I store images which I want to appear on my website imbedded in code? Should I store them in my desktop folder where I store html and CSS? And if I store them there, once my website is live, will folk who are browsing it be able to see them? Somebody once suggested that I should store images in photo sharing sites like photobucket, pinterest etc, and then link them to the html and CSS. But from the tutorials I am not hearing none of that, and only references to folders in desktops.
I hope my question is clear.
4 Answers
Kevin Korte
28,149 PointsYou store them in folders. Much like when you are developing local, you'd have your pictures in a folder, and reference to the pictures location, you'd do the same on a live server.
You'd have a folder on the server an image lives in. And in your code you reference the location of the image on the live server. You can't leave the images on your own computer and reference them on a live server. You're server won't have the ability to retrieve them. They have to be on a server of some sort.
Using sites like photobucket and pinterest are options, but they're not typically a very good option. It can be an easy way to get going, but it would be very hard to scale a website that way long term wise.
A web server is in a lot of ways like a home computer. It'll have a folder structure as well.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsHi Kevin, I get it., but let me go through the steps again. When I am still building the website I store the images in a folder within another folder on my desktop that is also housing the html and CSS files, and then when I am finished with coding, I load the whole folder into the web/line server and everything is live. Please correct me if I am wrong.
Kevin Korte
28,149 PointsMore or less, when you're starting out, yes. If you use relative paths here, and move everything together to the live server, it shouldn't break, but you might find broken image links, in which case you would need to update the code to make sure the images are correctly linked to on the live server.
You'll learn this later, but this is not how it's done on bigger, more professional websites. Many of the languages have advanced ways to set up environments and paths so that it doesn't matter if your working local, or pushing to a live server, things like image paths don't break without having to change any code. But, these are more advanced, and Treehouse will teach you how to do it.
Today, what you are doing is fine assuming you're pretty new to this.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsYes I am still new, this is my first month in Treehouse after quickly going through through the tutorials at codecademy for another two months, but I had not met any that taught where to store if you want to see them on a hosted website. As you say I will learn this later here at Treehouse, let me be patient, but what you have told me has made me imagine how its done. Thanks a lot God bless.
Kevin Korte
28,149 PointsYeah, no problem. Welcome and enjoy the learning process.
A very common solution is to use something like Amazon S3. This is certainly higher on the difficulty scale, seriously. But, if you want to just take a peak, here is the link: https://aws.amazon.com/s3/
The basic idea is you store your images on Amazon's servers, and than link to that. So when the page is called, Amazon returns the image, not your own server. It's a good solution if you have a picture heavy site and don't have a ton of server power, and pictures are one of the most expensive resources to serve to a client.
The other common option is most back end languages allow you to generate file path's dynamically. In php for example you might have a configuration like
<?php
define('BASE_URL', $_SERVER['DOCUMENT_ROOT']);
?>
<img src="<?php echo BASE_URL;?>/img/my-image.jpg">
How, with something like that, BASE_URL is actually going to be the path to my projects root, and when I move the whole project to a live server, as long as my img folder stays relative to my document root is, than on the live server the BASE_URL is going to be the folder path to my projects root on the live server. That would be a dynamically generated path to an image asset, as one example.
Again, if this didn't make sense, no worries. It will soon enough. Treehouse taught me about this, they'll teach you too.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsIt makes sense Kevin, and I hope Treehouse will later reinforce it as I go further on the tutorials. At least for now my worries have been settled.