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?
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 686x391, 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.
Isn’t as good
As good as...?
Are you comparing the text on the image with a similar text on the webpage on the same size?
The real text displayed on a webpage has subpixel detail, which makes it sharper than an image that only has full pixel values. That is why Rob's option:
Why not create the image without text, and use CSS to overlay the text on the page.
is one of the best recommendations you can use.
It also can have different size options, retina 2x or 3x.
You could have some compression artifacts, or you can have a "not so" optimized aliasing on your image.
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?
What text... I♥NY? Or the full Hamlet play?
What size, what font, what kerning, what line spacing, what contrast, what color, what aliasing, what scale, what screen device...
So, the answer is no.
With today's speeds 600 pixels is not a big deal. Make it bigger, make it PNG and scale down the image from the CSS code.
For anything that has flat color, and especially text, .png is a good format. I would also ask if you guys can do .webp format as well as it tends to be smaller in bytes in general.
Use this app https://squoosh.app Its made by Google, and it will allow you to further optimize / scale your images as much as possible.