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

Design & UX
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.

1 Like
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.

2 Likes
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:

159×203 12.3 KB

But then when I open it

487×875 110 KB

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.

498×539 93.2 KB

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.

646×538 43.5 KB

648×540 49.8 KB

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.

2 Likes
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.

1 Like
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

1 Like