If you are creating images, and you do not specify any kind of a blur effect, your images will not be blurry.

One thing to avoid though would be making images small then increasing the size and vice versa. It wont necessairly make it blurry, but it can make it pixelated which will not look nice.

They look fine on my computer, but when I upload them to a website and view them, they're blurry/pixelated.

How do I decrease a picture's size without it pixelating? (or can I?)

The best thing to do when resizing images would be to resample when adjusting picture size. I'm sure most if not all graphic applications have it. For Photoshop it appears within the Image size dialog box. There are different flavors of resampling. I use Photoshop and tend to leave the default of Bicubic. That has worked fine for all of the images I have worked with.

If you save as Jpeg you should play with compression settings untill you reach size/quality compromize. If you use gifs try to set the amount of cours you use...

What if they're .png files? Any tips when using that format?


Actually, what type of file is best to use for web graphics?

Use GIF, only if you had an animation. Otherwise use PNG (Portable network graphics) gives output best for transparencies and you can also use JPG with good compression size.

PNGs are lossless and can be saved in an 8 bit (gif) or 24 bit (jpg) format. They work quite well for web graphics.

Gifs are limited to 256 colors and uses a lossless compression. These support animation and transparency.

Jpegs have 16.7 million colors and use a lossy compressions so the more compression, the worse the quality of the picture.

Don't specify the image size in the html code. This causes the browser (as opposed to the graphics editor) to change the size of the image. It is not well adapted at doing this.

When I design any graphics that I may wish to resize, I try to always use vectors and paths as my base design. Flash CS3 has really great tools for this, both in the UI as well as AS3. They always resize well. I just keep a folder with my basic design, pull out what I need and resize it for the pupose of my project. When saving my images for the web, I use the same helpful hints and steps as outlined above.