Centering Popup

[DS928]

Tried it. Still not centering to page. It centers to the camera image. Is tooltip.js causing some of this not to work. I am trying to minimize the number a clicks a person has to do. Thats why I have the rollover. Otherwise, its on clik to see and another to close.

[Beverleyh]

I'm stuck on iPhone for the time being so I can't test anything but this looks promising: http://jmar.github.com/jquery-hoverZoom/

[DS928]

Thank you. I am trying it now. First impression is that it's slow to load large image the first time...about 5 seconds. But I am giving it a shot! Once again, Thank you.

[Beverleyh]

I think the speed has more to do with your images than the script. I say that because your page has been crashing my iphone if I have more than a few tabs open - something about it is really causing it to struggle, and usually that's the amount of stuff downloading in the background, more often than not, images.

When I got it to work, I pulled off an image ( http://www.menuhead.net/Restaurants/...dAdams_Eve.png ) - the first thing I noticed is that its a png, which isn't the best web format for photos. Jpeg is more appropriate for that.

The size is the next thing you should address - this current pic comes in at 262kb, which really is too big, but you can compress it to about a tenth of the size if you optimise and convert it to jpeg. You can optimise to around 60% without noticing much of a quality loss. Around 60%-75% is standard for the web.

I ran it through the image optimiser here on DD http://tools.dynamicdrive.com/imageoptimizer/index.php and sure enough, after converting to jpeg and choosing a 60%-70% quality compression, the resulting size is about 28kb. That's around a 90% saving!

I haven't checked all of your other images, but the 4 that I did were all high quality png, so for arguments sake lets say that they're all in the same png format... You could reduce your whole page to a tenth of its current size by converting to jpeg and optimising - and just think how much of an improvement that will have on speed.

You can use the DD image optimiser tool for single images, but for batch conversions, try Shrink-O-Matic: http://toki-woki.net/p/Shrink-O-Matic/

There are many FREE image optimisation tools available that do a fair job with compression, but most don't strip out all the extra background EXIF data (when a photo was taken, camera model, landscape or portrait, etc). That's fine for most people's web optimisation needs (the fact that a web designer/developer has used ANY form of image compression shows they're thinking about their visitors' needs and sets them apart from less experienced hobbyists), but if size is a critical issue and you need to crunch out every last byte that you can get your hands on, you can resort to more specialised tools, such as SmushIt http://www.smushit.com/ysmush.it/ , PunyPNG http://www.punypng.com/ or Adobe Fireworks (commercial), which will have greater collective results on larger amounts of in-page photos/images. I tend to 'smush' template/layout images and gallery photos (ie, the images that impact on every web page or a large, same-page group that could collectively slow things down)

Anyway, just some things for you to look into.

[DS928]

Thank you Beverly. You are the best! I really appreciate you taking the time time to explain all ofthis about images. I will get busy and start the conversions today. For some reason I thought png was the way to go. Once again. Thank you.

[Beverleyh]

Png has its place and it does offer an excellent, lossless quality - its just that the filesize that goes with it tends to be much larger. The general idea with any web image is to retain enough quality so things look good while keeping filesize small enough so load times aren't drastically slowed down.

General rules -

Use .jpg/jpeg for photos or detailed images that require a lot of colours, and optimise to about 60%-75% quality for web.

Use .gif for simple, small animations, logos, diagrams and images that require 1-bit transparency, which means a pixel is either transparent or it isn’t (no middle-ground). .Gif only supports 256 colours so you may notice speckling after saving in this format.
You might also like to try substituting .gif for .png-8 as it can offer a 7-12% saving over the .gif format.

Use .png-24 for images that require lots of colours, very precise/crisp edges and alpha-transparency (pixels can be varying degrees of transparency)

[DS928]

Thank you. That fills volumns of reading. A good set of rules!

[DS928]

Thank you Beverly. I ended up using colorbox. I still have to convert the images. But I am really happy with the results though. even with a loss of rollover / mouseover. Once again. Thank you. http://menuhead.net/Pages/BigHead.php

[Beverleyh]

No problem.

BTW - you've said thank you a lot in this thread but have you noticed the grey "thanks" (thumbs-up) buttons towards the bottom left of each post? Click those on the helpful replies and it makes the thanks official