Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding web design
- Creating buttons and web graphics in Photoshop
- Formatting text with the Text Layout Framework
- Using the Timeline
- Creating a custom looping animation
- Loading images in a gallery
- Creating invisible buttons
- Adding music and video to a site
- Customizing video playback controls
- Optimizing and publishing a web site
Skill Level Beginner
Optimization is a very important step with any web site or any web content for that matter. We want to make sure our content looks really good and is as small as possible, and that's what I want to do here. I want to go ahead and optimize this site, but first I need to check and see how large it is and figure out which files or which graphics are the largest in it. So, I'm going to go to my Publish Settings and I'm going to click on the Flash tab and from there, this is where most of my optimization happens, but what I want to do first off is I want to generate a size report to see how large everything is and just see what is included in this file.
So, I'm going to go ahead and select Generate size report and I can click OK. Now, anytime I do a Test Movie, what happens is in my Output panel, you can see this size report. This is also a TXT file that I get to put in the same folder as my SWF file, but in here you can see this is my index.swf Movie Report, some of them metadata, which is what this is here, that gets included, and then I can start to analyze the rest of this.
So, you can see that plenty of things are going on in Frame 2. In here, I can start to see sort of the different frames as well and their file sizes. So, about every 20 frames I see this larger hit and what those are are the different sections. So, I really want to scroll down, even beyond these symbols, because they're pretty small, down into this area, because it's either going to be all the embedded fonts or the images and in this case, there's not a lot of embedded fonts in here.
So, I'm looking pretty good there, but right down here you can see my bitmap images seem pretty large. Okay, so I have the Home image, seems large. This Contact image seems pretty large as well. So, this is where the bulk of my file size is coming from, is of course from the images. I can also see that there are some sounds in here as well and potentially those could used to kind of be crunched down a little bit as well, but this is really the size report that tells me everything, and from there I can start to take a look at how much I need to bring it down. Because notice right here this is pretty much the size of my content. It's about 664K, is what it is.
All right, so I know the offending graphics are of course the bitmap graphics. So, what I can do off the bat is I can go to my Publish Settings and in my Publish Settings, in the Flash tab, I can bring down the quality of everything if I want. So, I can take it from 80 down to 30. I'll click OK. I'll do a Control > Test Movie. (Music playing) I can see it generated the size report again, and I can start to take a look at the file size.
So, it's actually drop to a pretty good amount, from 650 or so to 380. So, it's almost cut in half, but let's take a look at the content, because you can see my content has actually suffered as well. So, all of my Bitmap graphics look pretty bad, again, her face looks bad right there. (Female speaker: Hi, my name is Jill Steinman. I'm a freelance graphic designer...) These flowers look bad. So, it's really going to be a fine art of optimizing the specific graphics you need to optimize while keeping everything else maybe higher or lower, just kind of depends.
I think the clouds in the background, I can maybe crunch those down, because they're inherently nebulous and rough looking anyway. So again, that's the goal is to crunch down everything on a per graphic basis as opposed to using just my Publish Settings and crunching everything down. So, let's close that file, close our Output panel, and what I can do, if I just open up this Library panel, I can take a look at all of the graphics.
So, right in here, I can take a look at this clouds.jpg. So, what I can do is I can right-click on this clouds.jpg and go to Properties. From there, I can take this down from its imported quality, whatever that was, and I can make that Custom. So, I'm going to take the Quality down to maybe 20%, and I'll click Test, and you can see what you get. Obviously, that is way too small. Let's try 50.
Hit OK. That looks pretty good. Let's try 40 and really it's going to take this fine art of crunching this down, and also I can allow smoothing for this as well, and I might smooth it out a little bit. But I think that's acceptable, bringing that down to about 40% for my clouds, so it's about 17K, pretty darn small actually for the file size for that image. And next up, I have my other images. My contact image seems pretty darn large. That's this background image. It's going to be the same process of right-clicking, going to Properties, taking a look at the image, do a quick Test, and I can start to customize its quality.
So, let's take that down to 50, click Test, and I'd say that's still pretty acceptable. Luckily these graphics are fairly gritty to begin with. So, I think 50 works. Let's try 40, and that still looks pretty good. Click OK. I'm going to do this just to a couple of other images, Portfolio. Again, this is my Portfolio.
I can customize this down to say 30. I usually try pretty low and then start working my way up, and let's go to about 40, there to 45, and there we are. Okay, that looks pretty good as well. Home section, again, Jill's face unfortunately was not looking too good in this case, but I can come in here to test it, to use this Custom Quality of about 40 and still isn't that great.
And since this is the Home page, I actually, am going to leave this a little higher, about 60, just like that. All right, the last page, the About page, these are with all the flowers, which in general red is really tough to deal with, any sort of warm tone, but let's go ahead and see what happens when I take that down to 40. Okay, I would say that is acceptable, about 60%. Test out Allow Smoothing, sometimes it does a better job than others. But in general, I've just identified the sort of offending images, edited them or actually just optimized them on a per image basis.
Now, I can go to my Publish Settings and instead of crunching everything down to 30, just make it about 60 instead, because this logo file was also getting crunched down a lot. All right, so I've changed that. Let's go ahead and do a Test Movie. (Music playing) She looks better. Let's take a look. (Female speaker: Hi, my name is?) Those graphics look better.
These graphics look better, and let's just double-check our file size in here as well. Yeah 469, I'd say that's pretty good. All we've done is we've added maybe about 100K in image quality to certain areas, and as you can tell, I was able to customize that it on a per image basis to really give a nice look to the entire site, while still keeping it a small file size.