Advertisement


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?

2017/01/21
1
6
1/21/2017 4:45:00 PM

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.

enter image description here

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.

enter image description here

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.

2017/01/20
11
1/20/2017 4:39:00 PM