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

Question

What is the best way to store images for websites? What size should I not exceed?

Now I save all the interface files in png (mainly in sprites) and regular images in jpg. Some images are about 100-150Kb.

What quality and compression should you choose when saving images?

Answer 1

Image Preparation

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

• Start a new file. If you have a photo or original illustration, 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 presented in the chart to create your image.
• Save the file in the format of the native file (the type of file intended for editing, which is typical for editing program images) of the program that you use. For example, a Photoshop document creates files with the extension ".psd". If you need to make changes or change later, do it in this file, and not on the Internet.
• If necessary, reduce the image resolution to 72 dpi.
• If necessary, resize the image to the height and width in pixels required specifications.
• Save the file in a format ready to work on the Internet, usually GIF (most programs give you several options for file types), finding a balance between what the file looks like, and the corresponding file size. Some graphics programs will allow you to view the final file, whie in others, you must save it and load it in a browser to see the final effect.

---

Photo preparation

To prepare photos for presentation on the Internet, follow these steps:

• Upload a photo from your digital camera or scan on a photo. The process for this varies depending on the software that came with your scanner or camera. The image will probably end in “Your Photos” on Windows or the “Photos” Folder on Mac, unless you select another default destination folder.
• Use color grading, drawing, text, shape and other tools in the graphics program to change and improve the image.
• Save a copy of your file in the native file format of the program you are using. Make changes or changes to this file, not the Internet. With photos, save the untouched version of the photo if you want to use it again for another purpose.
• If necessary, reduce the image resolution to 72 dpi.
• If necessary, resize the image to the height and width in pixels required specifications.
• Save the file in a web-ready format, usually in JPEG format, a balance between what the file looks like and the corresponding file size.

Creating images on the Internet 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 task is to find a compromise between quality and file size. The following things to consider:

• Is this image a transmission of important information? If yes, then go higher quality.
• Is the image on the page with a lot of other images? If so, make the file smaller.
• Will your web visitor detect that the quality of the photo or image is not very good?
• Make images of people of rather high quality, because visual acuity is the strongest with peoples faces.

( Source )

Answer 2

For your images, here is a hint:

Do not scale images in HTML

Web page designers sometimes set image dimensions using the width and image height attributes of the HTML element. Avoid doing this, as it may cause larger images to be needed. For example, if your page requires an image of myimg.jpg, which has dimensions of 240x720, but displays it with dimensions of 120x360 using width and height, then the browser will load an image that is larger than necessary.

( Source , see another review )

Answer 3

It all depends on what the image is intended for. If you tend to stick to a web safe palette, gifs come out smaller and sharper than jpeg. Jpeg for photos. In order for jpegs to handle websafe colors well, you need to save 88% + quality, which increases the file size. Png tends to be of better quality, and in some cases (when you don't need transparency) it may be less than jpg and comparable to gif. Thus, for jpeg photos, quality 80 (sometimes even 75 for smaller images) will bring you decent results and small sizes. Use gifs / png for images of the site as a whole. As for the images on the page, I try not to exceed 30 kilobytes, assuming the page is not something that focuses on photos / images. Hope this helps.

Answer 4

It depends on what your image is and what quality, regardless of whether you choose quality for page loading, etc.

I personally save all of mine in .png, but IE has the problem of displaying .png colors correctly, so if you use them for aesthetic purposes, I would save .jpg

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

Answer 5

I usually use save for the web mode that exists in Photoshop. Obviously a lower size is better. The sizes you are talking about (100-150) are good or not the size of the image. In any case, I advise you to use sprites and, if possible, in jpeg format.

something like 75-80% quality is good enough for good image quality

And pay attention to cmyk mode, which causes problems in some browsers.