0

I've made an image in Photoshop, but it won't show on my site. Instead, it shows up with the little white box with the ripped paper icon. Do I need to convert the PSD file to some other sort of file?

Here is my HTML snippet:

<!doctype html>
<link rel="stylesheet" href="styles.css">
<img src='file:///C:/Users/Tom/Pictures/logo.psd'>
<div align="center">
<h1>Home</h1>
<a href="home.html"> Home </a>
<a href="myproducts.html"> My Products </a>
<a href="about.html"> About </a>
</div>
MC Emperor
  • 22,334
  • 15
  • 80
  • 130
user3774020
  • 35
  • 3
  • 5
  • You can't use a PSD in your website. You need to convert it yes. – putvande Jun 25 '14 at 09:53
  • and how do i do that.... :/ – user3774020 Jun 25 '14 at 09:55
  • 3
    Use the `Save for Web` option in Photoshop, I would save as a .jpg, and turn the quality down a bit so you optimise the image. You could save it as a png or gif as well. – Nick R Jun 25 '14 at 09:55
  • 1
    As @NickR states, `save for web` is your best bet. If you use transparancy in your picture and the background should be visible, go for `png` else `jpg`. I wouldn't recommend really `gif`, unless there is an animation in it. Then again, this is my own prefference, and you can use a `gif` file as well for standard pictures. – Dorvalla Jun 25 '14 at 09:59

6 Answers6

4

A PSD file is a file format used by and specific for Adobe Photoshop. Other applications (like your webbrowser) do not know how to read it. You need to convert it to another format.

In Photoshop, with the document open, click File » Save As..., and then select as file format the desired format (see image below). Which format to choose, is pretty much explained in another Stack Overflow answer.

Photoshop file formats list

It is also recommended that you avoid using file:///C:/Users/Tom/Pictures/logo.psd for links; use relative links instead. If you are ever about to put your website online, with many users, the image won't show up, because the browser of the visitors of your website will look for a file located in C:/Users/Tom/Pictures/logo.psd on their own computes.

Community
  • 1
  • 1
MC Emperor
  • 22,334
  • 15
  • 80
  • 130
2

You should use jpeg, png or gif, depending on what's more appropriate for your image. Take a look at this other answer for guidance:

https://stackoverflow.com/a/392646/1203176

Community
  • 1
  • 1
Cmorales
  • 958
  • 1
  • 9
  • 24
2

You can't use a PSD in your website. Convert it to PNG, JPG, GIF or some other format.

You can do this by clicking file > Save for Web.

In the right corner you can select the new image type.

Mike Bovenlander
  • 5,236
  • 5
  • 28
  • 47
1

PSD is not a valid web image format. You might export your image in one of the following formats:

  • JPEG / JPG
  • PNG
  • GIF
Daniel
  • 3,541
  • 3
  • 33
  • 46
0

You must convert it to png for exemple. to do that just open your logo.psd in photoshop and then click file==> save as and choose the png extension.

monther zlatan
  • 156
  • 1
  • 14
  • 1
    PNG might be the right choice in this particular case (since it's a logo, we can assume that it doesn't have lots of colors), but it would result in a much bigger file than JPEG in other cases. Just take that in mind. – Cmorales Jun 25 '14 at 10:00
  • You could always run the saved `.png` though https://tinypng.com/ - it normally saves around 60-70%, with no quality loss. – Nick R Jun 25 '14 at 10:05
  • You are right, but usually it's better to choose the appropriate format in the first place. If your PNG is 1000kb and your JPEG is 200kb, the resulting compressed 300kb will still be bigger than the JPEG. Obviously, you have to test which option is better in each case. – Cmorales Jun 25 '14 at 10:11
  • @NickR That's not true. TinyPNG mentions "smart lossy compression" — the resulting images have quality loss. – MC Emperor Jun 25 '14 at 10:22
  • @MCEmperor No visible quality loss is what I should have said rather :) – Nick R Jun 25 '14 at 10:23
  • @NickR Even that is not exactly true. Open https://tinypng.com/images/example-shrunk.png and https://tinypng.com/images/example-orig.png in two new tabs and switch the tabs rapidly. I see the difference — but I am such a whiner. Good comment though. ;-) – MC Emperor Jun 25 '14 at 10:26
0

Web browsers do not render .psd files. This file extension is only properly understood by Adobe Photoshop.

  1. Open your .psd in Adobe Photoshop
  2. Select File -> Save for Web and Devices...
  3. Save your file as .jpg or .png
  4. Use this new saved file as a substitute image where you have the .psd in your .html file
Igbanam
  • 5,904
  • 5
  • 44
  • 68