image - 如何为网页保存图像？ (格式/尺寸)

Question

为网站存储图像的最佳方式是什么？
我不应该超过什么尺寸？

现在，我将所有界面文件保存在 png(主要是 Sprite )中，并将常用图像保存在 jpg 中。一些图像大约为 100-150Kb。

保存图像时我应该选择什么质量和压缩？

Answer 1

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 )