web graphics resolution

[lkoyle]

I am trying to do a website (my own and my first) and when I export the html, it is working great except that my logo is getting downsampled to very poor resolution - is there a way to change that or am I maybe doing something wrong -it is vector format in Xara but the output is poor.

thanks,
Larry

[bcire68]

This could be caused by a few different problems. I had a similar problem with my entire website looking pixelated, and I think that this was caused by my screen resolution. Can you give us your resolution?

Eric

[lkoyle]

Hi - my screen resolution is 96 dpi.

Larry

[bcire68]

Sorry if I wasn't clear. I mean like 800x600 or 1024x768 etc.

[gwpriester]

96dpi is correct. But if your image is very large, your browser may be reducing the size to fit on the screen.

When you hold your cursor over the image does it change to a magnifying glass? And if you click on the image with the magnifying glass, does the image get a lot bigger?

[ss-kalm]

Make sure that the graphic is the same size on the website as it was exported.

[steve.ledger]

Larry, this is all rather academic unless we have the .xar and website URL to check for you.

[lithium258]

Hi, a few points to help you here:

a) Always design with exactly the page size you are targetting -- set Xara to 100% zoom and work always with that in mind: your design should look correctly at that zoom ratio.

b) Setup your Xara page or as an alternative, make an imaginary canvas sized to a standard web page size -- previously it was 800x600 pixels so a good width for your design would be 775px, obviously any height. Nowadays the standard is 1024x768 pixels, so having your design sized by its width to 1000px or 990 px would work perfectly.

c) Screen resolutions are widely settled as 96dpi. Some Mac computers use(d) 100dpi but I suggest you to use 96dpi when exporting your design.

d) As for image exporting -- always export to 96dpi, if they are JPG format, use the max JPG quality. This will make the exports really nice in details but also unfortunately they will be a bit big in Kilobytes.

e) After you exported all the images, you will get some fat images with large KBs so you will need to use a professional optimizer for web imagery --ok, exporting from Xara and choosing between 80% to 90% in JPG quality *may* work, but my experience is that better results I get by using other optimization tools like WebGraphics Optimizer Professional, which btw, can process images in batch mode.

I don't suggest exporting to GIF format because they can't be optimized like JPG and they sometimes look like sloppy because their 256 colors palette. If you need to have images with transparency, or transparent background, which was the ancient use of GIF images, you can export them as PNG format, true color+alpha. Major browsers like Internet Explorer, Firefox, Chrome, Safari and Opera can read and correctly renders PNG with transparency.

So resuming: design your layout in such way by setting 100% zoom you see it as you want it to be looking in a browser, export always as 96dpi max quality and later use a third party image optimizer if you want to make the site fast loading.

Cheers
Aram @ Lithium.Design Studio