MAT 125: Saving Images for the Web
A few quick tips on Saving Images for the Web
- Always keep your original image file. Save the new version with a NEW name
- Use short file names with no spaces - they are less likely to confuse the browser, plus easier for you to get right in your code.
- correct - cat.jpg
- incorrect - big white cat.jpg
- Case Matters
- Screen Resolution is generally 72 ppi (pixels per inch). Save your files at this resolution so they load faster. Most digital cameras save files at 180 ppi or that seems to be the setting most people use.
- Make your larger file first - maybe 4" x 5" - this would be 288 x 360 ppi
- Make a smaller file next - or an icon that you can click if you want to go to a larger file. You might make this one 1" x 1.5" or 72 x 108 ppi. Of course you need to work with your picture proportions - so these are just suggested sizes.
- SAVE for WEB - most image programs offer this option. It compresses the file even more - but not in a noticeable way. It just makes them load faster.
- Save the image file as a .jpg. It will look better than a .gif - .gif files are great for small animations and vector or graphical files.
DO NOT DO THESE....
- DO NOT enlarge files in your image software. If a file is a certain size and you want to make it bigger than the original size, the quality will go down. You will be able to see the pixels (those ugly squares).
- DO NOT just resize your photos to a smaller size inside of your html document. Yes it will let you do this, but it takes just as long to upload that huge file when it is "marked" as a small file. Take the time to make a smaller file outside of your html document. Your end user will be happier because the page will load faster. And you will be happier because people will want to look at your web page.
USING an IMAGE folder
For good file management you should start using an image folder inside each of your exercise folders. This helps keep things tidy.
- so you might have a "faulk3" folder and inside it you would have an "images" folder
- when you link to the images inside this folder you MUST INCLUDE THE IMAGE FOLDER NAME
for example..... <img src="images/cat.jpg" />
Pretty simple - but if you forget - you will get the dreaded X-box for image not found.
