Jump to content

Best Photo Format - Resolution For Web Content


Recommended Posts



We are currently redesigning our website, htt p://ww w.aljoufilaw.com/ar/, by inserting photos in the sub-pages.


We would like to to have the photos in high resolution and quality. I converted the photos in Photoshop to JPEG and PNG formats. Which of the two is better? i also increased the the resolution of the photos in Photoshop, does it help with the quality?


Thanks in advance for your help and feedback on this.

Link to comment
Share on other sites

I am going to suggest you check out the Adobe website there are tutorials that go into this in depth. But here is the short version. For photos use jpeg and images with gradients or transparencies use png. jpeg will give you a smaller file size. This is your goal. In the save for web dialog box start with the guilty ay 80 and then go down to 60 and see what it looks like and move up until there is no pixel distortion. Sometimes 60 is good depending on the colors in the photo. As you make changes in the dialog box look in the bottom left corner and you will see the file size. You goal will be to make the file size as small as posable without loosing img guilty.

Link to comment
Share on other sites

My rule of thumb is to use PNG for images where i really care about quality. Typically custom graphics are going to fall under this category. If i simply don't care about quality then i use JPGs or if it's a photo taken with a camera I will use JPGs (because i always take photos in the highest possible resolution and then save smaller-sized copies for display on the web or elsewhere). Definitely read the adobe information about images. Also check out the wealth of information available to you on the Internet about this subject, then use what works for your situation.

Link to comment
Share on other sites

  • 1 month later...

In Photoshop go to Edit>convert to sRGB, then Image>Mode>8 bits. Then Image> Image Size, and check the Resample Image box, and then make the longest side either 640 or 720 or 800, whatever you prefer.

After this I always sharpen the resampled image and then go to Save for Web, where I make the image no more than 100 kb for Facebook or 200 kb for my website.

The idea is to present a crisp image, but w/out enough resolution that someone could make a print from it. ;)



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...