Pls help me improve my web graphics

Factual Questions
1

I must confess I am more of a coder than a graphics person. I am working in my spare time on a website that utilizes scripting languages, but before I proceed more I need to learn to make better graphics. I have a copy of Photoshop limited edition, and I did the best I could with what I know about graphics, but someone involved in web design was concerned that my images were ‘pixelated’. I dont’ know what that means or how to fix it. Also, I dont’ know what the proper number of pixels per inch to use is. Could someone who knows about this please take a look at my site, www.22trains.com, and comment on my imaging?

P.S. Please be a professional, and don’t try to upload anything in the ‘upload’ section. Yeal, I know, I will get the password protection up and running soon.

2

  1. Resize your images with Photoshop before you upload them onto the server.
    1a. Web browsers aren’t meant to be sophisticated graphics programs, and give lousy results when they’re forced to resize graphics.
    1b. Even though the browser displays a small image, the original, larger file still has to be transmitted from the server, meaning slower page loads for your audience.

  2. The gray and red Santa Fe engine image appears to be enlarged from a smaller original, therefore losing sharpness. It also looks like it got run through either the blur or median filter, but of course I don’t know what you’ve done. If you can, start with a higher-resolution original.

  3. I think standard monitors are 72 dpi, but really, ignore the “per inch” portion for web graphics, because everyone’s monitor will be different in both size and resolution. Instead, just figure out how many pixels tall and wide you want your pictures to be.

3

The images need to be brightened just slightly, which would also need a touch higher contrast to make them look better.

Always work with large original images, and when you’re happy with the result, resize them to the correct dimensions, and save. You have the same pics used on multiple pages, but at different sizes. You should instead have multiple copies of the image at each of the fixed dimensions.

The resolution of the image in your paint program should be 72ppi, which is 72 pixels per inch. Anything larger will be a waste of bandwidth, and anything smaller will look pixelated.

Pixelated means you can see the individual dots that make up the image because they have been enlarged to bigger than the monitor’s native resolution.

Overall, your website isn’t too bad. I have a suggestion, though: instead of using the train images as separate pics, you should combine a few of them with a title image to place at teh top of each page.

But that might be a bit more than you think you’re capable of. If so, do as you will. I’m willing to assist if you need it, though.

  • GuanoLad, website designer
4
      • The train pictures aren’t the first thing I notice is off–it’s the blinking crossing-signal gif’s. They definitely look pixelated–you can see individual dots in the images that stand out harshly. That’s one thing you generally don’t want.
  • The main cause of this I see (on many websites) is that images are resized with HTML code. Some web page editor software does this very easily, so people use it and then can’t figure out why their images look so crappy. —>You know how in an image tag, you can put “width” and “height” attributes, to force an image to display a certain size? Well don’t do that, UNLESS your resize just happens to fall on proportions that are evenly divisible into BOTH width and height dimensions. But then, -you could save bandwidth by just using an image editor to resize them smaller anyway–which is what you should do.
  • To resize an image, open it in an image editor, change it to 24-bit color (if it isn’t already), and then resize it (if your software has different color sampling methods, see which one looks best), then re-save it in the original fomat. To resize an animated gif, you have to separate out every frame as a separate image, and then re-size all those frames as separate images: change them to 24-bit color, then resize, and then save each as a gif and recombine all back into an animated gif.
    ~
5

Woah! Here’s a tip:

Your maps of Southwest Missouri railroads are in bitmap format. They should be JPG or GIF. Bitmaps are way too large and can take forever to download, even on broadband.

6

Almost all the info in this thread is spot on, but I see this common bit of misinformation very regularly. And in the true spirit of this messageboard, I’d like to correct it. Web browsers don’t care about resolution of images at all. It is 100% completely, totally irrelevent. Unless you tell the browser to resize the image, they display pixels as pixels and that’s it. It makes no difference to either file size or display quality what you set the resolution to, if the number of actual pixels remains the same. Resolution is a relation between physical size and pixel size, so it is meaningless unless both of those are involved.

You can easily test this yourself: Try making an image that is 200x200 pixels and save copies with the resolution set to 5 ppi and 600 ppi. The files will be exactly the same size and will appear identical in a web browser. If you were to try printing them out, however, one would be huge and blocky and the other would be tiny and crisp. In this regard creating graphics for web use can be simpler than for print. When creating graphics for a web page, you need to consider the actual number of pixels in the image and how much space it will take up in relation to the rest of the page and to typical monitor display settings.

7

You know, at the back of my mind I’d always suspected this, but I read it so often in books and HTML support websites by ‘experts’ that I assumed that my theories were wrong.

What would happen if they tried to print a webpage scattered with graphics of different resolutions?