code fellows 201
There are many reasons to include an image into a webpage. As a developer you should keep in mind a few things when choosing images.
| An image should: | Stock Photos |
|---|---|
| - be relevant | www.istockphotos.com |
| - convey information | www.gettyimages.com |
| - convey the right mood | www.veer.com |
| - be instantly recognisable | www.sxc.hu |
| -fit the color palette | www.fotolia.com |
When working with images, you should keep a folder specifically for storing your files. This promotes good organization habbits. Name the file images. On a large website, the images folder may contain subfolders for further organization.
The new figure element is basically a dev element specifically meant to contain images with their captions. Use the figcaption element like a p element to caption your images.
Where you place the image tag in your code can affect the layout of your webpage.
-
Before a paragraph This starts the paragraph on a new line after the image.
-
Inside the start of a paragraph The lirst line of the paragraph alines with the bottom of the image.
-
In the middle of the paragraph The image generates in the middle of the text it was placed in.
The type of element affects images as well. Blocklevel elements always appear on a new line. Inline elements sit within a block level element aand don't start on a new line.
Three rules cor creating content for your webpage:
- Save in the right format
- save at the right size
- measure in pixels
Save your photos or images with many colors in a .jpeg file.
Save images with flat solid colors in these formats. For example: logos, graphics, illustrations, diagrams, etc. These are also the only formats best suited for transparency
As said before, measure your image in pixels. Save images at a resolution of 300 dots per inch (DPI) or higher for the best quality and sharpness on printed work. For the web 72 pixels per inch (PPI) should be good enough.
Additional Resources: Color Guide