png vs jpeg

R
Posted By
roxy
Mar 5, 2006
Views
680
Replies
19
Status
Closed
so far I’ve only been able to preserve any transparancy in an image (say, background transparancy) in png. Saving in jpeg puts the image on a white background. I’ve heard not all browsers support png, so it seems a better idea to create jpegs.
Is it possible to save a jpeg with transparancy?

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

T
Two
Mar 5, 2006
"roxy" wrote in message
so far I’ve only been able to preserve any transparancy in an image (say, background transparancy) in png. Saving in jpeg puts the image on a white background. I’ve heard not all browsers support png, so it seems a better idea to create jpegs.
Is it possible to save a jpeg with transparancy?

No transparency with jpeg. GIF can have transparency. There’s even a Wizard under the Help menu to guide you through making a transparent GIF. However, a better way is to Save for Web. Under Matte you usually want ‘none’, otherwise make it the same as your background. (More tips available if you need them.)

I might use PNG if %$ Microsoft Explorer recognized them properly, but it doesn’t.
R
roxy
Mar 5, 2006
Guess I’m outa luck. GIF is brutal to a highly detailed graphic, I’ve found. Using the save for web still doesn’t let me have my transparancy.
I’m trying to place, in dreamweaver, one image overlayed onto another, but even with PIG, there’s a nasty little white outline.

Any ideas? Am I really outa luck?
T
toby
Mar 5, 2006
roxy wrote:
Guess I’m outa luck. GIF is brutal to a highly detailed graphic, I’ve found. Using the save for web still doesn’t let me have my transparancy.

Yes, it will… You could try Save for Web from your layered file, and check Transparency box; alternatively, convert to Indexed Mode from your layered file first, enabling Transparency (which will set a transparent index in the GIF palette). As Two says, you can also use Matte to make any index transparent.

I’m trying to place, in dreamweaver, one image overlayed onto another, but even with PIG, there’s a nasty little white outline.

You can effectively remove that outline by matting to a colour similar to the background – but this only works if it’s basically one colour underneath the edges. Otherwise the only way to get a perfect matte is to use PNG with a soft mask (as you probably know), or composite in Photoshop first.

Any ideas? Am I really outa luck?
T
Two
Mar 5, 2006
"roxy" wrote in message
Guess I’m outa luck. GIF is brutal to a highly detailed graphic, I’ve found.

Yes, it is brutal because it can accomodate only 255 colors.

Using the save for web still doesn’t let me have my
transparancy.

🙂 You have to click the [ ] Transparent box.

I’m trying to place, in dreamweaver, one image overlayed onto another, but even with PIG, there’s a nasty little white outline.

In Photoshop, go to the bottom of Layers and defringe the image, and when you save for web, set the matte to the major color of the image below it. It might be best if we could see what you are working on.
R
roxy
Mar 5, 2006
thanks everybody, I’m going to try all these sugestions out tomorrow!
FN
Flo Nelson
Mar 6, 2006
"roxy" wrote in message
thanks everybody, I’m going to try all these sugestions out tomorrow!

I can’t find it offhand in my files, but there is some code (javascript I think) that will make IE support png transparency. Maybe a little googling will bring it up.

Flo
T
Two
Mar 6, 2006
"Flo Nelson" wrote in message
"roxy" wrote in message
thanks everybody, I’m going to try all these sugestions out tomorrow!

I can’t find it offhand in my files, but there is some code (javascript I think) that will make IE support png transparency. Maybe a little googling will bring it up.

True but it ain’t worth it. Micro$oft just has to get its act together. Why, even their PowerPoint creates Explorer incompatible web output!
FN
Flo Nelson
Mar 6, 2006
"Two" wrote in message
"Flo Nelson" wrote in message
"roxy" wrote in message
thanks everybody, I’m going to try all these sugestions out tomorrow!

I can’t find it offhand in my files, but there is some code (javascript I think) that will make IE support png transparency. Maybe a little googling will bring it up.

True but it ain’t worth it. Micro$oft just has to get its act together. Why, even their PowerPoint creates Explorer incompatible web output!

Totally agree with you about that.

Flo
R
roxy
Mar 7, 2006
I am trying to get a sample together to visually demonstrate my problem, woke up this morning and found that my square marquee tool has, during the night, decided to allow me to select squares only, no rectagles allowed.
Huh? What’s with that?
T
toby
Mar 7, 2006
roxy wrote:
I am trying to get a sample together to visually demonstrate my problem, woke up this morning and found that my square marquee tool has, during the night, decided to allow me to select squares only, no rectagles allowed.
Huh? What’s with that?

Stuck shift key? Or maybe it’s set to Fixed Aspect Ratio.
T
toby
Mar 7, 2006
Two wrote:
"roxy" wrote in message
Guess I’m outa luck. GIF is brutal to a highly detailed graphic, I’ve found.

Yes, it is brutal because it can accomodate only 255 colors.

Strictly speaking that is not true, but it still may not help the OP much.
http://phil.ipal.org/tc.html

Using the save for web still doesn’t let me have my
transparancy.

🙂 You have to click the [ ] Transparent box.

I’m trying to place, in dreamweaver, one image overlayed onto another, but even with PIG, there’s a nasty little white outline.

In Photoshop, go to the bottom of Layers and defringe the image, and when you save for web, set the matte to the major color of the image below it. It might be best if we could see what you are working on.
R
roxy
Mar 8, 2006
thanks Toby, it was the fixed aspect ratio. phew.
R
roxy
Mar 8, 2006
Here’s a question that’ll reveal my naiveity: I have a dreamweaver page with a demo of the problem I want to solve.
How do I post it? Copy and paste directly isn’t the answer. Copy and paste from my browser? If so, do I simply replace the file protocal with http? Will that paste as a link?
MR
Mike Russell
Mar 8, 2006
"roxy" wrote in message
Here’s a question that’ll reveal my naiveity: I have a dreamweaver page with a demo of the problem I want to solve.
How do I post it? Copy and paste directly isn’t the answer. Copy and paste from my browser? If so, do I simply replace the file protocal with http? Will that paste as a link?

You can’t post it directly, and even if you could the material would be stripped by the news servers.. Upload it to a web page and post a link.

If you want to email an HTML page to an individual, edit the html page in Mozilla, which is free. Then copy and paste it into a new composer page before emailing it.

Mike Russell
www.curvemeister.com
K
KatWoman
Mar 8, 2006
"roxy" wrote in message
Here’s a question that’ll reveal my naiveity: I have a dreamweaver page with a demo of the problem I want to solve.
How do I post it? Copy and paste directly isn’t the answer. Copy and paste from my browser? If so, do I simply replace the file protocal with http? Will that paste as a link?

use screen capture
control+print Screen
open picture program
file >new>paste>save as jpg

go to a server and post it
http://xs.to/
they host for your pics free
go to the page that shows the codes
post that link to NG
T
toby
Mar 8, 2006
KatWoman wrote:
"roxy" wrote in message
Here’s a question that’ll reveal my naiveity: I have a dreamweaver page with a demo of the problem I want to solve.
How do I post it? Copy and paste directly isn’t the answer. Copy and paste from my browser? If so, do I simply replace the file protocal with http? Will that paste as a link?

use screen capture
control+print Screen
open picture program
file >new>paste>save as jpg

go to a server and post it
http://xs.to/
they host for your pics free

Cool Kat. I was trying to think of something like this — the best I could come up with was flickr.com! (which is the most awesome web gallery bar none, if you don’t use it already).

go to the page that shows the codes
post that link to NG
R
roxy
Mar 9, 2006
http://roxywhite.com/demo2.html

All this stuff to learn!
I managed to upload to my site (I always have trouble getting all the files to connect together; seems they have to be in one folder. Why cant the images be in subfolders?)
Anyway, if the above actually produces a link:
The transparent png of the callalilies at the top extends into the background, but there’s the white line.
The jpeg at the bottom demonstrates the look I’m trying to achieve. Since IE doesn’t support pngs, am I doomed?
T
Tacit
Mar 9, 2006
In article ,
"roxy" wrote:

I managed to upload to my site (I always have trouble getting all the files to connect together; seems they have to be in one folder. Why cant the images be in subfolders?)

The images CAN be in subfolders! But if they are, you have to write the HTML so that the server knows to look in the subfolder.

If you say img src="foo.jpg" then it will look for foo.jpg in the same folder with the HTML file. If you say "img src="images/foo.jpg" it will look for the file foo.jpg in a subfolder called "images."

Anyway, if the above actually produces a link:
The transparent png of the callalilies at the top extends into the background, but there’s the white line.

Yes.

When you save your JPEG, use File->Save for Web. Look in the Save for Web dialog on the right-hand side. You will see a control called "matte color." You set it to white, meaning you want the edges of the image to blend into white. So you got a white line.

If you set it to the purple color, it will blend into purple. If you set it to "none," it will not have a fringe at all–but the edge may look "jagged," because of limitations in the way the transparency is rendered.


Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
Nanohazard, Geek shirts, and more: http://www.villaintees.com
FN
Flo Nelson
Mar 9, 2006
Don’t save it with transparency. Instead create a rectangular image that just surrounds the flower. Put white behind the flowers where you want the white and purple where the purple intersects. Since you are using absolute positioning, you can put the image in a div (layer) and place it exactly where you want it.

As you learn more about creating web sites, look into the creating pages with css but without absolute positioning – that will give you more flexibility.

Flo

"roxy" wrote in message
http://roxywhite.com/demo2.html

All this stuff to learn!
I managed to upload to my site (I always have trouble getting all the files to connect together; seems they have to be in one folder. Why cant the images be in subfolders?)
Anyway, if the above actually produces a link:
The transparent png of the callalilies at the top extends into the background, but there’s the white line.
The jpeg at the bottom demonstrates the look I’m trying to achieve. Since IE doesn’t support pngs, am I doomed?

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections