How to optimize pictures for web

[SMA74]

Hi, I want to reduce the size of an image and crop it for my webpage. However under the menu below, when calculating it "bilinear" or "bikubisch", there is a lot of pixels in the picture, the face of the person is kind of distorted, which looks not professional. 

My favorite size would be DPI 72 and max 120 KB in the end. I tested the other menu where you can choose GIF, PNG, JPG etc, but it`s not small enough in the end. I had to reduce it with the app tinypics to make it work. Will this be the normal way to do it? In Photoshop there was an option "save for web". 

 

Thanks, Sandra

 

[GarryP]

Welcome to the forums @SMA74

Your question would have been better asked in the appropriate “Questions” section of the forums rather than the “Tutorials” section as the “Tutorials” section is for people posting tutorials for other people to follow. A moderator will probably move this thread for you.

[SMA74]

Thanks @GarryP

[Ron P.]

On 12/19/2021 at 3:28 PM, SMA74 said:

I want to reduce the size of an image and crop it for my webpage

Reduce the size as in resolution? In your screenshot of the Document Resize dialog, it shows the resolution of 899px X 600px, is this the end size or are you needing to make it even smaller? You mentioned about pixels and face distortion, there's a few things that can lead to this. Aspect ratio, and also the website itself doing things to the image.

When you crop your image, try to make sure you maintain the aspect ratio of the image, so you will not have any distortion. Also it's important to make sure it is in integers, no fractional, like 600.5px ect.

While there's no save for web automation in Photo, it still can provide you with good results. You just need to do things manually. Which requires a little understanding of how to get those results.

I took one of my images that had a starting resolution of 5496 x 3670px. I resized it a couple of ways. 1-using the Resize Document menu, 2-In the Export Dialog. The image was resized to 900 x 601px, 72dpi (which I think is totally irrelevant for images to be viewed on the internet or screens in general. DPI=Dots Per Inch, and screens do not have any dots, they use pixels.) Anyway resizing my image the File Size was 75.8 KB. I also repeated this using all the Resampling methods, and could not tell any difference in quality. I'm attaching one of them. Keep in mind, if you zoom in much past 100% it will start to pixelate. High-Def images will do that too when you start pixel-peeping. 

 

[Bwood]

All my pictures for websites are done in the above fashion. You may also want to export to the web in a png format and check the sizes. Depending upon your software for websites, you may also have an option to “optomize” the photo for your website within the pgm you are using. 
Also if you know the approximate size of the photo you’ll need for your website you may adjust that in the AP export. I do that a lot. 
-Bill

[SMA74]

Thanks for your inputs @Ron P. and @Bwood. Where do I find the AP export? 

[Ron P.]

Under the File menu, File>Export.

[SMA74]

@Ron P. Thanks!

[Ron P.]

Your welcome. 🙂