| Author |
Topic |
|
jhermiz
3564 Posts |
 Posted - 2004-01-29 : 15:22:05
|
| Or his brother...I created a site and I cant for the life of me get a specific image to come out right no matter what.The image has the words "Strategic Proposal Initiative..."and its a .jpg file. Whenever I go into adobe or paint and zoom in I can make it look real nice and it doesnt have those little fady bits / pixels. But as soon as I save the file and view the webpage it goes back to normal with those fady pixels. I wonder if I should change this to a bmp.Here's the site:http://www.jakrauseinc.com/spi/spi.aspIf anyone has ideas Im openjon |
|
|
AjarnMark
SQL Slashing Gunting Master
3246 Posts |
Posted - 2004-01-29 : 15:25:06
|
| OK, I give up... What's a "fady pixel"? Which image on that page are you talking about? I didn't see anything that stood out as being a bad image.--------------------------------------------------------------Find more words of wisdom at [url]http://weblogs.sqlteam.com/markc[/url] |
 |
|
|
jhermiz
3564 Posts |
Posted - 2004-01-29 : 15:26:54
|
quote:
Originally posted by AjarnMark
OK, I give up... What's a "fady pixel"? Which image on that page are you talking about? I didn't see anything that stood out as being a bad image.--------------------------------------------------------------Find more words of wisdom at [url]http://weblogs.sqlteam.com/markc[/url]
Im sorry my english sucks :-)See this http://www.jakrauseinc.com/spi/images/99.jpgThats the image...look real close at the words Strategic Proposal Initiative SPI Johan... |
|
|
|
SamC
White Water Yakist
3467 Posts |
Posted - 2004-01-29 : 17:00:24
|
When you specify width and height in an image as you have in your HTML quote:
<img alt="" src="images/99.jpg" border=0 width="738" height="264">
If the size does not match the pixels in 99.jpg, then the browser will adjust the jpg to fit.99.jpg has dimensions of 712 x 264, so some adjusting is going on, hence you get what is commonly known in the industry as "fady pixels".  I should have asked for "Vincent Van Gogh" as my SQL nickname.Sam |
|
|
|
jhermiz
3564 Posts |
Posted - 2004-01-29 : 17:15:43
|
| But I tried that before, even if I reduce the image it still comes out wrong. The HTML tag I had changed to 712 x 264 but i still get those fady pix!jon |
|
|
|
SamC
White Water Yakist
3467 Posts |
Posted - 2004-01-29 : 17:17:24
|
| Now what do you mean by "that"? Did you expand the image or contract the HTML sizes?You can remove the height / width from the HTML. Then the browser will do a pixel to pixel match - and it will look EXACTLY like http://www.jakrauseinc.com/spi/images/99.jpgCan't do better than that. |
|
|
|
jhermiz
3564 Posts |
Posted - 2004-01-29 : 17:20:17
|
quote:
Originally posted by SamC
Now what do you mean by "that"? Did you expand the image or contract the HTML sizes?You can remove the height / width from the HTML. Then the browser will do a pixel to pixel match - and it will look EXACTLY like http://www.jakrauseinc.com/spi/images/99.jpgCan't do better than that.
Thats what I meant it doesnt matter with that tag...something is still wrong, cause the white lettering still has a fade, its not a big deal but i'd rather have it perfect. I tried modifying it and saving it and then displaying the page but it again shows the fading.Maybe it has to do with the type ?Not sure.Jon |
|
|
|
jhermiz
3564 Posts |
Posted - 2004-01-29 : 17:23:50
|
| well hell...everytime i recolor and retype those words and do a save..it gets those fady pix again!!!Dont change on me !!! |
|
|
|
stephe40
Posting Yak Master
218 Posts |
Posted - 2004-01-29 : 17:30:15
|
| Your streatching the image in the html. Make sure you check the size of any containing objects. Also you need to increase the JPEG quality. It looks like its set pretty low (<50%), thats the main reason why your getting the "fady pixels." - Eric |
|
|
|
jhermiz
3564 Posts |
Posted - 2004-01-30 : 01:50:25
|
quote:
Originally posted by stephe40
Your streatching the image in the html. Make sure you check the size of any containing objects. Also you need to increase the JPEG quality. It looks like its set pretty low (<50%), thats the main reason why your getting the "fady pixels." - Eric
like i said sizing dont matter...i think its typing text on top of that color and saving which does it. Jon |
|
|
|
SamC
White Water Yakist
3467 Posts |
Posted - 2004-01-30 : 08:06:27
|
| Save it as a gif file. jpg files are lossy. |
|
|
|
jhermiz
3564 Posts |
Posted - 2004-01-30 : 08:25:23
|
quote:
Originally posted by SamC
Save it as a gif file. jpg files are lossy.
Tried that with the same problem.I guess its not too big a deal...it may be because the colors I'm using...once I put white on top of that pastel purple and save it it seems to fade the pixels. not too big a deal.thanks anyhow guys.jon |
|
|
|
SamC
White Water Yakist
3467 Posts |
Posted - 2004-01-30 : 08:49:12
|
| On your demo page, the HTML IMG width remains different from your picture width.You should try an experiment to get a feel for the visual degradation caused by a browser resizing an images. Display the image at 75% and 50% of it's actual size in HTML (or blow it up to 150% / 200%). The professional image "crispness" degrades quickly to a blured amateur quality.The difference you have (image width 712), HTML width 732, is just enough that any improvement you may make to the image in Photoshop (like switching to a gif file) may be unnoticable when viewed on your web page since the browser will fuzz it just a minor amount, because it is being directed in the HTML to stretch the image's width of 712 pixels to the HTML width of 732 pixels.You are focused on the loss occuring (in Photoshop?) when you save the file. This is a reasonable (because the image won't get any better later on). Loss will occur when a jpg file is rendered or saved (it's a compressed image format. Errors [loss of resolution] are expected.). (Photoshop doesn't render the jpg until it is saved from the internal psd format to jpg). This may account for your observation that the blur occurs when you save the file. Photoshop should prompt you for a desired jpg "Image Quality" when you save the file. Even the highest jpg image quality (largest file size) won't be as crisp as a "gif" or "bmp" file generally (gif and bmp files save every pixel exactly - jpg files save formula coefficents which can reconstruct the image). "jpg" files are widely used and the image loss accepted because the compression is so good, filesize (page load time) is so small, and the image quality generally "crisp enough" for web work. |
|
|
|
joldham
Wiseass Yak Posting Master
300 Posts |
Posted - 2004-01-30 : 09:19:25
|
| I don't know if this will solve your problem or not, but when you save the picture, save it as a .gif image. When you do, change the Matte color to the background color you are using. Another shot is to click on the text layer and Select > Load Selection. After that, click Select > Inverse and delete any remaining pixels on that layer. I am not a photoshop expert, but I am hoping this helps. Let me know if this made a difference. |
|
|
|
SamC
White Water Yakist
3467 Posts |
Posted - 2004-01-30 : 09:22:57
|
quote:
Originally posted by jhermiz
quote:
Originally posted by SamC
Save it as a gif file. jpg files are lossy.
Tried that with the same problem.I guess its not too big a deal...it may be because the colors I'm using...once I put white on top of that pastel purple and save it it seems to fade the pixels. not too big a deal.thanks anyhow guys.jon
One more point. If you want to try a gif or bmp file - don't start with a jpg file. If you do begin with a jpg, then save as a gif first. Open the gif, erase the text. Retype the text. Then save again as gif.That'll be as crisp as it gets. From there, you might experiment with altering the text font-size 1px up or down and viewing the result. |
|
|
|
jhermiz
3564 Posts |
Posted - 2004-01-30 : 09:25:41
|
Ok...I have a meeting at 10am, so after that I'm gonna give this a go..for the last time.If it works greatIf not its not too big a dealThanks Sam and everyone else.Jon |
|
|
|
jhermiz
3564 Posts |
Posted - 2004-01-30 : 10:02:55
|
| If I save as ".gif" from a jpeg it totally loses the colors...it even warns me, that saving to this format may lose colors etc...Jon |
|
|
|
jhermiz
3564 Posts |
Posted - 2004-01-30 : 10:13:38
|
| SamC! It worked finally...hehe thanks.Also can I get some feedback on design, looks, changes, and on the forums, etc.Thanks,Jon |
|
|
|
SamC
White Water Yakist
3467 Posts |
Posted - 2004-01-30 : 12:03:35
|
| Couple of comments:Make the image 738px wide so it matches the HTML. Load the gif. Erase the text. Image, resize - set width to 738. Enter the text. Save.The page layout and colors look great. Nice design, good use of "white space" - not cluttered. I like contact links to tell me a company location and phone. Email links should load email. Making it otherwise makes it obvious that company details are being hidden, or can't take a call.You've got another challenge ahead to make the layout reasonable when users view the site with IE's VIEW / TEXT SIZE / LARGER. The table design expands nicely, but not the top and bottom.This is probably because the 1) / 2) and 3) links weren't nailed down to a point size in your CSS. It's a fluke that IE won't resize text styled with CSS pt and pixel sizes and many webs rely on that fluke. It's bad for users since many people have vision impairments and need larger text. I'd suggest freeing up your text sizing. Here's a great tutorial on how to get consistent text sizes accross all browsers with CSS while avoiding nailing text to a 13px fixed size. For more backgound, look here for CSS and here for text.Another goal to meet is to validate the layout HTML. Many good sites don't, but it's good form. It isn't hard, so why not?Visit the following link to look at your HTML validation results: (you may need to cut and paste - this URL doesn't post well)http://validator.w3.org/check?uri=http://www.jakrauseinc.com/spi/spi.asp&charset=(detect+automatically)&doctype=Inline&ss=1&outline=1&verbose=1Your CSS validates fine..http://jigsaw.w3.org/css-validator/validator?uri=http://www.jakrauseinc.com/spi/spi.asp&warning=1&profile=css2&usermedium=allYou've coded the CSS on the page itself. Sometimes there is good reason to do this for snippets. For a site, it's usually better to code in an external stylesheet so it's coded only once, and loaded only once by the browser for all the web pages. |
|
|
|
ehorn
Master Smack Fu Yak Hacker
1632 Posts |
Posted - 2004-01-30 : 21:19:27
|
| Nice assessment Sam and useful validation links. |
|
|
|
jhermiz
3564 Posts |
Posted - 2004-02-03 : 10:28:55
|
| Thanks SamC,I made some minor changes.Try now:http://www.jakrauseinc.com/spi/spi.asp |
|
|
|
Next Page
|
vincent van gogh wanted...