Mobile app version of vmapp.org
Login or Join
Turnbaugh909

: Is it a photograph or something closer to a vector image like a schema? In the first case, JPEG is your best choice: PNG images would be often larger. This doesn't prevent you trying PNG

@Turnbaugh909

Is it a photograph or something closer to a vector image like a schema?


In the first case, JPEG is your best choice: PNG images would be often larger. This doesn't prevent you trying PNG in the preview and seeing how it affects the quality and the size, but in most cases, you would be disappointed.

When using JPEG, don't limit yourself to the compression levels from the list (i.e. 20, 40, 60, 80 and 100). In a few cases, picking, for example, 75 instead of 80 produced smaller image, while the quality drop was practically unnoticeable.
In the second case, JPEG will usually result in important loss of quality, while PNG won't.

Also, if the image has no gradient, try PNG-8 instead of the default PNG-24, and experiment with number of colors to see how it affects both the size and the quality of the image.

For example, it's not unusual for PNG-8 with 16 colors to produce much smaller files compared to PNG-8 with 32 colors or higher or compared to PNG-24, while the drop in quality is barely noticeable.


The dialog displayed when going to File › Save for Web and Devices encourages experimentation by letting you quickly preview different settings; also remember to use "2-Up" and "4-Up" tabs at the top left corner of this dialog.

Finally, remember golden rules of a web designer:


Do never put text inside images. There is no need to waste user bandwidth when you can simply include text in HTML, not counting other disastrous consequences of putting text in images (such as killing SEO, auto-translation, accessibility, etc.)
Think twice whether the image is really useful for your users. Does it enrich the content, or just add more visual clutter? Couldn't it be replaced by the elements provided by HTML 5 and CSS 3?
Do never create images which would be always shown smaller than their real size. If the thumbnails of the products of an e-commerce site are 400×300, don't reuse the full-scale 1 200×900 photos, unless you really want to kill your server's and your clients' bandwidth.

10% popularity Vote Up Vote Down


Login to follow query

More posts by @Turnbaugh909

0 Comments

Sorted by latest first Latest Oldest Best

Back to top | Use Dark Theme