What Resolution is best?
What resolution is best for images on blogs? Everyone has an opinion, and mine is that 1024×768 is ideal. That’s the resolution I use whenever I put up a series of pictures, or for the full-detail versions of thumbnails.
I used 640×480 consistently up through 2001, and I used to brag on my About page that “no page on Mahugh.com is larger than 100K total.” Then in 2002 I decided to go to 1024×768 because I wanted to show more detail and higher-resolution monitors were becoming more common. And fewer people use modems now, especially in developed countries. So the file size of up to 300K for a typical 1024×768 photograph isn’t an issue any more for most people.
This evening I was playing around with my blog stats for the first time in quite a while, and I looked at browser resolution. It turns out that the empirical data confirms that 1024×768 is still ideal:
1024×768 images are ideal for the single largest segment of visitors, and fit nicely on the next most common resolution as well. Another way to look at optimum image size is “what percentage of visitors are downloading a level of detail that they can’t see on their screen without scrolling?” That’s just the 800×600 (5%) and the 240×320 (1%) — so only 6% of visitors would benefit from reducing the resolution from what I’ve been using.
I’ll stick with 1024×768 for now.
This entry was posted on Saturday, March 10th, 2007 at 11:03 pm. You can subscribe to comments on this post through its RSS feed.
on March 11, 2007 at 6:24 am Tom wrote:
Personally, on all new sites I build for 1024×768, but make the readable live area no wider than 700-750 pixels (much like the Connections theme you’re using here on your blog). That way the few remaining 800×600 users don’t have to scroll left to right, AND I keep the text at a readable width. Long lines create eye drift.
Some of the early website analysts suggested that you put your cruical content and highest paying ads in the left (at the time) 640 pixels of the page and then put other less important things (teasers, support links
) beyond that in 160-pixel and 248-pixel columns. That way the lower-res viewers would see the A-list material, and others would see more. But that still creates a scroll bar at the bottom, and it kind of flies in the face of not putting superfluous stuff on a web page. It also puts the web developer (at least in a one-guy operation like mine) in the constant position of making decisions about the relative importance of one element over another.
For images, though, it seems to me that you’re right — 1024×768 is appropriately small. And while I no longer have an IE7 installation anywhere around here and don’t remember if IT does this, I know Firefox automatically downsizes images that are larger than your browser viewing area if you link directly to them. You just have to click on them for full size. Pretty handy.
But look at the number of resolutions now (eleven, including “other”). Back in the day, you could anticipate these kinds of things to a certain extent — now with PDAs, widescreen monitors, things like WebTV, and so on, you really have no idea what might come along. So I just build for readability and float the layout centered in the viewing area. Maybe put a nice subtle pattern or something in the background. That’s all you can do any more. This world is going to hell in a handcart, I tell you.
on March 11, 2007 at 11:55 am orcmid wrote:
Yup. And of course those two numbers don’t tell anything about all of the variability, including user preference, that Tom points out. (Yes, IE7 does make it that easy to over-ride the down-sampling.)
This topic is a great illustration of the pitfall of asking the wrong question because it’s one we can answer. Hmm, I should have said that here: http://orcmid.com/BlunderDome/clueless/2007/03/difference-between-resolution-and-size.asp
on March 11, 2007 at 12:33 pm Doug wrote:
Oh, I think the bench-seat analogy made that point just fine.
Nice post.
Yeah, I’ve said “resolution” so long in that incorrect context that it’s like “hopefully” — I don’t even notice it any more. I will offer this minor defense: when browsers resize to fit the screen, then the pixel size really does become an effective resolution of sorts.
One thing I’ve noticed is that many graphics-arts types (other than Tom) want to talk about computer graphics in inches and DPI. So a 600×300 image is maybe 2″x1″ at 300 DPI, or 8″x4″ at 75 DPI. That feels to me like an unnecessary abstraction — a BMP/JPEG/TIFF/GIF/PNG is truly a fixed number of pixels across, and “inches” have nothing to do with it.
Hey, didn’t somebody quote Humpty Dumpty on this meaning-of-a-word thing lately?
on March 11, 2007 at 1:15 pm Tom wrote:
Orcmid — very good article on your blog. We all (okay, I) tend to forget that screen resolution doesn’t necessarily dictate browser view size. I’ve done some limited silliness with this stuff for intranet web interfaces with one or two users who flatly refuse to standardize on a reasonable screen res (read: a CEO and a Director). So I’ve used some of the javascript methods (mentioned in this quickly and carelessly Googled article) to write conditional statements and change the dimensions of an element here and there. But it’s pretty much limited to intranet web use, in my opinion, because you have much more control over what browsers and settings your visitors will be using. I found it to be too much of a pain in the butt to try to make it work reliably for an external website. It was neat and fun, but ultimately unreliable.
In doing a little reading right now, I’m finding that the SVG image format is still up in the air, right? Last I heard (admittedly, a year or so ago and from a friend best classified here as Just Some Open Source Guy) Microsoft was developing a competing vector format for web use and therefore not implementing native SVG support in IE. Do either of you (or anyone else) know anything about how this is progressing? I’ve been stuck in data-driven web app hell for several months and haven’t been keeping up on the design side of things. Anyhow, it sure would change things if you could scale vector art elements based on percentage width of the page or DIV or something.
Plug-ins seem to be available for IE, it seems, but that’s not going to do it for Joe Websurfer. It sure would be handy to be able to scale non-photographic art cleanly (and in a platform-independent manner), what with PDA screens vs. widescreen vs. high res vs. HD vs. whatever. Think of the boon in filesize to background images!
on March 11, 2007 at 4:25 pm Doug wrote:
I think the “competing vector format” was probably XAML and its cousin WPF/E. But I don’t think IE has plans to support those — don’t quote me, but I’ve not heard of anything.
We have VML and DrawingML for vector graphics in Open XML, and DrawingML is what we’re emphasizing going forward. But VML is still used in some things, and I’ve heard that Google uses VML for some things precisely because it’s support by IE.
But as I said, I’m not up on Microsoft’s overall strategy in this area. Frankly, I’m as curious as you are, now that you mention it. Must be a whitepaper or something somewhere around here …
on March 13, 2007 at 12:03 pm Scott B wrote:
I am trying to talk Jess into:
http://www.newegg.com/Product/Product.aspx?Item=N82E16889234001
So I would say 1920 x 1080 will be more than fine =D
on March 13, 2007 at 1:05 pm Tom wrote:
Wow … you need a chair with a seatbelt for a monitor like that!