72 dpi or 96 dpi - What's best for web images?

[Saz]

Create a 96 x 96 pixel square in XaraX.

Change units temporarily and you can see xara says this is a 1" square. Measure it on your screen, I doubt it will measure 1".

Change back to pixels.

Select the square and export as a jpg at 600 dpi. Xara gives this a dimension in Pixels of 600 x 600.

Import it back into Xara. It will be 96 x 96 pixels or 1" square. If you go to print this it should print out as a 1" square. After all the size on export was set at 600 pixels. The dpi was set at 600 dpi, therefore 600/600 = 1". Obviously you wouldn't normally want such a high resolution for a plain square, but you may if you wanted to print a high end catalogue.

So we agree on something then! http://www.talkgraphics.com/images/smilies/biggrin.gif

Now, can we please get off the subject of Xara and what it does to images when you change the dpi. I accept that you create your images in XaraX and keep them at 96dpi so that the dimentions stay the same, however if Xara allowed you to change the dpi while keeping the dimentions the same, then it would be better to export them at 72dpi.

There is a difference where browsers and the web are concerned - the download speed of the images.

I'm not talking about an image created in Xara at 96dpi and then exported as 72dpi which is smaller height and width wise. I'm talking about two images of the same dimention, one being 72dpi (or ppi to be more accurate) and the other 96dpi. The 72 will load quicker, albeit only slightly.

[Saz]

I couldn't do this before because I was at work, otherwise I would have....

I created an image in Photoshop at 300ppi, saved it, then changed the ppi to 72 but kept the dimentions the same. The image quality for both was set to 6 which is a medium sized file and the value I use for all of my web images.

Now, I know we've been discussing 72 v 96, but, as I said before, there would only be a slight difference in loading time, so for this example I've used 300ppi meaning the download time is noticeable even to those with broadband.

Both images can be found on this page. Even with a broadband connection, one image clearly loads before the other. http://www.talkgraphics.com/images/smilies/smile.gif

Edit: If you want to view the page more than once to be certain of what you're seeing, please delete the images from your cache first. http://www.talkgraphics.com/images/smilies/smile.gif

[Egg Bramhill]

Saz
Your page won't download. I can't see anything.

Edit: I can see it now! Right I have 2 images, both the same screen size and i.e. reports both a.jpg and b.jpg as 59724 bytes in size. Where's the file size saving?

Egg

[Saz]

What's happening? Are you getting an error page or are the images just not loading?

It works fine for me and on my husband's computer. http://www.talkgraphics.com/images/smilies/confused.gif

[Saz]

In the time the images take to download.

[Egg Bramhill]

How can the images download at different speeds if they're both the same File size !!!???
Egg

[Egg Bramhill]

Even if it were possible to reduce the ppi but keep the dimensions the same, what you'd be achieving is placing a 72ppi image into a 96ppi screen space, thus a loss of image quality.

[Saz]

That I can't tell you, but they do. Ever been to a site where the owner has put up images they've scanned at 600 and 1200dpi or had 1200dpi images emailed to you? I have - while I was on dial-up. It wasn't fun!

I'm by no means an expert on this - I still class myself as a beginner when it comes to web design, but I read a lot and the majority say 72ppi is the optimum for web images. Based on what I've seen with hi-res images, I'm more than happy to go with the majority.

Yes, there will always be a slight lost of image quality, but it's relatively minor (visually, there's very little difference between the two images I put on that page).

The way I look at it is, if putting my images up at 72ppi means that the pages load at a decent speed for those on dial-up, and maybe saves me a little bandwidth at the same time, then I'm happy. http://www.talkgraphics.com/images/smilies/smile.gif

[Egg Bramhill]

Saz

THERE IS NO DIFFERENCE between the 2 images.
You have a.jpg which is 600 x 450 pixel in dimension and 59,742 bytes in files size.
b.jpg is exactly the same a a.jpg.
Neither will download faster as there both exactly the same.

I've been to sites where the creator has put a 1200 dpi image on a web page and just resized it
inside their web editor to fit a page. This doesn't reduce the file size, just the size (and quality) of the image. But what your trying to say has nothing to do with what we're discussing
Egg

[Saz]

They're not the same - one is 72ppi, the other is 300ppi. Unfortunately, unless you can open them in Photoshop or another photo-editor of a similar calibre, you won't be able to see that.