How to achieve best JPG qualities

How to use all those parameters available to get optimal results?
(you can download this long text as PDF file ;-)

I created 2 little zoom demo books you can look at:
demo book with zoomdoubleclick and
demo book with liquid scaling and gallery

Showing the same image with text in different resolutions.
The MZ3 File and the images can be downloaded for own tests. But attention: it has about 36 MB!
Just the 2 MZ3 Files are available without the images also (much smaller ;-).

Background "theory":
There are dozens of parameters you can use to adjust the final book to your needs.
Although we hopefully did a good job in setting useful default values, in many cases you can and should achieve better results in changing some of the default settings.
You can find all those parameters you can tweak at book, page and element level in the wiki; like:
Book Attributes (56!)
Page Attributes (9)
IMG Attributes (6)

Use the key words on the left of the wiki, the links on the main page of the wiki and the search function to find areas of interest.

Here some ideas and tipps on what knobs you have to optimize your books with jpg images. Not a complete list, more a teaser to encourage you to get deeper into the features and functions and options you have with MegaZine3!

At the end you have to find the best working set of parameters and configuration yourselves, dependent on your data, your design and your customer expectations.

First (because this question came up several times):
The gallery still works the same with v2.x as it did with v1.x. And it is still available. But if you're used to v1.x you should read the information about migration in the wiki, since some names of parameters changed!

In gallery mode (full screen) it is not possible to operate the book in the standard way because of FLASH security restrictions. In neither version. For example it is not allowed to enter data like page number or search strings.

But... with the latest version 2.0.6 you can set a parameter called zoomstep, Which defines how much you change the zoomscale with one click of the zoom button (or lock of the mouse wheel).
Using that new parameter together with reasonable settings for zoomminscale, zoommaxscale and zoominit you can optimize the quality of the presented JPG images of your book.
Together with the scale attribute you can switch/reload different resolution JPGs, which will support in having always the optimal quality.

So something like:
<book plugins="console print ... ..." 
zoomstep="2.0" 
zoomminscale="1.0" zoommaxscale="4.0"
zoominit="1.0"
pageheight="600" pagewidth="400" ... ... >
..
..
<page>
<img widh="400" height="600"><src>path/to/lowres.jpg</src>
<src scale="2.0">path/to/highres.jpg</src>
</img>
</page>
<spreadpage buffer="true">
<img widh="400" height="600"><src>path/to/image01-1x.jpg</src>
<src scale="2.0">path/to/image01-2x.jpg</src>
<src scale="3.0">path/to/image01-3x.jpg</src>
<src scale="4.0">path/to/image01-4x.jpg</src>
</img>
</spreadpage>

will do the following:
The book will open with zoomscale="1.0", i.e. the size of the defined page with a low resolution image that perfectly fits. As long as the image and book sizes match; i.e. the image is 400x600 pixels for above example).
This is achieved by zoominit="1", which opens the book with the page size defined by pagewidth and pageheight.
The optimal sized low resolution image (here placed in a "low res" folder)  is loaded, because scale is lower than the lowest defined scale (which is scale="2.0").
With this we achieve a 1:1 mapping of the image and monitor pixels: -> no scaling, high quality, fast

Zooming in to the next zoom level by button or mouse will lock at scale="2.0" because of zoomstep="1.0".
The (next) higher resolution image will be loaded. That should be 2 times the width and height (4 times bigger). In our case the original high resolution image should be downscaled (with e.g. Photoshop) to a size of 800*1200 pixels. Then again 1 image pixel fits one pixel of the monitor.

Same with scale="3.0" at the double size page (spreadpage), where we defined that.
And finally with the highest defined zoom level which is scale="4.0"; again with a best fit resolution image of the size 1600*3200.

If you had very high resolution photos (like from a 12 Mpix camera), you even could add the gallery with the original image assigned by HIRES.

Additionally to these basic "zoom tunings" there are other parameters you could play with to increase quality at not even fractions of 2, like "aa" for anti-aliasing.

If you prefer and like liquid scaling you have to find an optimum between smooth adjustment to the browser window size and quality.

BTW, the book parameter zoomdoubleclick="true" might be of interest if you do not have active (clickable) areas on your page. WIth that you can toggle between liquid scaling and full screen...

And: there is a full screen button in the nav bar that opens the book in full screen; like in gallery.
But with the same restrictions regarding entering of key strokes, though.
Advantage compared to gallery mode: There is no need for an extra definition of a HIRES path for the gallery ;-)

Just play a bit with all those options and you'll get a feeling on what might best work for you.

For those who read to the very end... some explanations to the demo book:

The first book has zoomdoubleclick enabled.
zoomdoubleclick
If you set zoomdoubleclick="false" (or delete it), the gallery for the first image works and you can see the image in full resolution when clicking on the spy glass. With zoomdoubleclick enabled you have the advantage that you can quickly and easily change between a locked zoom scale and the liquid scaling mode (i.e. the mode, where the book changes size with the browser window).
But double click or any other click will no longer work! And with that: no gallery!

The second book has zoomdoubleclick disabled and becasue of that the gallery is working
gallery and liquid scaling

Quick lesson on Liquid Scaling:
Starting in a browser or after refresh the book is in liquid scaling mode, i.e. the size varies with the browser window. Zoom the browser window and you will realize.
Then click the zoom button (or into the book to give Flash the focus and the mouse wheel works; and zoom with the mouse wheel). From that time on liquid scaling is disabled.
To reenable it, you either match the size of the book that it perfectly matches the broser window (with some experience you will realize it "snaps in"), or you refresh the browser or you make the brwoser window smaller than the lowest zoom level and then try to zoom down again. After that liquid scaling will work again.

Go to the last pages; those with the image spread across both pages. There the gallery now is enabled and you can click while the cursor shows the spy glass to open full screen with full resolution.
The last double page then shows a SWF page (look closely at the vector text!), the double page before shows a big JPG file.
That enourmous reolution only is possible in gallery mode, since this works without Flash. Flash has it's limits, maximum size of an image bust be smaller than 2880 pixel on either side!

You can switch images also in changing the language from German to Englsih and vice versa.

There are different combinations of images on the pages; i.e. different resolutions.
So you can closely wathc the effect of different zoom scales and resolutions; and what works and what not.

Then go to the last page and slowly turn the mouse wheel and zoom in and out.
You will see that at certain scale levels the laod bar pops up and a new image is loaded.
At levels 4, 9 and 12 different images are reloaded.

Do an analysis of the MZ3 files you can download to see what parameters are used; and how!


Enjoy!