Let’s take a slice of a flower photo and export it out at six different quality settings. If you are posting a flower photo just to celebrate the arrival of spring, then a much lower quality would probably be fine. If you are posting a flower photo to a botanical encyclopedia website, you probably want it to be fairly high quality so small distinguishing details can be clearly seen. Always keep in mind what the purpose of the graphic is. When you hit a quality level that is unsatisfactory, then back up to the lowest level that was still good enough for your purposes. If the reduced level looks good enough, then try another reduction. One strategy for selecting the best level is to start with a fairly high quality setting and if it looks OK, try reducing the quality a bit. You should always select the lowest quality that is still suitable for your purpose. Or you might be asked to select a percentage from 0% (lowest quality) to 100% (highest quality). You might be given a number range, for example 0 (lowest quality) to 12 (highest quality). You might just see a few choices like: low, medium, high, or maximum. When you export to JPG from an image editing program, you’ll be prompted to select the quality level you want.
It’s easiest to compress a JPG (also called JPEG) because there’s just one thing to consider: quality. For information about compressing PNGs or GIFs, please scroll down this page.
.png compressor for web how to#
We’ll take a look at how to get the best compression in each of the three file types starting with JPEGs. If you have a simple graphic with few colors and solid areas, then your best choice will be a GIF or PNG-8. If a similar photo needs to have lossless compression or transparent areas, then a PNG-24 will be required. If your image is a photo with lots of colors or an illustration with gradations and you want to squeeze the file size down, JPEG will probably be your best choice. The more compression, the smaller the file will be and the faster it will load on a webpage.īut first, you’ll need to decide which of the three file formats you want to use. In most image editing applications this is done by the selections you make in the “Save As” or “Export As” dialog box when saving a PNG, JPG, or GIF. The great thing is that Photoshop already has all those separate layers, if you created your image like a professional.The primary way to reduce the file size of an image is by increasing the amount of compression. This sort of work was industry standard in Games for decades, and still is. Without color or lines, this should compress very well in PNG or JPEG.Ĭombine the layers into a single image with JavaScript, and your whole "image" could be 15KB or less. Again, all you need is a single 4 bit channel (alpha or grey). You only need a 1 pixel tall image, which you can stretch. You could compress this down to a single 4 bit channel (alpha or grey). The vertical lines with no color or noise.You could probably do it in less than 200 bytes of JS. Even better, use JavaScript to generate the color gradient on the client. This will compress well in PNG and very well in JPEG. The color gradient with no lines or noise.The image from the question looks like a color gradient with vertical lines and some splotches/noise. If you really need to shrink an image, and all the easy suggestions don't work, the final answer is to break the image into compressible pieces and recombine them on the client with scripting. Pngcrush some_8_bit.png -bit_depth 8 -brute -rem alla -reduce some_8_bit_small.png Pngout -c3 -d8 -y -force some_24_bit.png some_8_bit.png Here are the instructions how to convert png24 images into png8 for ie6 goodness, all through the command line using open source tools (i think) pngquant +pngout + pngcrush.ġ- quantize image into 256 (so basically png8′s look crap with large sprites or sprites with a large colour range). You will be able to control compression, number of colours, meta data settings and much more, and select image format (JPEG, GIF or PNG) for your output file.Īnother possibility is to use a combination of pngquant, pngout, and pngcrush, as described here, but this is from the command line. The image optimizer is lightweight, fast and simple to use, yet powerful for advanced users. It uses with a side by side (dual view) or single view interface to compare the original with the optimized image in real time and instantly see the resulting file size.
.png compressor for web free#
Radical Image Optimization Tool (RIOT for short) is a free image optimizer that will let you to visually adjust compression parameters while keeping minimum file size.
0 kommentar(er)
