Grainy web page graphics
August 31, 2007 6:30 PM Subscribe
Why do .jpg's I create for my web site appear grainy?
I am a relative newbie in web site development. I created a simple logo in Microsoft PictureIt that has the name of the company (created with text) and a simple graphic. Looks fine on the screen in all viewer programs. However, when I incorporate the logo into the html of the web page, when viewed the edges of the letters of the name look noticeably grainy. This happens whether I save the logo in .jpg or .gif, and doesn't seem to vary regardless of the number of pixels per inch I create it in. I have tried 8,259 combinations of factors so far and - no luck. Results are the same in Firefox and Internet Explorer. Any advice, hive mind?
I am a relative newbie in web site development. I created a simple logo in Microsoft PictureIt that has the name of the company (created with text) and a simple graphic. Looks fine on the screen in all viewer programs. However, when I incorporate the logo into the html of the web page, when viewed the edges of the letters of the name look noticeably grainy. This happens whether I save the logo in .jpg or .gif, and doesn't seem to vary regardless of the number of pixels per inch I create it in. I have tried 8,259 combinations of factors so far and - no luck. Results are the same in Firefox and Internet Explorer. Any advice, hive mind?
Is the browser resizing the graphic? - that's one issue that would result in decreased image quality no matter how you'd prepped the image - make sure your height and width tags in the html match the actual dimensions of the image.
posted by jalexei at 6:36 PM on August 31, 2007
posted by jalexei at 6:36 PM on August 31, 2007
Deej & jalexei are right - make sure the browser is not resizing the graphic any larger than it's original size. When you attempt to display a graphic larger than it's meant to be displayed, it becomes distorted.
Make sure you're not using too much compression when saving the graphic.
If this is a simple logo with a few colors (as opposed to a full-fledged photograph), you should look into the PNG format.
posted by tomorama at 6:44 PM on August 31, 2007
Make sure you're not using too much compression when saving the graphic.
If this is a simple logo with a few colors (as opposed to a full-fledged photograph), you should look into the PNG format.
posted by tomorama at 6:44 PM on August 31, 2007
This may be completely bonkers, or else I believe that someone would have mentioned this earlier, but HTML has (well, back in '99 at least...) a smaller set of colors available.. there may be an option in PictureIt to save in web safe colors.
posted by xorry at 6:53 PM on August 31, 2007
posted by xorry at 6:53 PM on August 31, 2007
also note that the more times you re-save a single jpeg the more the file degrades. You may want to save an original as a .psd or .tif and save your jpegs from the original file.
posted by beckish at 7:08 PM on August 31, 2007
posted by beckish at 7:08 PM on August 31, 2007
Like others said. use PNG. You'll notice lots of fringing effects on jpgs on the web if people use to much compression, but being artifact-free on things like text and vector graphics in JPEG is difficult.
So use PNG or GIF and everything should be fine.
This may be completely bonkers, or else I believe that someone would have mentioned this earlier, but HTML has (well, back in '99 at least...) a smaller set of colors available
That's totally wrong. It also wouldn't matter if were true, because the image is only linked from HTML.
What was true was that some really old computers could only display 256 colors, but not the same 256 colors as other old computers. There were 216 or something that would work on every old computer without dithering, and this was called the "web colors" or something. I don't really remember them well because I never had a computer with a web browser and without a truecolor display. In fact I never even heard of them until years after learning HTML.
There are 224 colors you can use in plain HTML documents, and an infinite number of colors you can specify in CSS.
posted by delmoi at 7:20 PM on August 31, 2007
So use PNG or GIF and everything should be fine.
This may be completely bonkers, or else I believe that someone would have mentioned this earlier, but HTML has (well, back in '99 at least...) a smaller set of colors available
That's totally wrong. It also wouldn't matter if were true, because the image is only linked from HTML.
What was true was that some really old computers could only display 256 colors, but not the same 256 colors as other old computers. There were 216 or something that would work on every old computer without dithering, and this was called the "web colors" or something. I don't really remember them well because I never had a computer with a web browser and without a truecolor display. In fact I never even heard of them until years after learning HTML.
There are 224 colors you can use in plain HTML documents, and an infinite number of colors you can specify in CSS.
posted by delmoi at 7:20 PM on August 31, 2007
Do you have anti-aliasing on? Do you have dithering on? Can you give us some screenshots or samples?
posted by Optimus Chyme at 7:24 PM on August 31, 2007
posted by Optimus Chyme at 7:24 PM on August 31, 2007
Response by poster: These are great suggestions and I'll try them out. BTW the logo is here. It's the "Kantner & Company" logo at the right. And yes, I am scaling it to fit the page rather than saving it at the size I want. Thanks!
posted by charris5005 at 7:33 PM on August 31, 2007
posted by charris5005 at 7:33 PM on August 31, 2007
Are you trying to use varying levels of transparency? Only PNG supports an alpha channel, of common formats. Otherwise, you get a opaque/transparent binary pixel, with no middle ground.
posted by cmiller at 7:39 PM on August 31, 2007
posted by cmiller at 7:39 PM on August 31, 2007
Well, the scaling is a definite problem, but the original is ragged as well. It's here at original scale.
It's hard to say why it's so ragged without knowing how it was created, but I think you need to go back to the original image and see how it looks. If it's as chunky on the edges as the full scale one I linked to, you may just need to start over.
posted by The Deej at 7:47 PM on August 31, 2007
It's hard to say why it's so ragged without knowing how it was created, but I think you need to go back to the original image and see how it looks. If it's as chunky on the edges as the full scale one I linked to, you may just need to start over.
posted by The Deej at 7:47 PM on August 31, 2007
This may be completely bonkers, or else I believe that someone would have mentioned this earlier, but HTML has (well, back in '99 at least...) a smaller set of colors available
There used to be great concern and hoopla re: the quite limited web-safe color palette, but the color range of modern monitors has defeated the problem.
A sample would be very helpful.
posted by misterbrandt at 7:52 PM on August 31, 2007
There used to be great concern and hoopla re: the quite limited web-safe color palette, but the color range of modern monitors has defeated the problem.
A sample would be very helpful.
posted by misterbrandt at 7:52 PM on August 31, 2007
And yes, I am scaling it to fit the page rather than saving it at the size I want.
Yeah...that's a real common mistake people make. You should never scale images in html to fit the layout. For the best results, always create new scaled versions to fit the layout.
I'm not that familiar with Picture It. I know it's an image editing app. Sort of a limited version of Elements? Does it do text? Or did you scan the text from another source? Like a business card? It certainly does not look like you created that logo from the ground up in PictureIt.
posted by Thorzdad at 8:07 PM on August 31, 2007
Yeah...that's a real common mistake people make. You should never scale images in html to fit the layout. For the best results, always create new scaled versions to fit the layout.
I'm not that familiar with Picture It. I know it's an image editing app. Sort of a limited version of Elements? Does it do text? Or did you scan the text from another source? Like a business card? It certainly does not look like you created that logo from the ground up in PictureIt.
posted by Thorzdad at 8:07 PM on August 31, 2007
OK, I just did a quick remake of the logo. It's not the exact same font, but it's close. It's here.
Even if you scaled that down to fit your web page, it would still look smooth.
As I said, I'm not sure how the image was created, but it must be that the original has some flaw in its creation. You are welcome to download my version to test if you want. Or to keep.
Don't start worrying about PictureIt or anything. If you have Photoshop Elements, you have all you need. Another program won't help, it will just confuse things.
posted by The Deej at 8:13 PM on August 31, 2007
Even if you scaled that down to fit your web page, it would still look smooth.
As I said, I'm not sure how the image was created, but it must be that the original has some flaw in its creation. You are welcome to download my version to test if you want. Or to keep.
Don't start worrying about PictureIt or anything. If you have Photoshop Elements, you have all you need. Another program won't help, it will just confuse things.
posted by The Deej at 8:13 PM on August 31, 2007
Sorry, I thought you had Photoshop Elements. My brain is fried. Maybe PictureIt is not meant to do what you want.
posted by The Deej at 8:14 PM on August 31, 2007
posted by The Deej at 8:14 PM on August 31, 2007
In short, use an appropriate program, create it from the ground up, save it at the size you want it to display, without too much compression. Don't get bogged down worrying about websafe colors or anything like that, because that's not the issue.
posted by The Deej at 8:17 PM on August 31, 2007
posted by The Deej at 8:17 PM on August 31, 2007
Oh, I see the linked image now. It looks like you are maybe over-compressing? It looks like a GIF with the palette size turned waaaay down, so you lose all the anti-aliasing intermediate color pixels (the grays between the logo and the background).
posted by misterbrandt at 8:43 PM on August 31, 2007
posted by misterbrandt at 8:43 PM on August 31, 2007
Some pointers about scaling:
1) Don't scale images in HTML, always do them in a program
2) Only scale down
3) Don't scale things more then once, (unless you're dividing the image size by an integer). In other words, start with your original, then scale to the size you want. And if you want it another size, start with the original rather then the second copy.
posted by delmoi at 8:52 PM on August 31, 2007
1) Don't scale images in HTML, always do them in a program
2) Only scale down
3) Don't scale things more then once, (unless you're dividing the image size by an integer). In other words, start with your original, then scale to the size you want. And if you want it another size, start with the original rather then the second copy.
posted by delmoi at 8:52 PM on August 31, 2007
Is the text in the original file set to be anti-aliased? Because maybe if it isn't, in combination with scaling, that could make it look more jaggy.
posted by slightlybewildered at 10:14 PM on August 31, 2007
posted by slightlybewildered at 10:14 PM on August 31, 2007
Resize your graphics in photoshop rather than having the browser do it. The browser doesn't do as nice a job. The 'graininess' you see is just aliasing along the edges.
posted by DarkForest at 4:08 AM on September 1, 2007
posted by DarkForest at 4:08 AM on September 1, 2007
Response by poster: Hey guys.... I just came back to check responses and I am just floored at all the good advice and help. Thank you so much, not only for fixing the graphic but also for advancing my (admittedly limited) education in these things. You're the greatest.
posted by charris5005 at 2:44 PM on September 1, 2007
posted by charris5005 at 2:44 PM on September 1, 2007
This thread is closed to new comments.
First thought is that you are saving at too much compression, but that wouldn't explain the .gif problem, I don't think. So it could also be that you are scaling the image up or down to fit the web page instead of saving it at the size you want.
Also, are you connecting through AOL? AOL re-compresses images by default, resulting in some horrible looking graphics.
Again, linking to a sample would be very valuable.
posted by The Deej at 6:36 PM on August 31, 2007