When you need to store a picture in a Web page format, it is always necessary to consider its quality and size in order to make sure that the picture is clearly displayed without a card. This tutorial will teach you the knowledge you need to know about the "Save as Web format".
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 mainstream lossless media formats in the field of graphic design include Gif,png, and TIFF, while JPEG is the most popular lossy compression graphics format.
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.
I'll show you how to use the settings in the dialog box by following some examples of life.
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.
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 comparison of 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.
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