Designing Artwork for Online Galleries: Image Size and Your Audience

September 17, 2008 at 6:13 pm 1 comment

As you design your image, you should always consider where your image will be viewed. For example, if you are planning on uploading your image to an online gallery (which is viewable by a web browser), you need to think about the screen size of your audience. If you make your image too large, they’ll only see a section of it. Do you really want audiences seeing portions of your image at a time… or would you rather they see your entire image?

Even though many graphic designers use screen sizes of 1280 x 1024 pixels, there are still a large number of people who use a screen size of 800 x 600 pixels. If you design an image that’s 1000 pixels wide, it may fit perfectly fine on your screen, but it may not fit fine on other people’s screens. How much of your image will they see? If they view it online, both their web browser and the website will take up screen space. So, even though they may be using a screen that’s 800 pixels wide, they may only be able to see 700 pixels of your image. That means they won’t see 30% of your image!

If your viewer can’t see your entire image, how effective will your composition be? You may have designed your image to set a specific mood by the placement of the objects within it, but if a viewer can’t see half of the image, how will they know?

Some people may argue that viewers can just save the image from their web browser to their hard drive and view it later, full screen. There are two issues here: One, even if they do save it, they will still be viewing your 1000 pixels-wide image on their 800 pixel-wide screens. If they view it full-screen, their software program will scale it down to fit the screen, which could result in less than optimal results.

Another argument against this idea is the fact that many websites add code to their pages to prevent visitors from saving images. Many websites believe that visitors will save the images and upload them elsewhere (this is a violation of copyright law).

Another argument made by some people is that they can’t get a good level of detail with a 600 x 600 pixel image, so they have to make a 3000 x 3000 pixel image. My response is this: if viewers are marveling over the detailed models, then you haven’t done your job as an artist. Yes, you want to have detailed elements in your scene, but that should be almost an after-thought of your image. You want your viewers to focus on your artwork as a whole, not on the cool texture of one spaceship.

Many online galleries first show a small thumbnail so users can choose whether or not to view the 3000 x 3000 pixel image. But, this thumbnail is usually smaller (and with far less quality) than a 600 x 600 pixel image. So now you’re back to the issue of people seeing a less-detailed version of your artwork.

On the other hand, if your image is meant to be printed, then you will need to make your image as large as possible, based on your printer’s specifications. If your image will be a 24 inch by 36 inch poster, it will need to be significantly larger than an 8 1/2 by 11 inch image, which, in turn, will be significantly larger than an image meant to be viewed online. Instead of designing for a web browser’s window, you’re now designing for the size of a poster.

The best solution is to make your image the correct size to begin with. You are certainly free to render your size at any image – in fact; some people render their images two or three times larger than the final version. Reducing the image down can remove some imperfections created by the rendering software. Personally, I recommend that you reduce the size of your image so it will fit within an 800 x 600 screen or even a 1024 x 768 screen.

Let’s look at some examples. This is how an image would look when seen on the Internet using a screen size of 1024 x 768 pixels

Version 1:
In this “screen shot”, we’ve uploaded a large image to an online gallery. The image is much taller than the browser’s available window, so the viewer has to scroll down to see the rest of the image.

This may be the correct size for an image that’s meant to be printed, but it is way too big for a browser’s window. Consequently, the image loses much of its impact.

Version 2:
This is a little better. The image has been reduced, but it’s still too big for this viewer’s browser window. The viewer can see more of the image, but like before, the image doesn’t have the same impact.

Version 3:
In this version, the image fits nicely within the browser’s window. The viewer now sees your entire image and can appreciate the work you put into it.

As a side note, smaller images result in smaller file sizes. If you make a large image (for example, 3000 x 3000 pixels), there’s a chance that it may be too big for some online galleries. The pixel-size may be within the gallery’s limits, but if the file is 350 k in size, the gallery may not accept it. Reducing the image to 600 x 600 pixels will probably reduce the file size to below 100 k, which is well within the gallery’s limits.

Your next question is probably, “How do I reduce an image?” I recommend using Photoshop’s “Save for Web” feature (or a comparable feature in Paint Shop Pro). Generally speaking, images from a rendering program (such as Poser or Lightwave) may not be compressed as well as they should. You should save (or “export”) your image as a Photoshop file, open it in Photoshop, and then “Save for Web”.

You should keep in mind that the lower the compression, the higher the file size (and vice versa). A compression setting of “100” will result in the best quality, but the highest file size. A compression setting of “1” will result in the worst quality, but the smallest file size. I recommend a setting around “85”: this is a medium-high setting which results in a smaller file size without a noticeable loss in quality.


Entry filed under: Digital Goods. Tags: , , , .

Why do elitists look down on the use of Poser? Advice for Online Vendors: Sample Customer Questions

1 Comment Add your own

  • […] Usually, when an image takes that long to render, either the image size is too large (for example, you’re rendering a 5000×5000 pixel image) or your render settings are too high. Usually, a setting of 75% to 80% max quality is more than enough for an image that will be posted on a website. Plus, there’s no need to render an image at 5000×5000 pixels when you’re going to reduce it to 800×800- remember, no website is going to accept a 5000 pixel render. But even if a site did accept it, why do you want your viewers scrolling all over the image, when they’ll see less than a 1024×768 section at a time? Don’t you want your viewers to appreciate the entire image? See my previous blog about making images for the correct size: Designing Artwork for Online Galleries: Image Size and Your Audience. […]


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed

My Flickr Gallery

RSS My DeviantArt Gallery

My products at Renderosity

go to

Get Poser 8

Get Poser Pro

Get the Poser 7 Revealed book

Free 3D Models at DAZ3D

DAZ Studio 4 – Create 3D Art for Free

New 3D Artists Start Here

Get Anime Studio

Get the Secrets of Poser Experts book

Get the Digital Beauties book

%d bloggers like this: