Resizing an image using preview help

[EmmaLouise]

Hi all,

I am having a website built, the web guys have set up templates for me to upload photos etc onto..

For example;
One of the templates needs images - 370px Width x 210px Height

(am assuming the px means pixels)

I have discovered how to resize using Preview but it also asks about pixels/inch or pixels/cm, the pre-set is 300...

What would I need?

Thanks in advance

is there anyone out there?

 

[DoFoT9]

preview can do it for you!

Tools Menu -> Adjust Size

 

[EmmaLouise]

hello,

yes I'm using preview to resize, but when I do, it has a preset pixels/inch....

This is what I need help on... do I change this setting? For example;
One of the templates needs images - 370px Width x 210px Height
The pre-setting for this is 300 pixels/inch.....

Do I change the 300 pixels/inch or leave as is? Other photos come out at 72 pixels/inch....... it is never the same......

 

[DoFoT9]

hello,

yes I'm using preview to resize, but when I do, it has a preset pixels/inch....

This is what I need help on... do I change this setting? For example;
One of the templates needs images - 370px Width x 210px Height
The pre-setting for this is 300 pixels/inch.....

hi emma, i will elaborate more

untick "keep in proportion" so that you can choose custom sizes. yes - please use "px", this does = pixels. see the attached image, you should mirror it exactly to achieve what you want to get.

Do I change the 300 pixels/inch or leave as is? Other photos come out at 72 pixels/inch....... it is never the same......

this number depends what the original image is. this setting is known as DPI (dots per inch) - it basically means how many dots on inch there are in an image. higher will obviously have better looking images. 72DPI is fine for online content, where will the content be used? i recommend sticking to 72DPI.

 

[EmmaLouise]

hi,

thank you so much for your reply..

the content is for a website, photographs of hotels.... the web guys said that they had set it so that whatever the size of the photo I put in the cms, it will come out on screen the correct size, but if I could scale the photos down the page would load quicker, so obviously I want to scale them down!

the photos that need to be 370/210 most come out as 72 dpi so I'll keep that as it is then.... but for the ones that come out as higher, should I lower it to 72 dpi?

the photos that need to be 156/113 come out at 304.8, 254, 300 etc etc, should I lower them down to 72 dpi? or leave them as is?

I received the photos from each hotel individually, I was told to request high resolution and most are....... should I assume that the dpi is different because each photo is different? So therefore should I just be more concerned about the size that is needed and just keep the dpi as whatever it is?

am I making sense?

 

[DoFoT9]

hi,

thank you so much for your reply..

thats ok

the photos that need to be 156/113 come out at 304.8, 254, 300 etc etc, should I lower them down to 72 dpi? or leave them as is?

I received the photos from each hotel individually, I was told to request high resolution and most are....... should I assume that the dpi is different because each photo is different? So therefore should I just be more concerned about the size that is needed and just keep the dpi as whatever it is?

am I making sense?

ahh ok, its for a website. yes its all making sense

given that it is for a website, and a photographic one at that - i would recommend setting them all to the same DPI. it might be a good idea to get some sort of work flow happening.

1. set the DPI in Preview, save them and dont worry about the sizes.
2. download Resize 'Em All and use that to batch-process the size of the images into the predefined size.

there is probably a batch program to do all of these steps in one, but i am too lazy to look

 

[EmmaLouise]

Resize 'Em All[/URL] and use that to batch-process the size of the images into the predefined size.

great advice thank you and that program could well save some time bearing in mind I have around 4000 photos to deal with over the coming months!

Final question (I promise!) what dpi should I set them to?

 

[EmmaLouise]

ps. just tried downloading that app and the link doesn't work

 

[ergdegdeg]

DPI has absolutely no influence if you are using the pictures on a website. Just set them to the required pixel width and height and you're good to go.

Here's a very good explanation.

 

[EmmaLouise]

hi,

thanks for taking the time to reply..

I read the article, which did help me understand more but then reading peoples comments after means I am now confused again...

most were saying, like yourself that the dpi doesn't matter, then 1 guy said this;

'When client pops a 8M digital photo into their content, even if we’ve restricted its physical display dims via the code so that it doesn’t blow out the layout, that image has various critical effects. 1) It loads slowly 2) It eats both server disk space & bandwidth 3) It reduces the quality of the user experience overall'


obviously, I don't want to risk any of this happening, and as I have to change all of the pixels heights and widths anyway (using preview), changing the dpi is no extra bother, so am still confused.....

 

[ergdegdeg]

DPI has, again, nothing to do with the comment you posted from the article. This guy was talking about, for example, uploading and using a 1000x500 image and then using the HTML or CSS code to display it as a 250x125 image. Thus, he uploaded the big image, then uses code to make it appear smaller. I hope this explanation is clear

If you want, you can change the DPI when you change the dimensions, but it is not at all necessary because it has no effect on how the image is displayed on your website.

 

[EmmaLouise]

but does it effect how long it takes the page to load?

 

[ergdegdeg]

DPI does not, no. But using unresized pictures in their original dimensions does, yes. That's why it's bad practice to not resize pictures to the dimensions they will be displayed in on the website. So I would recommend you resize all the pictures to the required dimensions but leave the DPI (to save you a little work).

 

[EmmaLouise]

thank you

just to clarify;

so when I am resizing images using preview as my web guys said to;

I choose the appropriate size i.e. 370px width /210px height, uncheck 'scale proportionally' (otherwise it doesn't let me change it), leave 'resample image' checked and just go with whatever resolution (ppi) appears, whether it be 304.8, 254 or 72 etc!

So this process is correct? and one that is 304.8 will not make the page load any slower than one that is 72? Sorry to be thick but am a bit new to this!

ps. really really appreciate your help (both of you)

 

[EmmaLouise]

sorry me again,

am just reading up on all of this and this article;
http://www.techsoup.org/learningcenter/software/page6045.cfm

states;

'Finally, Windows allows a monitor to display a maximum screen resolution of 72 PPI, so there's no point in saving an image at more than 72 PPI; doing so will only cause the image to load slower without giving the visitor any increase in quality. And because Web graphics generally have low PPI counts, they will probably blurry or fuzzy if you attempt to print them.'


am still confused!

 

[ergdegdeg]

Hm, you said the image proportions need to be changed to? That makes it a bit more complicated, unfortunately. If you just resize the image and change proportions, the image will be squished or stretched. You can try it out to see the effect (but don't save ). You'll probably need to crop the image to the required dimensions before resizing it in order to not stretch it.

Other than that, the process is right. DPI has no influence on how fast the page loads since it's only about pixels and an image at 100x200 with a DPI of 72 only has 100x200=20 000 pixels, just like an image at 100x200 with a DPI of 300 only has 100x200=20 000 pixels.

'Finally, Windows allows a monitor to display a maximum screen resolution of 72 PPI, so there's no point in saving an image at more than 72 PPI; doing so will only cause the image to load slower without giving the visitor any increase in quality. And because Web graphics generally have low PPI counts, they will probably blurry or fuzzy if you attempt to print them.'

PPI is not DPI and DPI really does not affect how images are displayed on websites or how fast they load.

 

[EmmaLouise]

PPI is not DPI and DPI really does not affect how images are displayed on websites or how fast they load.

one minute I think I've understood it, then another twist comes! I thought that is was ppi, because it is pixels per inch in preview....so dpi doesn't affect the speed but does ppi?

Sorry!

am wondering whether I should just set everything to 72 and be done with it!

ps. after resizing the images look fine, so until one looks weird I won't worry about any stretching etc as have a headache as it is!

 

[ergdegdeg]

Sorry, there are so many aspects to it that it's sometimes confusing to me as well
Let's try again:

DPI: affects how big images appear when printed and has absolutely no effect on how they are displayed on websites or, for that matter, on any monitor.
PPI: affects how big images appear on monitors but you can't change that since the monitor you view the picture on has a set number of pixles per inch determined by the resolution and the physical size. A monitor will always display a pixel in an image as one physical pixel (unless you zoom in etc.).

The labelling in Preview is a little confusing yes, but it does indeed change the DPI used for printing. You can test it by changing the value for any image. You'll see that the pixel dimensions as well as the image size will remain unchanged.

 

[EmmaLouise]

this stuff isn't easy is it!

so to clarify, after changing the width/height, I'll just leave the resolution at whatever it is and whether it be 304.8, 254 or 72 etc the page will load at the same speed?

 

[DoFoT9]

PPI is not DPI and DPI really does not affect how images are displayed on websites or how fast they load.

yeh, you are right. i changed the DPI of an image and the size did not change one bit.

i read through that link - interesting stuff! i am still confused however, why doesnt changing the DPI directly change the resolution of digital media? i understand that it would change it for printed media.

 

[ergdegdeg]

this stuff isn't easy is it!

so to clarify, after changing the width/height, I'll just leave the resolution at whatever it is and whether it be 304.8, 254 or 72 etc the page will load at the same speed?

Yes, that's right.

yeh, you are right. i changed the DPI of an image and the size did not change one bit.

i read through that link - interesting stuff! i am still confused however, why doesnt changing the DPI directly change the resolution of digital media? i understand that it would change it for printed media.

I'm not sure how to explain the technical aspects, but that's just what DPI does . It does not change the number of pixels in an image and, as I said, monitors will always display a "logical" pixel in an image as exactly one "physical" pixel (unless you zoom in etc.).

 

[DoFoT9]

I'm not sure how to explain the technical aspects, but that's just what DPI does . It does not change the number of pixels in an image and, as I said, monitors will always display a "logical" pixel in an image as exactly one "physical" pixel (unless you zoom in etc.).

understood. DPI = hard copies!

 

[EmmaLouise]

thank you both, I really really appreciate your time