Tip:
Highlight text to annotate it
X
Chapter 3 Section 20: Embedding Images
There are two ways to embed an image into a web page.
One is to prepare the image in an application like Photoshop,
crop, size, and compress it,
then export the image in an appropriate web format,
saving the .psd file to your assets folder.
Another method is to copy the image from another application and position
your cursor where you want the image to appear, paste the image into Dreamweaver,
and then use the image preview dialog box in Dreamweaver to convert to a
web format.
Now, both of these methods will work,
but I want you to get in the habit of using Photoshop to prepare your images for the web.
It's much more efficient at
compression
and it's actually an image editing application,
where Dreamweaver
is a web design application.
They're created for different purposes
and both function well for their own purposes and not quite as well for
the other's purpose, if that makes sense.
And so I am in Photoshop right now and you're looking at a small image.
You see my layers panel, and in my layers panel you see that TCC is a smart object.
Just to let you understand this image a bit better, I'm going to open the smart
object and show you that the smart object includes the banner area at the
bottom, Tulsa Community College,
and the image of the Center for Creativity where I work
at the top of that.
So there are two images. There is the banner.
Here is the picture.
When I exit the smart object
in Photoshop
then I'm right back to the original image. So both of those image files, the banner
and the picture,
are considered a Photoshop smart object.
So once I've prepared this in Photoshop and I have a .psd file that may need
to be edited in the future,
I can go to File,
Save As,
and I'm going to put this image in my current
assets folder.
Remember what I told you about assets - I like keeping
all of my source documents that might need to be edited in the future
in the current assets folder of my website.
So I am in the assets folder of chapter03.
This is going to be called
tcc_c4c.psd
because it's a Photoshop file.
And I'll click Save.
And then OK to maximize the compatibility.
That saves my source file should it need to be edited in the future.
Now I'm going to create a web version of that image.
I'm going to go to File,
Save for Web & Devices. Again, I am in Photoshop.
In Photoshop, I'm going to do a 4-Up.
Here I see my original image.
On the right,
I can choose to see this in a different format, such as JPEG High.
I can choose the one at the bottom
and maybe set that for a JPEG Medium.
And then I could choose the one in the lower right
and maybe set that for
uh...
a GIF format.
Maybe a GIF
128 Dithered.
Now, as I look at these images, the original was 138K in size.
The JPEG High is 12.75K.
JPEG Medium is half that size - 6.87K.
And the GIF file is 16K.
So I'm going to go with the smallest,
best quality, or quality that I can live with.
I look at the colors in the JPEG Medium file and feel they're slightly watered down
and I'm not real concerned with the 12K file,
and I do like the quality a bit better. So I'm going to choose that, select the
border around it, and I'm going to click Save.
Now what I'm doing is saving a JPEG file into my current images folder
within my chapter03 website.
So it's going into the images file and it's going to be a web-ready image in the
JPEG format.
Then I'm going to click Save.
So I've done my work preparing the image in Photoshop,
saving .psd in the assets folder,
and then creating a JPEG version that went into the images folder.
I'm going back to Dreamweaver and we'll just work with our current document. I'm going
to click
at the last line of text.
My cursor seems to be l-- Oh, I'm in LIve View, my fault.
I'm going to click at the last line of text and press Enter
and then I'm going to choose Insert,
Image,
and I'm going into my chapter03 images folder
and choosing my new JPEG.
Dreamweaver will stop and ask for alternate text. Remember, this is very
important for those with visual disabilities and who use a screenreader.
So I'm going to type Tulsa Community College Center for Creativity
and then I'm going to click OK.
That's a description of my image for screenreaders. My image is inserted.
When selected on the property inspector, it tells me its width and height, the
location of the file. If I wanted, because that image is selected, I could link that
to the TCC website
by typing the full path, or URL.
And I could tell it
to open that
in a blank window.
So I have also created a hyperlink around the image.
Notice that an image that is a hyperlink has a border around it
automatically and that border is green because I changed the link color to green.
Now I'm going to do a File,
Save All,
and then I'm going to show you the second method. I'm going to click after
this image and press Enter.
Then I'm going back to Photoshop. Now, once I go back to Photoshop,
I'm going to say Select,
All,
and then I'm going to say Edit,
Copy,
then I'm going to Dreamweaver
and I'm going to say Edit,
Paste.
Now remember I'm pasting
from the .psd file.
Dreamweaver recognizes that this .psd file is not a web-ready image and it
brings me to the image preview dialog box.
That works similar to the dialog box in Photoshop. I just click the 4-Up icon
in the lower right hand corner.
I can select the top left image and set that to JPEG - Better Quality.
I can select the top right image and set that that to JPEG Smaller.
I can select
the bottom left image
and set that to
maybe the
um...
GIF
216.
And then I could select maybe the bottom image--
Oops, I changed the top one. I wanted that one to be JPEG Better and I wanted
this one
to be in the GIF format.
And then I'm going to choose--
Hmm, they keep changing on me.
Let's make sure I choose the right one.
I think it was me.
That one's Better.
This one, my box is below. Sorry.
And here's the 216. Choose this one and maybe I'm going to choose um...
GIF 128.
Now I'm going to, again, review
the quality of the image
and then I'm going to review the file size. 10K,
4K, 15K, 16K
Both of the bottom formats are not nearly as good as the top.
Top formats, I prefer the better quality, so I'm going to select that one
and then I'm going to
click OK
and it's going to stop me and ask me where I want to store the image.
Since this is the same image as before, I'm going to add a 2 to that and put
it in the images folder and click Save.
Now it will stop me for an alternate text tag just like the previous did.
And I'm going to click OK.
And now I have my second image.
I'm going to click upon it. This is the copy and paste. This one is the one where
we prepared the image in Photoshop and inserted it.
On the second image, I'm going to do the same thing I did before
and add the TCC link.
Then I'm going to change the target to _blank
and click. Now, you will notice a slight difference in these
because the first image that I saved from Photoshop included the white
background area around the image because it saved the entire file.
The second image did not include that white background area because I copied
only the current layer, which was a smart object, and did not include the
background. The image was not flattened. So that's why they vary in size. If I were to
click upon the first, you'd find that it's height and width, 167x212, was
larger then the height and width of the second. And again, that is because the
background was not copied in the copy and paste process.
So I have the same image on the page but the better process to get in the habit
of using is to prepare the image in Photoshop,
do a Save for Web, and then insert that image into Dreamweaver. That's better than using
the copy and paste function.