Shannon Glaser | Step 10

Images can be embedded in the web page via the CSS code. This is more complex but can offer great advantages. For example, the image can be changed from a horizontal image to a verticle image to fit the screen based on media screen code. The CSS instructs the image to change based on the size of the screen.

Image File Type

There are five different file types you can save an image as to use in a website. Having an understanding of those file types and their pros and cons will help you determine what type to save your images as depending on their purpose in the site.

.jpg: This file type is known for being small, which means it loads quickly on a website. That also means it has a tendency to be low quality when the image is larger. Jpgs are also goo with color which makes them great for photographs.

.png: This file type is the best for transparencies. It is also great with color and they are high quality. However, that makes them very large file sizes that load slowly on a webpage.

.gif: Gifs are great for animations and motion. They are small file sizes and have sharp/intense image quality. Gifs claim to be good with transparencies, but that is not the case. You will end up with a small white boarder around your image if you save a transparency as a .gif.

.tiff: You can save images as a .tiff but they are huge files. Try to avoid using .tiffs on a webpage because they will take forever to load, if they load at all.

.bitmap: This file type saves images as black and white. They are also very small file sizes which means a quick load time on your webpage.

Steps for Implementing an Image

Step 1: Determine the dimensions of when the image will be at its largest.
Step 2: Open Photoshop and create a new canvas at that size.
Step 3: Open image file and paste into new canvas.
Step4: Press "Command" + "T" to Free Transform the image. Scale it to fit the canvas.
Step 5: Save the file using the appropriate file type (see above). Save it into your images folder in your Main Site Root Folder. Name it carefully so you know where the image is going on your site. This helps with file organization.
Step 6: Open Dreamweaver. Insert the image into your html code or into your CSS rule.
Step 7: Set the width to 100% (or whatever percentage you feel is aesthetically pleasing), and set the height of the image to "auto". This ensures your image will scale proportionally and not looked stretched on any media screen.

Steps for Getting an Image Ready for Web Use

There are certain steps you must follow in order to prepare an image for web use. You will do these steps prior to doing the steps for implementing an image.

Step 1: Open the file in Photoshop.
Step 2: Determine the largest size.
Step 3: Open a new canvas. Set ppi to 72 and size the canvas to the largest size.
Step 4: Size the photo correctly in photoshop then save for web again.
Step 5: Set the quality to high or maximum depending on the size.
Step 6: Check the reference to loading speed on the slowest modem (dial up) at the bottom left corner.

Always remember to save your raw files (unchanged and unedited) in a separate folder inside your Main Site Root Folder. Possibly title that folder "raw images" versus your "images" folder that the edited and implemented image files are saved in.

To place an image in your page do the following:

Find your place in the CODE you want your image
Use the dragdown menu Insert > Image
Dreamweaver will write the code and display the image but it will need to be updated. The code will read…
<img src="images/_skier-700x380.jpg" width="700" height="380" alt=""/>

That would make the image static.

Change the width and height via inline CSS style code...
Also,
<img src="images/_skier-700x380.jpg" style="max-width: 100%; height:auto;" alt="Photograph of skier on snowy slopes"/>

image of a skier — This image is placed in the HTML code as a JPEG in static.

photograph of a skier on snowy slopes — This image is placed using inline CSS code as a PNG and is responsive.