This week we are going to focus on images. How to add them to your HTML file and how to do basic cropping and resizing in Photosohp and some of the concepts you need to know about what they are and how they should be used.
At the beginning of class we will quickly go over the assignment and some HTML and using Blackboard.
We will start on Tuesday with jumping right in and learning how to add images to a page and opening Photoshop and doing some basic image editing.
Images are covered in Chapter 5 in the book which you should read and will help if you forget how to do things we did in class when you get home.
There are also some supplemental materials the book provides that are helpful for this. I’ll link to those in the sections below.
Planning for Adding Images
Before you start adding images to your page you need to know at least a couple of things:
- The dimensions you want for the image. This is the width and height in pixels.
- What image you want on the page. If you don’t know that yet you will need the next section.
Sometimes you already have images ready before you start creating the page but often you need to find images. First let’s look at the type of images you might want to look for. Our book has a resource for this: http://htmlandcssbook.com/extras/choosing-images-for-your-site/
The book resource is great with helping to understand how images are used. The only problem is that the images shown are professional photographs and if you can’t shoot them yourself and don’t have the money to buy them then there is still often the problem of actually finding an image.
In order to use an image on a web site you have to have permission from the creator of the image to use it. Formally this is a license (if a friend allows you to use an image at least have them send you an email saying it’s OK). The Creative Commons license is one image creators can give their images that allow people to use them and even edit them and manipulate them. Their website has a search that can be a good place to start looking:
Here are two other page with more information about what you can and can’t use and how to find images:
For the following examples you can use images you found while we were doing the Creative Commons search or you can download the following zip file and use images from that. They’re my images (a random set) and you can use them for class.
Cropping and Resizing Images in Photoshop
There are two basic things you need to do to an image to use it on the web.
- Resize it to fit on the site.
- Crop it to the Aspect Ratio you want.
Both of these actions change the image’s Image Dimensions
We are going to explore what these are and how to do them in Photoshop.
The book as a tutorial on changing the image dimensions:
File Formats and Saving for the Web
After you’ve edited your image you need to save it in a format that works on the web. Photoshop’s native .psd file format won’t work. Generally you use one of the following 3 formats:
- JPEG (.jpg, .jpeg): These are used for photographs and images with a lot of detail and gradients.
- PNG (.png): This is used for images without a lot of detail like icons and text rendered as an image. The PNG format can also do transparent backgrounds in images.
- GIF (.gif): This is simlar to PNG but it is a proprietary image format.
More on GIF
Because this is proprietary (technically you have to pay a company to use the format) many people have stopped using it and use PNG instead. You don’t need to use it, but you should know about it and some people do because older browsers sometimes have trouble with PNG files (especially the transparency). Nowadays not many people use those browsers anymore. The other reason people use GIF files is to create animated gifs. Some links for those if you’re intersted because we won’t cover them in class:
Saving for the web
The book also has a tutorial on saving images out for the web which you can use:
Adding Images to Your HTML Page
Finally, we are ready to add an image to the page. The good news is that once you understand a couple of details, this is the easy part.
One thing to remember is that the image stays as a separate file and is not embedded in the page like MS Word might do. You can just tell the browser where to find the image and where it should add it to the page when it makes the page.
A basic image has these pieces:
- img tag <img>: where you put this on the page tells the browser where to place the image
- src attribute src=”images/cat.jpg”: this tells the browser where to find the image file
- alt attribute alt=”dog chasing ball”: this is a text description of the image. Blind people and those with text browsers use this to know what the image is about. ALWAYS INCLUDE THE ALT ATTRIBUTE.
- width attribute: this tells the browser how wide the image will be
- height attribute: this tells the browser how tall the image will be.
- align attribute. We will use CSS for this instead
Absolute vs Relative Paths
The src attribute in the img element is where you tell the browser it can find the image. This is called the image path. There are two ways to do this.
A Relative path is directing how to get to the image relative to the current HTML page.
- file is in same place as html: src=”cat.jpg”
- file is in folder named images: src=”images/cat.jpg”
- file is in folder named animals that is in a folder named images: src=”images/animals/cat.jpg”
- file is in folder named animals that is outside of your root folder where the .html file is: src=”../animals/cat.jpg”
To keep things simple we always use a folder named images that is in the same place as the HTML files and put all of our images there so the src is always src=”images/filename.jpg”
An Absolute path is a full url to an image on the web. It starts with http:// and if you put it in the address bar of your browser it would show the image.
Warning a common mistake when using some programs is that they insert an absolute link to a file on your hard drive. It will look somethign like:
This is not correct and won’t work. Change it to be a realtive link. You may have to move the file to your images folder first.
Example img elements
<img src="images/cat.jpg" alt="Picture of my cat fluffy"> <img src="images/dog.jpg" alt="My dog Fido" width="200" height="150">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Iris_cat.jpg/320px-Iris_cat.jpg" alt="picture of orange kitten named iris being held in a hand"> <!-- iris uploaded by Alvesgaspar to http://commons.wikimedia.org/wiki/File:Iris_cat.jpg -->
Different people will require different ways of attributing an image. I used a comment here but a better way, if possible is to add text to the page with the creator’s name and a link to the original. We will look at that in another class.
The book also has examples from Chapter 5 of adding images. You will need to View Source or use the Inspect Element to see what the pages are: http://htmlandcssbook.com/code-samples/chapter-05/