PS image storage for Web format optimization

Save as Web format

The internet is almost one of the biggest art, graphics, and photo sharing platforms of the day, so it's important to have some basic knowledge that is saved as a Web page format. In fact, saving as a Web page format is a balancing art-you have to balance the image quality with the file size of the media in order to meet your personal needs.

In places where speed is relatively important (such as loading a website quickly), you may need to sacrifice some image quality. Where quality is important, there is a need to sacrifice a little speed. The purpose of this course is to introduce you to a number of ways to balance the two factors while preserving very good image quality.

　Lossless vs Loss Data

Although there are a lot of picture formats (for example, Jpeg,gif and PNG), depending on the compression method, all images can be further categorized into two main categories: lossless and lossy. Lossless data compression ensures that the image is reproduced without any quality or information loss, and that the result of lossy data compression is that it can result in loss of quality and information. The most popular lossless media formats in the field of graphic design include GIF, PNG, and TIFF, while JPEG is the most popular graphic format for lossy compression.

　How to save a Web page format with Photoshop

PS has a very good way to optimize images for a Web page. In PS, select File > Save as Web Format or use shortcut key ctrl+alt+shift+s. A new dialog box will pop up, and here are all the settings for saving and optimizing the picture for the page.

Figure 01

Illustrate how to use the settings in a dialog box by using some of the following life examples.

　　Store images for a Web page

Because of the large file size of the pictures, they are more often saved in lossy compression format. Even when taking pictures, the camera tends to use lossy formatting such as JPEG to save the picture, as opposed to the raw format of several times the size.

JPEG is the preferred picture format for everyday use, and it is named after its creator, the joint image panel. JPEG can be a standard because it retains high quality while compressing image data, and can approach the effect of lossless images on relevant information.

When you save a picture, there are several Web page format presets to choose from. For a picture, you should consider whether to use JPEG low, JPEG, or JPEG high. Looking at the contrast below, you can find that the picture in the case is compressed and does not have much quality loss. Compared to more than 250KB of source files, we choose medium quality or high quality compression preset to get a size of no more than 30KB, and have the right quality of the picture.

Figure 02

　GIF image

Sometimes you will be asked to save in a lossless format to best optimize any work you are creating. This is often encountered in web design, in the layout of the use of less than ordinary pictures of color.

GIF, called "Image Interchange Format", is a picture format that uses only 256 color palettes, making it ideal for Web pages that do not need to use too wide gamut. GIF can also set a single pixel to be transparent, but this is not within the scope of this tutorial. The following shows a contrast between a GIF image (with 256 colors) and a JPEG image, which has the same size. As you can see, lossless GIF images are better accessible to source files.

Figure 03

Because the GIF image is limited by 256 colors, it should have been rarely used in pictures, but they are suitable for images that use solid colors or limited colors. For a picture, it is usually not a JPEG lossy compression, or GIF lossless format.

High quality images and lossless png

PNG, called "Portable Network Graphics," is a lossless format similar to GIF, but it supports richer colors (sometimes making it larger), and it can support alpha channels with transparent layers rather than single transparent pixels.

PNG images are increasingly replacing GIF, mainly because PNG is generally better than GIF in support of richer colors. Although it does not want GIF to have broad support, it is undoubtedly moving in that direction.

PNG is the best option when the image must remain intact for transmission on the network. Rather than JPEG transfer pictures, (PNG) will make you larger picture sizes, but sometimes this is a very necessary sacrifice. When a picture contains sharp lines and must retain clear text, PNG is usually a better choice and, of course, it is ultimately up to the designer to decide which format to use.

Category:

• PS Getting Started Tutorial