I'm getting a very fine white line (call it a 'border') appearing around my image (a logo) when I view my webpage. I'm using PS CS and DW CS3.

 

The logo contains text which is outwith the main graphic, so it's not a simple 'button' or 'square' that I'm dealing with.

 

So far I've tried this ...

 

1. The Magic Wand tool to select the background and hit delete.

 

2. Set the foreground color swatch to the required color for my webpage.

 

3. The Paintbucket tool to fill the selection.

 

Everything looks fine in PS - no stray pixels or signs of a border.

 

When I insert the image into DW I can see the fine white border around its extents.

 

I'm using hex color codes to match the webpage background and the logo background.

 

I've searched the Forum but couldn't find anything similar - so apologies if this has already been raised.

 

Thanks

do you have a copy of the logo that we can see, and also a link to the website, if you can't link to the site either zip it and attach it here or the code that you have. As the issue is either with the logo or with your code and without both we cannot really help you

The site is at http://www.acoxgangs.com/new_site_zone/index_04.html

 

Scroll to the bottom of the page to view the relevant logos - tried attaching one of them in psd format but I don't have permission for this filetype.

 

The webpage is 'under construction' as you'll see.

 

I tried adding a border=0 tag to the image code without any success.

 

Thanks

Its your images, if you have a look at this zoomed in picture of one of the logos you can see the white line surrounding it:

 

 

 

So just take it the images into an image editor and get rid of the box around the edges, and this will fix it

Thanks Dizi - but the image created in PS doesn't have the border - see attached close-up crop (as jpg) from my .psd file.

 

If you've downloaded the image from the webpage then I'm guessing it brings the problem border with it.

 

Could it be a conflict between how PS handles the hex color code and DW's attempt at it. If they don't match exactly does this explain the fine line 'border'? To the eye the colours appear to be identical.

Having just viewed the image in the above Post the 'border' is there again, but I can vouch for the fact that it's not there in the original files (i.e. psd, jpg or gif) (cannot attach zip - I'm not permitted).

 

Is it a browser issue - I'm using IE but does it also happen in others?

 

I should emphasise tho that I can also see the 'border' in my DW design view.

Try it with your copy of the image, not the photoshop image but the one that you have saved and are using on the website and see if the line is on there. As I saved the images I am showing you there from the site, so it is the image that is displaying, chances are that the reason is when you saved it, it has compressed and created the line while compressing it. So nothing to do with DW and everything to do with that image.

 

Try saving it as a gif rather than a jpg, as this will reduce the size of it without reducing the quality as much, due to it using a limited pallet, so that might help.

Tried saving it as a gif again but the line was still there - however, I stumbled across what appears to be a workaround ...

 

The original image was something like 200px high - and by using the Save for Web feature in PS I was resizing to 55px high for the webpage. When re-trying the gif conversion this time I forgot to resize it and inserted the image into DW - hey presto - no line.

 

By simply dragging the image down to 55px high I have a line-free logo.

 

Something was clearly happening to the image during the Save for Web process despite the fact that, as a jpg, the quality setting was 100.

 

I tried resizing the image in Save for Web once more but this time I changed the default resampling method (bicubic) to bilinear - no line appeared.

 

Apparent solution - when resampling images of this type and trying to match image/webpage colours - don't use bicubic.

 

Thanks for all your help.

steerpike are you saving a.gif for web?

 

if you are ensure that matte is set to no matte

Pottsy

 

Sorry for delay in responding - I was under the impression that I'd be automatically advised of replies.

 

The 'line' was appearing irrespective of the file type - both gifs and jpeg's had it. FYI my default setting in PS for save-for-web gifs is 'Matte: None' which is what I ran with.

 

Thanks for the interest.

If it's not matt and the white line isn't there (even when zoomed right in, in PS) then it's your code.

 

Does it show across all browsers?

Hi Mesa

 

The fine-white line disappeared when I changed the resampling method when using the Save for Web function (see earlier post). Dizi also felt it was the image, not the code, that was the culprit. I'm using DW CS3 in Design view and simply 'inserting' images - it deals with the code.

 

I'm of the opinion that the single-pixel 'lightened' edge to the image was introduced during the compression performed by save-for-web. No idea why

 

Just to recap ...

 

http://www.acoxgangs.com/new_site_zone/index_04.html is the page with the fine white line showing around the images (scroll to bottom of page) when they were resampled using bicubic compression, and ...

 

http://www.acoxgangs.com/new_site_zone/index_05.html is the page with the bilinear rather than bicubic resampling of some of the logos at the foot of the page.

 

Obviously none of this wouldn't have shown up if I was inserting into a white background.

 

If I can do anything at this end that could re-create a few PS scenarios along with the code I'd be happy to help.

Save for web = matt (if a .gif)

are you resizing the image after you have done it? So that say the image is 700*700 and your resize it to 120*120....as this might be where the white line comes from depending on which option you use for resizing.

are you resizing the image after you have done it? So that say the image is 700*700 and your resize it to 120*120....as this might be where the white line comes from depending on which option you use for resizing.

 

Good point - to illustrate what's going on here I've created a test page at http://www.acoxgangs.com/new_site_zone/imagetest.html

 

The large image was created from an original 420 x 385 jpeg image which had a white background. It was saved as a PSD and the white was replaced by #427BB0 to match the webpage background (also created by PS). Various other mods were carried out (drop shadow etc). This image was saved as a jpeg : Matte = none; Quality = 12; Baseline. This is the large image on the 'imagetest' webpage.

 

Alongside the large image are several examples of resampled logos ...

 

The original PSD image was saved using Save for Web : Jpeg; ICC Profile checked; Image re-Sized 40 x 37 px Bicubic; Quality 100 (resulting filesize 7kB)

 

A gif version was created using the same method: Matte = nil; Selective channel; Diffusion; Lossy = 0; Transparency = 0; Image re-Sized 40 x 37 px Bicubic; (resulting filesize 3kB)

 

Identical versions to those above were created with the exception that the resampling was setting was changed to bilinear in each case.

 

Finally, the PSD file was resampled (Image>Image Size ...) and saved as a jpeg.

 

Bottom line is that using Save for Web and resizing using bicubic quality (either jpeg/gif) creates the fine white line.

 

Resizing without using the Save for Web feature, or changing the Save for Web setting to bilinear, doesn't result in the line appearing.

 

It's nothing to do with code, matte settings etc. It would appear to be a 'flaw' (or a consequence) of applying bicubic resampling within the Save for Web feature.

 

Hope this helps.