Photo Dimensions in iWeb - Am I correct?

Question

Level 1

4 points

Photo Dimensions in iWeb - Am I correct?

Is my understanding correct?

Under Inspector/Photos/Download Size there are three options, small, medium and large. From a previous post I was informed that these relate to:

1) small = 800px x 600px

2) medium = 1280 x 960

3) large = 1920 x 1440

On my photos page, I am draggin and dropping my images. If I select "medium" and my image is 2400 pixels on the longest side, does this mean that iWeb will convert the image to 1280 pixel?

And, if Inspector/Page is set to 1,000 pixel width, the image will be further downsized to something less than 1,000 pixels when it appears on the screen.

Am I understanding this correctly? I am trying to maximize my photos for viewing on the new iPad.

Thanks

MacBook Pro (17-inch), Mac OS X (10.7.2)

Posted on Apr 30, 2012 10:43 AM

Reply

Answer 1

Wyodor

Level 6

19,930 points

Apr 30, 2012 10:57 AM in response to Longknife23

Or use original size.

And why not try all options and then check the result.

Pick the one that suits your purpose.

Reply

Answer 2

Longknife23 Author

Level 1

4 points

Apr 30, 2012 1:29 PM in response to Wyodor

My basic question is in regard to the ultimate displayed resolution. Why download extra pixels if the page is limited to 1000 pixels wide. If I understand correctly, loading a 2400 pixel image on a 1000 pixed wide page is wasted. Possibly I am missing something in my understanding.

Reply

Answer 3

Roddy

Level 6

17,265 points

Apr 30, 2012 4:34 PM in response to Longknife23

There's another option in that you can turn off image optimization in iWeb preferences.

Then resize the images before you load them into iWeb...

http://www.iwebformusicians.com/Website-Photos/Image-Optimization.html

The fact that iWeb allows you to drag images into it and resize to whatever you want doesn't mean that its good practice to do it. These oversized files will slow your website download time .

Reply

Answer 4

Cyclosaurus

Level 6

12,915 points

Apr 30, 2012 4:45 PM in response to Longknife23

much better when you clarified your question.

My basic question is in regard to the ultimate displayed resolution... for viewing on the new iPad.

960px is fine for displaying in ipad.

however, images have more than one purpose; it can be for display and/or for print.

computer/ipad display can stay the same size, but for printing the higher resolution the larger or better the prints look. so it's up to you to decide.

you already saw my other post reagrding scaling web page when using ipad, by scaling with ipad safari... you can have smaller image for displaying (but bad for printing)

Reply

Answer 5

Cyclosaurus

Level 6

12,915 points

Apr 30, 2012 4:47 PM in response to Roddy

There's another option in that you can turn off image optimization in iWeb preferences

it does not apply to photos page.

Reply

Answer 6

Longknife23 Author

Level 1

4 points

Apr 30, 2012 5:22 PM in response to Cyclosaurus

I have no desire to print from the web site I am designing. My only intent is to design the best resolution for viewing with a new iPad, considering the constrants of the web page dimensions.

Reply

Answer 7

Cyclosaurus

Level 6

12,915 points

Apr 30, 2012 6:08 PM in response to Longknife23

then the image size is irrelevant, only the page size matter - i changed the detail view image to 800px wide.

you need to scale the page size to as i describe here:

https://discussions.apple.com/thread/3879070?answerId=18197437022#18197437022 in this section:

1) detect ios device

2) detect ios device display orientation (portrait or landscape)

3) get iweb page viewport (iweb page width)

4) figure out the scaling ratio (for portrait or landscape)

5) set a timer to scale ios device viewport (using javascript)

Reply

Answer 8

Longknife23 Author

Level 1

4 points

Apr 30, 2012 6:28 PM in response to Cyclosaurus

To clarify, I have turned Slideshow off and plan to use photo pages with single photo viewing. I have my page width set at 1000 pixels and page metrics set at 965 pixels. When an image is selected and opened it is sized to something less than 965.

I think I do not need the detect scripting you describe since it is for Slideshows. Am I correct?

Reply

Answer 9

Cyclosaurus

Level 6

12,915 points

Apr 30, 2012 7:39 PM in response to Longknife23

I think I do not need the detect scripting you describe since it is for Slideshows. Am I correct?

that's incorrect, you need:

1) detect ios device

2) detect ios device display orientation (portrait or landscape)

to set the viewport in ipad and scale it.

Reply

Answer 10

Longknife23 Author

Level 1

4 points

May 1, 2012 6:45 AM in response to Cyclosaurus

In my iPad test with the iPad in the landscape orientation, Landscape images are perfect, almost full screen and portrait images require a little scrolling, that is OK. However, when I rotate the iPad to Portrait orientation, the landscape image is sized smaller, almost the width of the iPad (again OK) however, the Portrait images are downsized too small.

Will the detect ios device modification fix this?

Where can I find more detail on adding this modification. I went back several threads and cannot find it.

Thanks again.

Reply

Answer 11

Cyclosaurus

Level 6

12,915 points

May 1, 2012 11:04 AM in response to Longknife23

that because portrait images are scaled to fit the height of detail view area.

so if you set your page width to 960px and detail width to 960px wide, iweb will makes the detail view height to 693px (for image).

that makes portrait image width to 520px wide (4:3 aspect ratio), it's decent but not much you can do.

here is example of 960px wide: http://temp.cyclosaurus.com/revolving/Photos.html#1

Reply

Answer 12

Longknife23 Author

Level 1

4 points

May 1, 2012 11:57 AM in response to Cyclosaurus

Cyclosaurus,

Thanks

I have my page width set at 1000px and my detail width set at 960px. On my iPad, my landscape photos fill all but 1/2 inch on each side. When I open your landscape photos they almost file the screen with minimal space on the side. Trying to make mine larger, I increased my detail to 980px and the image size did not change. What is happening????? How do I increase the image size? Is it related to the small, medium and large settings? I am using Medium.

Reply