Optimizing images

Content
1

What is the best and most sure-fire way of compressing graphics but keeping the integrity of the image? I normally use Fireworks > Export Wizard but if it’s a PSD or AI file I’ll use the Save for Web in Photoshop or Illustrator. The problem is the right header graphic on this page: charlotteswebservices.com/temp/http-stoneyknob/index.html (image: charlotteswebservices.com/temp/http-stoneyknob/images/home-header-3.jpg). Designer is saying “Cuisine from Near and Far” is fuzzy. He sent an Illustrator file and I have tried:

Saving for Web > jpg, PNG and gif in Illustrator…
Opening in Photoshop and Saving for Web > JPG
Saving file then Export Wizard in Fireworks > JPG and PNG.
Opening in Photoshop > Save As > JPG and then using Smushit.

What’s up there now is the later (PS > Save > Smushit). I think it looks okay but still…no luck. What is the best way to work with Illustrator files and optimize them for the web?

Thanks much in advance!

2

I just usually use the Photoshop > Save for Web option. You can adjust the quality on your image, just he more quality the bigger the size. You can also try Yahoo’s service Smush.it http://www.smushit.com/ysmush.it/ it does a good job in optimization images.

3

I wouldn’t trust saving for web in Illustrator. Illustrator is primarily for print work, so you’ll probably want to recreate that banner image in Photoshop. Might take you a bit longer, but you’ll be sure to get something thats crisp and optimized.

4

Willsmith727 - so appreciate your suggestion but a designer did the Illustrator files and didn’t send me the original photos (I am the front end developer creating the site). The only images are in Illustrator and when I even copy and paste them into Photoshop, they noticeably lose their integrity. Maybe I could ask him to send original images and create it in Photoshop. But I know there’s got to be another way around this…

5

What you might want to try exporting from Illustrator as a Photoshop file, with screen (72dpi) resolution.
Then opening that file in Photoshop and try saving for web.

Does the file look ok in Illustrator to begin with?

6

Yeah…it looks perfect actually.

7

How about after exporting from Illustrator as a PSD and then opening & saving that file from Photoshop?

8

I did that too. Doesn’t look good.

9

Dam web designers creating web layouts in Illustrator! :(.

I think you may have to ask him to recreate some of the graphics in Photoshop for you.

10

Hear, hear!! :-).

Thanks much. I just sent him an email.

11

  1. Adobe wouldn’t know a optimized file from the hole in it’s DVD.

  2. The results from smush.it look like **** to me, at least when they work – some of their PNG files flat out refuse to work in Opera or Chrome… NOT that they seem to offer any real savings over what I’m able to do with Paint Shop Pro’s save-time dialog. (part of why I stay with PSP)

  3. You want a shocker, try using the save-time GD unit in PHP… for some reason it makes really small files that work just about anywhere… odd since the GIMP is supposed to be based on the same toolkit, but doesn’t even come close to what PHP can do by simply loading the image in and saving it with compression set high.

  4. Choose your target format carefully – jpeg for photos, 8 bit png for colored line art, gif for anything that’s less than 16 colors in less than 32K pixels, and STAY THE **** AWAY FROM THOSE STUPID MALFING ALPHA TRANSPARENCY 24 BIT PNG FILES… not only is there the legacy IE either doesn’t work or throwing even MORE bloat at the page through some stupid scripting or filter, they’re fat bloated files that are slow to render and suck down RAM on the client side… much less I’ve rarely seen a case where they were actually necessary to a layout unless you’re giving the PSD jockey who has no business ‘designing’ websites in the first place have more say than they should.

Most of the time you can fake it with close-enough AA and palette transparency anyways… if it can’t, it’s probably “not viable for web deployment” and the artist needs a good swift boot in the patoot to take the time to learn something about the Internet BEFORE drawing their cutesy little PSD.

12

That’s what I would normally do, but it depends on the type of graphics you have on the image.

I use Photoshop Elements all the time, and occassionally its “Big Bertha” Photoshop when on a different pc, and I don’t have any issues creating graphics for the web. Even Photoshop Elements has tools to create some pretty flash looking graphics and after optimising for the web they still look fine and sharp.

13

Thanks Max Height. Does Elements have an Export Wizard like FF or Save for Web like PS? The problem is that I receive files in Illustrator and then have to optimize them.