Website header graphics size and format

Question

I am making some graphics for a website header in Adobe Illustrator. How large should I make these so they do not end up blurry and how should I save them?

Answer 1

Designing a graphics for a header is not just designing the image, but knowing how the header will look overall. If you provide only the image, there is a chance the other person making the website put just a tini little version, or a deformed one for example.

So the first step is to prepare a canvas simulating diferent screen devices, let's say: 1920 width, 1280 width, and some mobile. You can not make all the resolutions, just a few samples.

But the file you see in your screen is not proportional to a mobile device, so, as an exercise you can print a real size sheet like this to "feel" the size.

Or prepare a more pro mockup of course (there are several free templates on the web).

And export some 2 or 3 different files of your graphic for a responsive website.

Raster File Formats

The typical file format to export a photograph is: jpg.

An illustration with plain colours or some gradients and transparency: png. Do not use jpg because the compression artifacts will be evident.

The ppi info on this files does not matter, just keep an eye on the pixel size.

Vector file

But these days you can export a svg vector file, but I recommend keep the effects, like gradient-transparency at minimum. You can provide a single svg file and a preview of the recommended size.

---

Updated.

You normally want to design in vector format, so you have flexibility to export at diferent resolutions.

One thing that needs to be taken into account is that you "should" (or "could" if you will) design at 100%, and after that generate an aditional asset at 2x and 3x times larger for retina devices.

On my first example, the middle image says 480px width. That is a declared resolution for phones, if they are in reality capable of displaying FullHD (1080px width) they will grab the 3x version for display, but again, they are declaring 480px to make a designer's life easier. If they do not do this, a 16px font would be really tiny.

Answer 2

As long as you are using shapes and the pen tool in Illustrator it really doesn't matter. Letters that are converted to paths are fine too. Not sure about the other tools.

Since you are creating vector graphics with those tools (when using Illustrator) they can be enlarged infinitely without loss of quality.

Save your files in EPS, AI, PDF or SVG. Those are filetypes that support vector based graphics. There might be more but these are the common ones I know about.

If you've never heard about vector graphics before you might wanna read some general info; http://en.wikipedia.org/wiki/Vector_graphics

Good luck!

Answer 3

The answer depends on your layout.

If you are using a raster element (jpg, gif, png) the best size is the maximum size required in the layout. Be careful as large images will result in an increased wait time to load the file on a browser.

Some tips with raster:

• try to break the image in to elements eg. separate the logo from the background
• in web development you can have a small pattern image repeat in the background saving significant download time
• you can compress raster files using a number of tools to reduce file size
• be aware of retina images that require larger resolution images

Lastly you may want to use a loss-less file like an SVG, now is a good time to use it as IE8 is starting to be phased out and browser support is great. SVG has other advantages such as being able to apply effects.