Topic: Using SimpleViewer Pro for retina (or other HiDPI) displays

Hi there,

I just got a new MacBook Pro Retina, and absolutely love the screen. But my website looked terrible, because everything rendered at 72 dpi.

But I was very pleased to find out, that it is very easy to make your Simple Viewer gallery look nice on a HiRes screen.

If your thumbnails are (e.g.) 75x75, then export them twice the size. In my case I created a Photoshop batch action, that uses the images from the "image" folder, to create 150x150 thumbnails into the "thumbs" folder. Easy.

You can use a pretty high compression. In Photoshops "Save for web..." I usually use 45% compression. Because of the high dpi count, you dont see JPEG artifacts that much. The resulting files sometimes have the same size as the 72 dpi versions.

You should also make sure that your "large images" are large enough to look nice & crisp.

It also looks nice on mobile devices with HiRes diplays (like the iPhone 4/5).

I havent updated all galleries, but you can have a look at this one (if you sit at a HiRes display):

Hope this was interesting for some of you,

Re: Using SimpleViewer Pro for retina (or other HiDPI) displays

Thank you for sharing your tip.
Hopefully it will be of use to others.

Steven Speirs
SimpleViewer Support Team

Re: Using SimpleViewer Pro for retina (or other HiDPI) displays

I don't understand why JanR's technique improved the look of her images.  If I understand correctly, she made her own thumbnails in Photoshop, at twice the pixel dimensions, from the images she'd placed in the simpleviewer album's images folder.  But doesn't the gallery.xml file still say the images are to be displayed at 75 x 75 pixels wide?

Anyway, the reason I'm reading this post, is I'm searching for a way to adjust my svBuilder Pro v2.3.1 settings so that I will get better quality images as I import them into my album via svBuilder.  I tried a little test this morning, on an album where I'm importing images at 900 pixels wide but the settings say 890 pixels max width.  There was one problematic image that I used for my test.  Here's what I found out:

  - The original image appears the most crisp
  - the revised image (downsized by sv-builder) looks less crisp and less vibrant

If I take the original image and downsize it to 890 pixels wide in Photoshop, at level 6 JPEG compression with no color management changes, the result has the same vibrant COLORS but has the same slightly reduced crispness of the original image.

I sure like the convenience of SimpleViewer as a way to batch resize all the photos of my album, but this project is for a photographer's website so I don't want to reduce the original quality of the JPEG images he sends me, so I want to know how I can do better, besides sizing all the images separately myself in Photoshop.  Are there some sv-builder settings that will result in better image quality for my albums?

Looking through the sv-builder documentation, the only thing I can find is imageSmoothing, but that seems to apply in real time only, for when the album is displayed within a page smaller than the nominal size.

A clue, saving my test image in photoshop at JPEG compression level 6, the file size is 86 Kb.  The same image, same pixel dimensions coming out of sv-builder is only 52 Kb in file size.  That makes me think sv-builder is compressing the images more than I'd like.  Is there an adjustment for image level compression?

Carol Mattsson

Re: Using SimpleViewer Pro for retina (or other HiDPI) displays

JanR's solution would benefit only retina displays which have a pixel density of 2.
Using images of twice the height and width of the actual dimensions at which they are displayed will maximize their on-screen visual quality on retina displays.

Is there an adjustment for image level compression?

Yes. Click the 'Change...' button in the 'Image Size' control panel on the 'Images' tab and you can change the quality of the resized images from the default value of 80 to a higher value (on a scale from 0 - 99).
Alternatively, you might like to just have svBuilder-Pro use your original images in the gallery (rather than resizing them) by
deselecting the 'Resize Images' checkbox. In doing so, svBuilder-Pro will copy the original images across to the gallery's 'images' folder without resizing them.
As you suggest, imageSmoothing will be applied to images at the time the gallery is displayed rather than at the time the images are resized during the gallery creation process. However, imageSmoothing is applied to all images in a gallery so you might like to try turning this off by setting imageSmoothing="FALSE" in svBuilder-Pro's 'Customize -> Main Image' section.

Steven Speirs
SimpleViewer Support Team