Exporting a high res logo for web in Illustrator?

Question

I have created a logo in Illustrator that I have used for printing but now need it for a website. How do I convert it so I have a high resolution image for the web?

I am not web savvy, it's the first kick at the can for me.

Answer 1

First of all, try to be as specific as possible when asking questions. It helps those who want to help you.

Now, to export a logo you can use

file > save for web.

Here are some things to consider:

1. Size in pixels

It's important that you export the logo to the right pixel-size. If it's too large, the user will have to download an unnecessarily huge file, slowing down your website and resulting in a bad experience. If it's too small, it will appear pixelated and look bad. You can adjust the pixel-size when exporting by resizing to exact pixels or percentages.

2. File format (and thus size in bytes)

jpg

When you don't need any transparancy, you can use the jpg format. This has a very small filesize. Downside is that it has lossy compression, resulting in artifacts and a pixelated appearance when compressed too hard. Play around with the 'quality' slider to see a preview of the rendered image. Usually, a little compression doesn't hurt, and can reduce your file by a large amount.

png

Can handle transparency, but usually results in higher file sizes. Features both lossless and lossy compression. Same remarks as with jpg.

svg

As suggested, this does offer the best file size to quality-ratio. Since this is a vector format, it's best used for images created in vector format (but since you're exporting from AI, that won't be a problem). Upside is a perfect quality in every resolution, since it's resolution-independent. Downsides to consider are: you need to have some knowledge of html to properly use this format in your site, and support by older browsers is not that good (See: Can I use for more info).

Hope this helps, and good luck with the website.

---

Edit: a bit more about compression.

3. Compression

A bit more about compressing your images. Compression is a great way to reduce file size, and thus download times, for your images. This is especially important for users visiting your site from a mobile device.

There are two forms of compression:

lossless

You don't lose any data, the algorithm just finds a way to package it more efficiently. Can reduce file sizes by huge amounts, especially if you exported from a design program that doesn't do a very good job at compression (yes, I'm looking at you Fireworks).

lossy

You lose some data, which may result in artifacts, such as pixelation, blurry patches, wobbly or dark edges, etc. On the other hand, when used in moderation, it can reduce file sizes drastically, and won't be visible to the naked eye at all.

BONUS: tools

There are a lot of tools out there that offer to compress your images. Some are great, some are good, some should be avoided. When compressing images, always keep a back-up of the original, just in case something goes wrong (as it will do eventually).

A great list of available tools can be found here. My personal favorite is FileOptimizer. It's not the fastest, but it has offered the best lossless compression I have ever seen, sometimes reducing files to 4% of their original size without any data loss.

Answer 2

File > Save for Web is all you should need.

Answer 3

You can use svg format for the web and you will get the highest resolution with the lowest weight (save as svg)