Thanks for asking!
Nl79140 wrote:Before I will try the demo version I like to know how X3 will handle the photo's for different layouts. The product looks good but I don't understand why there is no information about working of X3 and the size of each photo for different layouts.
First of all, I think you are "overthinking" things in terms of various gallery layouts. X3 will
AUTOMATICALLY serve optimally RESIZED images based on the current layout, taking the visitors SCREEN (pixel density) into consideration.
For example, check the gallery below, which shows the default "justified" layout:
https://demo.photo.gallery/galleries/nature/
First image top left, you will see "apples.jpg". The original image for "apples.jpg" is here:
https://demo.photo.gallery/content/2.ga ... apples.jpg
However, the original image is NOT served in this layout. From my macbook pro RETINA, X3 serves an image resized down to 640px width (which would be a perfect resize for this image nested in this layout, on MY screen):
https://demo.photo.gallery/render/w640/ ... apples.jpg
On non-retina devices (standard pixel-resolution screens), it will likely serve a
w320 or
w480 image inside the layout:
https://demo.photo.gallery/render/w480/ ... apples.jpg
When the image is clicked, if the visitor is on a relatively large screen, it will normally load the ORIGINAL image (see first link), or sometimes on a smaller non-retina laptop, it might serve a w1024 resized image (
https://demo.photo.gallery/render/w1024 ... apples.jpg)
As you adjust various layouts to suit you, images may display larger or smaller. X3 takes everything into consideration, calculates the display AREA of the image vs screen pixel-density, and then calls an appropriate image resize. In either case (and all cases), X3 will always check the actual display dimensions of the image AREA inside it's layout, check the pixel-density of the screen, and then call to load an image which is more or less PERFECTLY resized for the area the image consumes.
With this, I would like to
emphasize that there is nothing you need to do on your side in consideration to various gallery layouts. Your
ONLY task is to upload a "web-friendly" ORIGINAL image, and you need not worry about how images are resized and served for various X3 layouts. This is one of X3's features, and should really be part of ANY modern website gallery system.
In regards to what dimensions you should UPLOAD your images at, and how you should prepare your images, see my specific reply below.
Nl79140 wrote:What action must be done before and after upload to the X3 website with a specific layout.
Except for adjusting gallery layout settings to your liking, nothing.
Nl79140 wrote:How will X3 handle the photo before it will be show to the visitors?
As specified above, X3 will calculate the "best" size for an image, depending on the layout and screen. It will then call to load a resized (downsized) image, based on your uploaded original image. Furthermore, X3 will CACHE resized images on your server, so images are served FASTER as your image cache populates.
Nl79140 wrote:For example: the local jpeg is 6000x4000 pixels - 300dpi - 15Mb and will uploaded to my X3 website.
What steps must be done before and after the upload? Resize and reduce quality before the upload or resize it in X3 and X3 will do the rest (e.g. 72dpi)?
In regards to your ORIGINAL image upload size, this is slightly subjective. By DEFAULT, the gallery UPLOAD section will look like this:
Notice 1600 x 1600? This is because our RECOMMENDATION, is that 1600px resize (long side) is a good balance in regards to WEB-FRIENDLY image SIZE and QUALITY vs FILE SIZE. Images are normally nice and big, yet "acceptable" file sizes (300-600kb) for loading from a website. After all, X3 will often display the "original" image size when visitor clicks to view an image in the X3 POPUP (full size) or when using the standard vertical layout
[example]. There is no logical reason why you would want to upload a
6000x4000 pixels - 15Mb images to your website. There are no SCREENS that are good enough to handle this resolution, and no average visitor has any interest in waiting for their browser to download and display 15MB of data, as the image would resize down anyway.
Some website owners may like to have their original "full size" images at exceptional quality, perhaps limited to
2000 x 2000, while others are happy to set it to
1280 x 1280, which is still "acceptable" quality on almost all screens. In either case, it's a balance between file size and size/quality. You should NEVER upload 6000x4000 pixels at 15MB, without resizing, unless you have a very specific reason. I wrote a blog post about this:
Optimizing Images for Photo Gallery Websites
Thus, the "resize images" checkbox is checked by default on upload.
What if I don't want to use the X3 image resizer on upload?
In some cases, you may not want X3 to resize your original images for you on upload. Perhaps you have your own local procedure to resize images at your choice of compression vs quality. Thus, if you choose to DISABLE the [RESIZE IMAGES] checkbox (see screenshot above), you
should be resizing images locally PRIOR to upload. Allow me to quote the HELP section under SETTINGS > PANEL > UPLOAD, with emphasis on the
"manual resizing" section:
X3 Panel wrote:Upload Resizer
Default settings for resizing images as they are being uploaded. If you disable the upload resizer, original uploaded images will not be resized. This feature is recommended to make sure original images are resized to a web-friendly format, as it is dysfunctional for the website to force 5000px 4MB images.
* Images will often scale down additionally for certain layouts and/or devices, so the resize just sets the maximum 'large' image size.
Manual Resizing
You can disable the upload resizer if you are manually resizing images to a web-friendly format prior to upload from your application of choice. In fact, manual resizing is recommended if you are familiar with the process already, because it offers better quality control. A general web-friendly format for original images, may be between 1280-2000px long side with 85-95 JPG compression, but it all depends on your requirements. For a good balance, we recommend 1600 px long-side, at compression-level 95, for high-quality images at acceptable file-size.
Resize to Width and Height
The resize to width- and height fields, represents the bounding box of what your images will be resized within. For example, a 4752 x 3168 px lanscape-aspect image will resize to width-limit 1600 x 1067, while a 3168 x 4752 portrait-aspect image, will resize to height-limit 1067 x 1600. Original aspect ratios will always be kept intact.
Compression
JPG images are highly compressed with minimal 'loss', which means the quality degrades to a certain degree. However, if you leave a high-quality compression (90-95), you won't normally be able to detect any loss of quality with the naked eye.
300dpi
Just a note about your reference to "dpi". DPI is for print, and screens will always only utilize the pixel-resolution of an image. My macbook pro retina is displays at 1280 x 800, but since it is "RETINA", it is effectively a 2560 x 1600 px screen resolution. Images LARGER than 2560x1600 pixels or higher than 72DPI provides absolutely no visual benefit on my screen. Likewise, a "standard" 1280 px laptop screen, simply cannot benefit from images any larger than 1280px.
Conclusion
- You do not need to think about how X3 creates and serves "resized" (downsized) images for specific gallery layout combinations. This is automatic, and feeds of your original images, which are sufficiently large to cover images resized down into layouts.
- By default, 1600 px (long side) is a good, web-friendly "resize" for your upload originals. It can be tweaked. If you disable the resize, you should be resizing your images locally prior to upload.
- There is no logical reason to bypass resizing and/or upload images at "print" resolutions like 6000 x 4000 px.
Did I make sense?