When exporting Xara work to jpegs I have been specifying 96 dots per inch (dpi). I have since read that 72 dpi is the optimum resolution for web pages images.?
Does anyone have a view on this..?
Thanks, Steve
Printable View
When exporting Xara work to jpegs I have been specifying 96 dots per inch (dpi). I have since read that 72 dpi is the optimum resolution for web pages images.?
Does anyone have a view on this..?
Thanks, Steve
Hello Steve,
A web browser does not care about dpi - it doesn't matter if an image is 72, 96, 150 or 890 dpi... The only thing that matters for web images is the pixel dimensions e.g. 500 pixels by 300 pixels.
That 72 or 96 dpi was probably come up as a guideline for people who have no idea about pixels.
Good luck.
If the web designer does not specify the height and width of the graphic, then the browser will draw the graphic to the pictures dimentions. 96 on a windoze and 72 on a mac... I think there are more windoze 'puters out there than macs. So... I design for windoze... 96DPI. http://www.talkgraphics.com/images/smilies/wink.gif
I don't get it, John? Why not think in pixels instead - it doesn't matter if it's a Mac or a PC?
Using html to scale down an image is a waste of bandwidth, and it will look ugly... Scaling up an image will look equally bad.
yea,Risto is correct here... just stick to pixels, for images, as well for text.... all will see the same no matter the platform... http://www.talkgraphics.com/images/smilies/smile.gif
I have seen many websites (mostly WYSIWYG) that will use the broswer to scale the picture. Personally, I do not. I put the width and height of the actual graphic in the html to speed up building of the page.
Without the width and height dimension the broswer must load the graphic to see how big it is before it draws the page. I do everything I can to get my pages to load as quick as possible.
I also specify the size of the images in html.... but in pixels... http://www.talkgraphics.com/images/smilies/smile.gif Or rather, Dreamweaver does it for me.
Steve's question had to do with DPI - I fail to see where this comes in for web purposes? http://www.talkgraphics.com/images/smilies/confused.gif
"I have since read that 72 dpi is the optimum resolution for web pages images.?" - Steve
"I fail to see where this comes in for web purposes?" - Risto....
RTFQ... http://www.talkgraphics.com/images/smilies/biggrin.gif
Translated... (Read The Firetrucking Question) or a suitable expletitive. http://www.talkgraphics.com/images/smilies/rolleyes.gif
Thanks All
Here's the site/page that started it off..
http://www.susqu.edu/webcentral/perftips.cfm
Check out the statement under 'Pixel Resolution' - Does it make sense to you guys??
Steve
Well, while this information, re 72 dpi, might have held some wieght in some discussions of yesteryear, todays system's monitors are more likely to display at around 96 dpi,but it should be suggested that for all intensive purposes, one should equate dpi to printing terms... pixels is all ya really need to worry about for the web, well that and compression/formats etc... hth's
Steve,
The instruction is a simple one to help people who hardly ever work with digital files. You know those things that happen in the galleries here at TG on occasion... "Hey, it looked so small in that other application" (after using side-scrolling bar for 2 minutes...)
John: I think there are more windoze 'puters out there than macs. So... I design for windoze... 96DPI.
--- I don't understand where that 96 DPI comes in? Where do you use it on the web?
Macs and any mac sourced program (PS/Flash) are based on 72DPI. I do not know much about a mac besides that. Many schools use macs, this article was written for a school, thus mac related.
All my pictures from xara x1 are created at 96 DPI. That is where the 96 comes in.
There's a lot of confusion re this issue. The reason I export at 96 dpi is that it gives the same size image as shown in XaraX on my PC.
For example, if you drag and drop the Owl image from the Xara photo images in the clip art section it imports at 575 x 615 pixels. If I want to retain this size for inclusion on a web page, then 96 dpi does exactly this. However if I export it at 72 dpi it's size is 413 x 461 pixels. Simaraly, if I export it at 600 dpi it's size is 3594 x 3844 pixels.
Basicaly, if you want to retain the same size of image that your viewing on your computer, export at 96 dpi. This ensures that it will import into html page at the same size you viewed it on YOUR monitor. (Of course it will resize on the same or different monitors with different resolutions)
I assume that mac monitors have a standard 72 dpi , thus the reason you get difference in image / drawing sizes when you import into Flash etc.
So yes, pixels are the way to look at images, but I always reduce an image to the required pixel size in XaraX, create a bitmap copy, and export this at 96 dpi.
Egg
did you know you can set your monitor for 72 DPI... It is under the desktop preferences I think... but why would anybody want to I do not know...
Maybe if you really liked programs written originally for the mac... Like Adobe or Macromedia products.
THE SMALLER THE BETTER
Although there's little difference in terms of kilobyte output -- an image with smaller DPI will render faster on any screen be it MAC or PC. (e.g. 72dpi versus 300dpi)
Try this experiment on PHOTOSHOP not Xara. Output a 300x200 pixel image at 600dpi and then export another at 72dpi.
Tell me what you come up with. See the difference in k-size?
Although at this point 96dpi and 72dpi may have very small differnces in terms of render time and kilobyte size, I prefer sticking to the old 72 dpi standard especially with larger images.
Hi Vectorsedge, have you tried saving at 48DPI (96/2) for the web then? I wonder what the quality, size would be. What percentage to you save a .jpg at then? I use 70%. Small enough to be useable, but not look too bad most of the time.
vectorsedge,
I get the same file size... Be it 600 dpi or 96, which sort of makes sense as it's the same number of pixels involved. Or are you talking fractions of a kilobyte?
Confused here! http://www.talkgraphics.com/images/smilies/confused.gif (Nothing new there... http://www.talkgraphics.com/images/smilies/smile.gif
I wonder a lot about this topic myself, and I have been in professional imaging for over ten years. Maybe somebody could share their experience with me. When optimizing conventional photography for the web, what is a good baseline size to start with. Is there a good reference for file size versus screen size out there?
WR1000
http://www.exchrome.com
Hi WR1000,
Welcome to Talkgraphics! On the web size matters, the smaller the size, the faster the picture loads. there is only one type of picture that anybody on the net will wait for, and the quality is not that important there either.
So... the lower the dots per inch you can make the picture and still have it presentable, the better. I use 96 DPI for web work. Drop the colors down to the minimum in gif, and set the quality to 70% in jpg. The quality is fine for the web, and the size is workable.
John, I thought we agreed that DPI doesn't matter for web purposes... http://www.talkgraphics.com/images/smilies/tongue.gif The DPI sampling only makes a difference when printing an image.
WR1000 - an 800 by 600 pixel image will fill up the (PC) browser window (plus a little bit more, because of scroll bar and navigation) if the user is running at 800 by 600 screen resolution. The image will "fit" better with more screen real estate.
If you think in pixels you will know exactly how your image will appear on any screen.
As John said, minimizing the number of colours will help make GIFs smaller. As for the compression of JPGs and 70% - it depends on the application (40% is the lower end of medium on photoshop for instance, and works great for many files) and the type (content) of file. You have to play around with it...
When working (exporting) purely photographic images from Xara X - pull down the antialiasing before exporting to prevent the images from becoming to soft (blurry).
I was wondering about this topic for many years. I always set my web graphics on 72 dpi. Some time ago there was an extensive article on photo.net proving the dpi feature is literally meaningless. Pages over pages, many photos, documents and screen shots. Don't have the link anymore. But I found this instructive article:
http://www.photo.net/learn/resize/
Note that the ppi/dpi-feature can be important for prints.
the Bottom Line on this subject guys is...
For the web... Make your pics as small (file size wise) as you can get them while still looking good. Smaller is faster, thus better.
Thank you for all of your responses! WR1000
I stumbled upon this discussion in a Google search. I'm having the same confusion about this. Here's my situation:
Though not a graphics professional, I have drawn many comic strips and now want to put them on the web. I drew them in Flash, so they are vector images. I personally have my computer screen resolution set at 800 x 600, but I wonder what MOST people have theirs set at.
When I export the Flash files as GIFs, I scale them down in the export dialog box to the size (width and height) I want them so that they will take up most of the horizontal area of my screen. But when I scale them down like this, the resolution setting in the dialog box automatically gets lower, and I end up with a GIF at 67 or so dpi. If I try to make the resolution higher, the image gets bigger, and that would make it require scrolling to view on someone's screen, something I don't want.
I can't seem to set the resolution independently of the image size.
I am confused by this. I guess I tend to think of resolution the way you think of it when using a scanner, where the size of the image you are scanning and the resolution you scan at are two different things.
What I am trying to figure out is, is my image displaying at a lower quality because it is 67 dpi? And what can I do to make it sharper? I mean, aren't the pixels smaller at higher resolution, and shouldn't this make an image potentially show more detail?
Is this just a shortcoming of Flash's export filter, or is this just the way it is with every program?
Another thing I'm trying to figure out is, if someone has their monitor set at a higher resolution, like 1024 x 768 or whatever, does that mean my image will display on their screen smaller than it displays on an 800 x 600 screen? I want it to display large enough to be easily readable.
It's damn confusing! What are your thoughts?
Oops. Sorry. My screen resolution is set at 1024 x 768, not 800 x 600. Now that looks fine on my 15" laptop screen. I see that reducing to 800 x 600 does make the comic get bigger and require scrolling. I'm sure hardly anyone surfs at 640 x 480 anymore. Isn't that the resolution that originally gave birth to the idea of 72dpi for the web?
I would guess that most people must be using at least 1024 by now. Does anyone know for sure?
"Some time ago there was an extensive article on photo.net proving the dpi feature is literally meaningless."
It is. Forget DPI. Only pixels matter.
My screen res is 1600x1200, so an 800x600 image would appear to be fairly small. Unfortunately no web designer can control the specs of any of their visitors so most will provide for the current 'norm'. I've no idea what that is right now, but the majority of computer packages presently ship with a 17" monitor which, while some owners will still have set to 800x600, anybody with an ounce of computer know-how will have set at 1024x768. It should also be taken into account that not everybody browses the web full screen (I don't, and boy do I hate people who add scripts to their sites that force a full screen browser!) and some will have extra nav bars (Yahoo, Google etc). All of this affects the amount of 'viewing space' any one visitor will have and has to be taken into account when adding images to your site. Whilst a small image viewed on a screen with a high res might not be too appealing, having to scroll to see the entire image because you run a low res isn't particularly fun either.
Right, on to the DPI. DPI stands for DOTS PER INCH and therefore has no bearing on web based images. It's a measurment used in printing. For example, an 8in by 10in image printed at 300dpi and the same image printed at 72dpi will be the exact same size (8x10), but the later won't be as good quality because there are less dots of ink per inch.
For the web, the measurment used is PPI (PIXELS PER INCH) and the standard is 72. If you set the PPI too high, the image will take longer to load, as John has already point out. The file size will also be larger, only slightly for a 96 PPI image, but why use up more server space that you need to?
Admittedly, if you create an image in Xara and change the DPI when exporting the dimentions will change too, but you can work around this by making the image slightly larger to begin with. Personally, I prefer to export the image as is, then use Photoshop to make it the size I want because I have more control. http://www.talkgraphics.com/images/smilies/smile.gif
Thanks. So I guess then it doesn't matter.
Saz, when you scale down an image in the Flash Export Dialog box, are you essentially doing the same thing as you are when you scale it down in Photoshop or similar program? Aside from the ability to apply image manipulations in Photoshop, is the act of scaling or resizing the same, producing the same quality theoretically, between the two methods?
I drew my comic strips in Flash twice as big as needed. Would it be better to draw them exactly the size I want them to display, so I don't have to scale them down when I export? Or is there no difference in image quality?
I think there's no difference but just wanted to get an expert opinion.
Thanks.
By the way, I have noticed a very slight improvement in image quality when using a higher GIF color depth. Even when I have only used 15 or so colors in a comic, lines seem to look smoother at 256 colors than at 16 or 32. But maybe I'm imagining the difference.
I've never used Flash, so I wouldn't know what happens when you scale an image with it I'm afraid.
The reason I use Photoshop is because I can set the ppi and the image dimentions to what I want exactly, where as with Xara, if you change the dpi, the dimentions change and vice versa. I don't know if that's the case with Flash or not. Sorry.
Steve
There is a visible difference between 72 and 96 dpi for digital design or Web design purposes, but it is about the software instead of the hardware as the people here has wrote.
More dots per inch means more resolution when the software renders an image (When converting curves into blocks of squares). To see it clear, you can use a software that handles vector images with bitmaps, an image rendered with 96 dpi will have better quality, to see it you just have to make a zoom and see the anti-aliasing. Some Windows programs has rendering machines that creates the quality as using 96 dpi even when you could be working with 72. I think most do it right now.
The dpi is used also to define the canvas size, weight of lines and the way that bitmaps are showed when you work with them.
In resume, verify if the software you use renders vector to bitmaps and if there are differences between 72 and 96, also what density is easier for you to work, then you will have your own answer.
Here's my understanding of the issue and all the below relates to exports from XaraX, so I'm not talking about Photoshop as I'm not sure what Photoshop uses as it's native ppi.
Try this as an experiment:
Open XaraX
Utilities / Options / Units / Pixels
Draw a 96 x 96 pixel square.
Utilities / Options / Units / Inches
The square is 1.0" x 1.0"
This is because your monitor is set at the PC norm of 96 ppi. (96 / 96 = 1)
Hold a ruler up to the square and it's not going to be 1.00 inches square! This is because of different sized monitors with different screen resolutions. For example, Birds 800 x 600 screen will fit into Saz's 1600 x 1200 screen 4 times.
However it will print out at 1.0" x 1.0".
Now back to web graphics. If your producing a graphic on a PC and using software originating from a PC base, export your graphic at 96, not 72. At 96 the image will match that of your XaraX images dimensions. (96 x 96)
If you export at 72, then the image will be only 3/4's the size of the original. (72 x 72). Of course the file size is smaller - the image is smaller.
If you increase the image dimensions within your web page software, there will be a subsequent loss of image quality.
So to reiterate, if you want to export your image to the web the same size as it appears in XaraX, use 96.
View this alongside a xaraX screen with a 96 x 96 pixel image. Notice how the 96 dpi image is the correct dimensions.
Bird
As a matter of interest, if you created your images in Vector, why are you converting them to Bitmaps?
If you want to create a page using Flash, optimised for 800 x 600 resolution, the approximate screen real estate available is about 760 x 470 pixels, allowing for browswer furniture.
So I recommend that you create your comic strips within this work area, never allowing the width to exceed 760, and therefore there should be no need for horizontal scrolling.
If you decide to abandon 800 x 600 users, then increase your work area to approx 975 x 560 pixels.
Re the image size / screen resolution problem. If you had 2 x 14" monitors, one set at 800 x 600 resolution and the other at 1600 x 1200 resolution, your images would appear a quarter of the size in the second than the first. That said tho, people tend to set there screen resolution to suit there needs / equipment capabilities. They don't usually run them at resolutions they can't read comfortably with, so I would suggest your fears are unfounded re this point.
Egg
Egg,
Thanks for your reply. Very interesting demonstration with the apple.
I am not using 800 x 600 on my monitor -- that was an error on my part. I'm at 1024 x 768, which I'm assuming is the most commonly used resolution.
Is this what you meant when you said to use 975 x 560 pixels? Actually, I can't use exactly that dimension, because my comics aren't that shape, they're in a different ratio.
Now I'm still not 100% clear on this. Here's the way it works with me.
I draw the comics in Flash. Flash is a vector program. I need to export them as GIFs to put them on the website I'm making.
In the export dialog box, you get to set resolution in DPI, and also height and width of the image in pixels. I try to export at 96, but when I do that the image's size automatically is increased in the dialog box.
The Flash cartoons are too big to display on the screen without scrolling, so I have to scale them down to a size that will fit on the screen when I export. When I do that, the export dialog box sets the resolution depending on what the chosen size is. The smaller the size, the lower the resolution becomes. (I'm not trying to make them bigger, just smaller.)
I can't make it smaller and simultaneously increase the resolution.
Yet I feel that sometime in the past, I was able to do that. But I can't remember just how.
And I also have a recollection that even if something might look the same on the screen as a higher resolution image, you will see the difference when you zoom in, as you mentioned.
Hmmm...maybe that was something I noticed when I was preparing photos for the web. Yes, I think that is the source of my memory.
I guess Flash vector drawings are different.
So the biggest question to me now is, should I be drawing my comics the same size I want them to display? But because I draw them in vector, I think it doesn't make any difference, cause I can always scale them down.
I don't know what Xara is, by the way.
Boy, this stuff is confusing. I'll be grateful when SVG becomes the standard and these images can be vector not bitmap.
Hi Bird.
You say that you draw the images in Flash. Perhaps the easiest way for me to explain is if you send me a copy of one of your Flash files (the .fla) and I'll try my best to see what I can do.
You can email me at NOSPAM.e.bramhill@btopenworld.com (just remove the NOSPAM.).
Egg
Here's an idea: Bitmap trace - will be the least image size.
P.S. Egg, nice anchor face http://www.talkgraphics.com/images/smilies/smile.gif
Bird, I've never used Flash but I have a feeling the default DPI is 72. It would make sense as that's the standard for the web.
If that is the case, it would explain why your image size increases when you change the dpi to 96 (Xara's default DPI).
Saz
You're correct, Flash is a Macromedia prog ported from the MAC, so it defaults to 72dpi, thus the size anomilies when importing between Xara and Flash.
However, I can't say I argee with you re:
If you're using a standard desktop PC then 96 ppi (or dpi) is the standard resolution. Using Inches very losely here.Quote:
It would make sense as that's the standard for the web.
From here
EggQuote:
Pixels, Dots, and Resolution
The terms pixel and dot are used interchangeably. Pixel is short for picture element (pix-el). It is a relative length unit that represents the smallest amount of information displayed on the screen as a single dot. Screen resolution is expressed in dots per inch (dpi), which is the number of dots—or pixels—the screen displays per linear inch.
The normal resolution on most systems is 96 dpi. Until recently, most computer hardware was not capable of producing higher resolution, but this is changing. Several hardware manufacturers, particularly manufacturers of laptop systems, are building systems capable of producing higher resolution. These systems will be available before the end of the year 2001.
Images become crisper and text more legible as dpi increases. Because computer screens have sharper pixels and support gray scale, the text on a 200 dpi monitor is as clear as the printout from a 600 dpi laser printer.
Note Screen resolution can also be expressed as the total number of pixels displayed horizontally and vertically—such as 640 by 480, 800 by 600, and 1024 by 768. For example, 640 by 480 means there are 640 pixels displayed horizontally and 480 pixels displayed vertically.
>Bird, I've never used Flash but I have a >feeling the default DPI is 72. It would make >sense as that's the standard for the web.
Saz, well, what is the significance of that? I mean, does it mean that I could get better quality in my GIFs if I used a different program to draw the pictures? One that didn't default to 72?
It's still confusing me. Whatever Flash's default is, you can set the resolution to whatever you want when you export. But you can't set it independently of the image size.
Bird
I think your becoming overconfused here. (That's why I suggest you emailed me a copy of your Flash file)
In your case the thing that REALLY matters is the image in pixel sizes. ie 400 x 564 pixels.
I would resize your vector drawing to the aproximate size you want to export it. Then export at this size.
EDITED:
Don't work about the dpi settings
Egg
72 dpi/ppi is standard for the internet. It's the optimum setting because you get a decent picture quality while keeping the file size down, hence the loading time down. It also uses less bandwidth, which is import if you pay for your own hosting.Quote:
Originally posted by Egg Bramhill:
However, I can't say I argee with you re:
Quote:
It would make sense as that's the standard for the web.
If you don't believe me, check Google. While there are a few sites here and there which say 96, by far the majority say 72. http://www.talkgraphics.com/images/smilies/smile.gif