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?
4
-
Do you save them as jpg? In that case try save as gif or png instead.– Mikael CarlssonApr 11, 2019 at 13:40
-
Most of the time, text on a website should be actual text markup and not placed inside an image. Could you show us the image in question, so we can see what you mean by «not as good»?– theyveApr 11, 2019 at 15:11
-
Hi. Welcome to GDSE. There could be many reasons for your problem. Can you please edit your question and provide some more information. An example image would help. What are you comparing it against when you say "isn't as good"? Does your computer have any system zoom enabled? What format are you saving the image in? Have you applied too much compression to the image?– Billy KerrApr 11, 2019 at 16:53
-
My personal rule is that unless I absolutely have to, I won't put any text in the image itself. Only on top of an image or beside it. Especially these days when images often need to be responsive and browsers render resized images poorly. There are some exceptions though... — If the image looks good as is, but not in the browser/in the website or whatever, my guess would be it's getting resized and that makes the image slightly blurry.– JoonasApr 12, 2019 at 8:02
Add a comment
|
3 Answers
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.
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.
