Photoshop Question posted in
The official user guide can be found here.

My Photoshop image won't show on my site

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>
Tags:

6

Answers


  1. 0

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

    • JPEG / JPG
    • PNG
    • GIF
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 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.

    Login or Signup to reply.
  5. 0

    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.

    Login or Signup to reply.
  6. 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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search