PSD to PNG - Can't Embed it into my web page


#1

Hopefully someone has come across a similar issue. I'd appreciate some feedback here.

I am trying to crop and save part of a larger .PSD file as a .PNG image.
The odd thing is that when I embed the .png image into my HTML page, I can't see it.
But when I save that same part of the .psd file as a .JPG image - it shows up on my page! So the path to the image is correct. What is it then? Why PNGs are not showing up?

Details:

Adobe Photoshop Image.18 (.psd) -- my original .psd file.

The part I'm trying to crop and save (Layer4):

Thanks.


#2

That layer looks empty. What does the png image look like? And are you sure the path is correct - including the .png extension?


#3

Hi there AlexTechFlow,

we really would need to see the actual "psd file" ,
if we are going to have any real chance of helping. :winky:

coothead


#4

i tend to use the legacy' 'export for web' options as that will give you a preview of what you are exporting.


#5

Any chance of uploading the problem png?


#6

Does your png file look OK on your computer? As @WebMachine says that layer looks empty and png supports transparency but jpg does not and so will probably create a black or white image instead of a transparent one.

But as other have said you will not get a useful answer without supplying at least one of the files.


#7

I seem to recall that browsers don't support all colour modes and bit depths for png. May be worth checking those to make sure they are sensible for on-screen/on-line viewing.


#8

I will do some research on colour modes and bit depths for png.
Maybe legacy saving mode in PS will help.

Here are my images (.jpg and .png):

.png

.jpeg

For some strange reason, both images are visible here.


#9

This is what shows up on my server:

http://3dp-site.alexbelinsky.com/img-test.html

Jpg is visible - png is not.

I gotta read more about PS CC and its color modes.

How is this possible? You see it here and you can't see it on my server???


#10

The image I am working with is on this layer because when I hide it the image disappears too.

The preview in my local folder looks like this:

But then when I open it


#11

I'm not familiar with Photo Shop, but it obviously has something to do with png transparency. Can you find any settings in PS regarding png transparency?


#12

I see both images. The file size is huge (which I don't understand), so they are very slow to load, but they're both there.


#13

I'm not sure if Discourse does something to the images on upload.
What happens in you download the uploaded file and display it in html? I tried and it worked.

I don't see either, but it looks like the page is still loading, but it's been a long time. Inspect says "Could not load the image" on both images.

It did finally load, and I see the jpg, but not the png.

If I try and view the png file directly, Firefox says: The image "http://3dp-site.alexbelinsky.com/thermateur-mobile.png" cannot be displayed because it contains errors.

Could you zip the file and upload here? That way we should get the file as you have it.
Actually, I did manage to download it from your site...


#14

I can see both images on Firefox (57, which I know is out of date) and Chromium. What is puzzling me is the file size for the dimensions of the images.



#15

I've not made any sense of the problem really. The file is unusually large for what it is. 24MB for a 204 x 474 png seems a lot.
If I put that file into an html page, it's broken. It loads into Photoshop OK. If I change nothing and save a new file from PS and put that in html, it's fine, and only 44.6KB now.


#16

I'm on FF 60.0.1 64bit in Windows, just updated yesterday. Still waiting for it to load in Chrome...
I guess there is some kind of corruption in the file, I don't get why it's so big.


#17

Glad to know it is visible somewhere in the universe )

Well, maybe my file-saving settings are affecting it. JPG images are fine but PNGs I can't see no matter what combination of image-saving settings I try.

The PS file itself is HUGE. And the layout is over 3000px wide. I gotta scale it to human proportions somehow.
I hired a designer to do the layout part for me.

I am trying to adjust transparency, bit quality (8, 16), etc....

I still don't see it. Weird stuff.


#18

FWIW this file is the result of taking your original, reducing to 8 bit and saving. It's down to 33KB.

It may be usable, but does not solve the mystery of your problem file.


#19

Reducing the size is something I'd like to do also.

And the mystery... Well, I just spoke to the designer. He suggested saving it through Avocode - and it worked!
I see my png now! How cool is that! Moving on with the project.
I believe that something happens on my side when I save parts of the original .psd file in Photoshop. Still not sure exactly what that is.

Thanks so much for testing the file with me. I appreciate it.


#20

thinking about it something i do if i want to save parts of a psd without changing everything is only have the bits i want visible - go to 'image' - 'duplicate' - tick the box that says 'duplicate merged layers only'

then you should have a flattened copy of the bit you want. You can then resize that to whatever size you want via 'image' - 'resize'. Then export for legacy.

hth