Saving images for web with text

At my work I create assets for web. We have been saving images that are 686 x 391 px. I’ve noticed that the quality of images with text isn’t as good. Is there a recommended size for images with text that will allow for the web page to load fast but also produce a good quality image?

Answer

At my work I create assets for web. We have been saving images that are 686 x 391 px. I’ve noticed that the quality of images with text isn’t as good.

Always use a lossless compression format throughout your workflow.

If you want to try your final output in .JPG, particularly if there’s anything more than a vector illustration, then use a very low amount of compression and try saving several copies while increasing the compression to determine what loss you are willing to tolerate. Always be prepared to use your lossless compression format image when the text is too small for .JPG.

Since you are working on creating images for websites why not create the image without text, and use CSS to overlay the text on the page. That makes it easy to change, even animate, the text without having to redo the drawing.

All these images are exactly 686×391, found on the Internet, created by various people, and use text. All the text is readable, there’s no reason you can’t have small text on a small image and still be able to read it.

Tiny Text Example

Attribution
Source : Link , Question Author : Jessica Gersky , Answer Author : Rob

Leave a Comment