How to save images for web-pages? (format/size)

What is the best way to store images for web-sites? What si开发者_开发百科ze I should not exceed?

Now, I save all interface-files in png (mostly in sprites) and usual images in jpg's. Some images are about 100-150Kb.

What quality and compression should I choose while saving images?

Preparing Images

To prepare images for presentation on the Web, follow these steps:

• Begin a new file. If it’s a photo or original artwork, use 300 dpi as the resolution. If you are creating something simple, set the resolution to 72 dpi.
• Use the drawing, text, shape and other tools provided in the graphics program to create your image.
• Save your file in the native file format (a file type meant for editing that is specific to the image editing program) of the program you are using. For example, a Photoshop document creates files with a ".psd" extension. If you need to make a change or edit later, do it in this file rather than on the Web.
• If necessary, lower the resolution of the image to 72 dpi.
• If necessary, resize the image to the height and width in pixels specifications desired.
• Save the file in a Web-ready file format, usually a GIF (most programs give you several choices for file types), finding a balance between the way the file looks and an appropriate file size. Some image programs will let you preview the final file output, whie in others, you have to save it and load it in the browser to see the final effect.

---

Preparing Photographs

To prepare photographs for presentation on the web, follow these steps:

• Download the photo from your digital camera or scan in the photograph. The process for this varies depending on the software bundled with your scanner or camera. The image will probably end up in "Your Photos" on Windows, or the "Photos" folder on a Mac, unless you chose some other folder as the default destination.
• Use the color correction, drawing, text, shape, and other tools provided in the graphics program to alter and improve your image.
• Save a copy of your file in the native file format of the program you are using. Make later changes or edits in this file rather than on the web. With photographs, save an untouched version of the photo in case you want to use it again for another purpose.
• If necessary, lower the resolution of the image to 72dpi.
• If necessary, resize the image to the height and width in pixels specifications desired.
• Save the file in a web-ready format, usually a JPEG, finding a balance between the way the file looks and an appropriate file size.

Making images web-ready is all about compromise. In general, the better your image looks, the larger the file size will be. The larger the file size, the longer it will take to download. Your job is to find a compromise between quality and file size. Some things to consider are:

• Is this image conveying crucial information? If so, go for higher quality.
• Is the image on a page with a lot of other images? If so, make the file size smaller.
• Will your web visitor be able to detect that the quality of a photo or image isn’t very good?
• Make images of people fairly high quality because visual acuity is strongest with people’s faces.

(Source)

For your images, here is a tip:

Do not scale images in HTML

Web page designers sometimes set image dimensions by using the width and height attributes of the HTML image element. Avoid doing this since it can result in images being larger than needed. For example, if your page requires image myimg.jpg which has dimensions 240x720 but displays it with dimensions 120x360 using the width and height attributes, then the browser will download an image that is larger than necessary.

(Source, see another tip)

This all depends on what the image is for. If you're generally adhering to a web-safe palette, gifs will come out smaller and clearer than a jpeg. Jpeg's are for photos. For jpegs to handle websafe colors well, you need to save at 88%+ quality, which increases file size. Png's generally have the best quality, and in some cases (when you don't need transparency) can come out smaller than jpgs, and comparable to gif. So, for jpeg photos, 80 quality, (sometimes even 75 for smaller images) will get you decent results and small filesize. Use gifs / png for site imagery generally. As far as images on a page, I try not to exceed 30kb total, assuming the page isn't something that is focused on photos / imagery. Hope this helps.

It depends on what your image is of, and what the quality needs to be, whether you choose quality over page loading etc.

I personally save all mine in .png but IE has a problem rendering the colour correctly in .png so if you are using them for aestetical purposes I would save .jpg

As to the size of the image, like said it depends really on the quality you want your image and how it affects performance if it is a large file.

i usually use save for web mode that exists in photoshop. obviously the lower size is best. The sizes that you talking about (100-150) are good or not in relation to the dimension of the image. Anyway i advice you to use sprites and when possible in jpeg format.

something like 75-80% quality are good enought to a good quality of image

And please pay attention to the cmyk mode, that cause problems in some browsers