What's new
By:
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Optimizing image for full page desktop with supports for responsive design


R

ramsforums

New Member
Messages
2
Likes
0
Greetings Gurus :)

Recently I have requested one of my friend to design a website for a non profit charitable organization. My friend developed using html and bootstrap. He delivered the website. I found the website is loading slow.
The website has full page image with slider in homepage. All together 3 images which can be changed by using slider. The image size, resolution may be the issue.
Please refer to the below image for image size details
lgEKx.jpg


My friend is sick now and hospitalised. So it is not a good time for me to ask his help to modify images. I have photo shop. I need your help or share some links so that I can do it myself. Here are the area I need help.

1) As per the image, all image sizes are 1900 x 920 pixels. The resolutions are 300 and 72 dpi. Given the current Desktop/Laptop Displays resolution and cellular phone, what resolution I should save, what should be the size?

2) If I need higher resolution (as one of my image is 72 dpi) Can I simply increase the resolution to higher resolution in Photoshop? The images are natural agricultural farm.

3) How do I reduce the file size without affecting the image dimensions (width x height)? Any guidance? Tutorial links? Appreciate :)

4) I would like to replace one image s2.jpg with another image which I took using my Digital Camera. The replacement image size details as follows
Ho1wH.png

What should I do in Photoshop to optimize the image?


Thank you and appreciate your inputs :)
 
Typically there is no need to go over 72dpi for the web. 300dpi is way too big and that's making the file size bigger. If you do need to change the dpi of an image, you can go to Image> image size and a popup box will appear. When you mess with the dpi though, your image will be resized. I would recommend using tinypng to reduce the file size of your images. I use this on all my websites and it's amazing. You won't even notice a difference in the images. When you save images for the web, it's best to save it as a jpg, because png files typically tend to be a little larger. I only save as png if I need a transparent background.

I hope this helps.
 
Sorry, Dan, but for web use, the PPI setting makes absolutely no difference. All that matters for web use is the overall dimensions of the image in pixels. This has been discussed many, many times before on this and other forums.

In contrast, for printing, the PPI setting may or may not make a difference, depending on the exact details of how you are printing the image. For example, some printer drivers will pay attention to what's in the PPI field, whereas printer drivers from other companies (...or printing kiosks, or low end commercial printers like drug stores, Walmart, etc.) completely ignore that field, but, instead ask you for the size of the print you want in inches or cm, and then compute the PPI for the user.

Tom M
 
PS - If you see the overall image dimensions in pixels change when you change the PPI setting in the image size dialog box, it means that you have the "resample" option checked. Every time you resample an image, it looses sharpness. Final versions of images should always be kept for archival purposes at full resolution and then, if a change in the overall pixel dimensions is needed then you make a new version of the image specific to that need, at the new overall pixel dimensions. This resizes the image only once and minimizes image degradation.
 
Huh, they taught me in school that web standard was 72dpi and I've just rolled with that. I guess I just learned something new today. Thanks for that. I'd like to apologize to the OP for passing bad info.
 
Back
Top