6 Tips for optimizing pictures in web Design

For example, a pixel-or raster-based file format is more commonly used in web page design, such as JPG, GIF, or PNG. In contrast, graphics such as logos in graphic design areas may be used in different sizes, so the most used formats are vector formats such as EPS and AI. However, vector formats for Web pages, such as SVG or HTML5 canvas, are not widely used and are not supported by all browsers.

In addition, the graphics for the web end are based on their own related processing. One of them is that you have to keep your mind on the size of the file, because you need to make your pages load faster and better. As a web designer, you should minimize the number of HTTP requests for images-whether by reducing the number of pictures you use or by integrating them into CSS sprite--and making sure you choose the right image format to balance the image size and quality.

Photoshop is an industry standard tool used by graphic designers and web designers. Here are some simple tips to use when creating web-side images.

1. Save a picture in a Web format

In web design, you have to make sure that your image size is smaller and better. Of course, you can discard this principle when you want the picture to appear intact.

The perfect way to create images in Photoshop is to balance the quality with the file size.

One of the common mistakes that web designers make is to use the Save As command instead of using the Save as Web format.

The Save as Web format allows you to save an image in a format that is optimized based on a Web page design, including image quality, image resolution, browser compatibility, and file size.

This command will have a dialog box that you can use to fine-tune your image. When you adjust the image settings, it will show the size of the file and the quality of the image.

By contrast, the Save As dialog box does not have so many choices, and it tends to be saved into larger images.

The following is the same image saved separately using Save As and save for web format, note that there is a distinct difference in the size of the files saved by the two.

2. Consider using Web security colors

Web security colors are displayed correctly on most browsers and monitors, which ensures that your Web pages look the same wherever they are.

Here are two simple ways to make sure you're using a web-safe color.

Only Web color option

In the lower-left corner of the Color picker window, check the only web color option. This causes the window to display only the web-safe color.

Convert a color to a web-safe color

Click on the small square in the Color picker window to convert any color to a web-safe color.

3. Consider using the "line-by-scan" option of JPG

JPG file format is an ideal choice for photography and high-resolution images. According to your target audience, progressive scan is sometimes a good choice. When the site is loaded, images of this format will gradually appear (even in the modern broadband connection of the Internet age, this type of wait time is no longer a problem). This allows the user to quickly preview the image before it is fully loaded, making it feel like the page will react faster.

4. Save the image in a transparent PNG format

When you need transparent images, the PNG format is your best choice.

Most mainstream browsers support the transparent PNG format, and if you have to cater to IE6, you need to be aware that some of the transparent parts of the PNG format will appear dimmed in IE6. There are ways to solve this problem (ie PNG fixes JavaScript libraries), but it can be tricky to implement.

5. Save the animated picture in GIF format

GIF image formats, while most of the cases can be replaced by the PNG format, are still useful. Although this format is rough relative to PNG and JPG, the GIF format itself has a very powerful feature that supports animation.

Although there is a format for PNG pictures with an extension of apng (which represents a portable Network Graphics animation), few browsers support this format.

If you need to choose between PNG and GIF, PNG is usually a better choice, unless you need to make a dynamic picture.

6. Please note that the "Download Time" information

It is important to ensure that a site is loaded quickly and looks beautiful. This also embodies the importance of saving and optimizing pictures. As shown in the following illustration, see how a simple change in the file Save option can affect the size of the picture.

The better way to do this is to reduce the image quality until you find that the quality of the image display is significantly reduced.

When you are optimizing an image, always focus on the download time, which will appear in the lower-left corner of the Save as Web Format dialog window. As you can see in the following image, the picture you are saving under the current settings is approximately 2 seconds in the DSL network connection state.