35 by 35 px image with legible text
neila_stewart (13 points) | Mon, 2009-06-08 02:57Hello: I have been looking for advice on how to make very small images for the web. I need a thumbnail illustration with an image and text. If I save it at 72 dpi and 35 px, it comes out blurry and 4 kb. If I save it at 600 dpi, it is more clear and about 20 kb. By itself, that is not large, but with all the other info on the web page, it can start to add up. I read there are small fonts made for this type of application. Does anyone know of low cost or free fonts for this purpose? Does anyone have other ideas on how to make crisp thumbnail images? I'd like something like Univers Condensed. Any advice would be appreciated.
Thank you.
Neila
Commenting on this Forum topic is closed.
| Attachment | Size |
|---|---|
| special offers 600 ppi.png | 19.86 KB |
| special offers 96 ppi.png | 5.19 KB |
if you're working on the web, you need to learn that "dpi" means nothing to you. it's all about the pixel size.
so what you really have are a 35x35 image and a 214x215 image. it's not surprising that it's easier to read the image that's 7x the size. as far as putting them on a web page, you're comparing apples to oranges, since they take up significantly larger amounts of screen real estate.
if you try to squeeze a lot of text into a 35x35 image, it's going to be hard to read, regardless of fonts. i don't have a list of easier to read fonts at small sizes on the web, but i'd suggest experimenting a bit. maybe someone else has a suggestion of a specific font.
Are you talking about making icons? 'Cause there are some excellent online tutorials for that. Just Google.
Mara
Thanks for your advice and information. I feel sheepish, but I have to ask another stupid question. If you put an image that is 214x215 pixels into a confined space designed for an icon of 35 x 35 pixels, then it won't take up more space - correct? But it still will be a larger file size and a slower download.
I've been looking at the icon tutorials through Google and will continue to pursue that.
Thanks for your help. Any other ideas out there?
Neila
Because of the limitations of a pixel based screen you may need to revise smaller sizes. It's not just a matter or reducing the size proportionately.
always use an image that is the size you want it to be. *ESPECIALLY* if it has text on it that you want people to read. but really, always do it. even if you have to make 6 versions of it at the different sizes you need it to be. the browser shouldn't be resizing your images based on HTML tags.
Hi Greg:
May I ask why? I don't mind making six different versions, but I need to understand what would happen if I used the larger size icon in my 35 px by 35 px box. I've been testing these on the web and I haven't seen any problems (but I'm concerned that I've missed some issue).
FYI, I watched a good video on making a web 2.0 icon on YouTube and the presenter did not address the issue. In fact, he made his icon quite large.
Thank you again.
Neila
the browser does not resize graphics as well as a photo editing package like photoshop will. it also is something that you can't completely predict, since you'll have people with different browsers and different operating systems.
not to mention the whole larger file issue, where you'll have the end user loading large versions of a file.
will you really have six different versions, though? that seems a big excessive. generally people have a thumbnail and a full-size version. sounds like you're making this more complicated than it really is.