Edit
---
Photo gallery / portfolio websites in 2020
Almost everyone is on fast internet these days, so one can be generous with image quality/dimensions for showcase-websites. Especially since photos are at the focus of the website, and your visitors know this and are prepared for this. If instead it was a
news-website, it would be much more important to squeeze every KB, since there are more mobile users, text+images must load ASAP, and image-quality is low priority.
Also, one should take into consideration where these images are being displayed. In X3, large images are loaded progressively into the X3 POPUP viewer, initiated by visitor. They are not blocking crucial page-load in any way. The X3 popup will preload both previous and next image while the current image is being viewed. By the time visitor navigates to next image, it is most likely already loaded.
Of course, even with high-quality images, there needs to be a balance. If image size is massive, it may affect visitors on slow internet. Also,
very large dimensions will affect the render performance on some devices, because all those pixels need to be rendered on screen (sometimes animated) and also stored in memory/RAM.
Do optimization!
In my opinion, the most important factor, is to put an effort into optimizing your images. With a good JPG image-compressor, even with large dimensions and high quality, you will get very satisfying file sizes. Almost can't go wrong. Some users have JPG files from cameras or from old apps that has very poor JPG compression. Even when running these JPG's through an optimizer in "lossless" mode, it could compress them down to 1/3 of original size. As discussed in an earlier topic, there are many tools that have excellent JPG image compression, but personally I use ImageOptim (mac/linux).
Large dimensions / high compression
A lot has changed since the mobile revolution several years ago. Nowadays, images are mostly "scaled down" to fit inside screen (or an area on screen), and browsers do a very good job of it. Now, when images are downscaled, "compression artifacts" (signs of quality degradation) are much harder to spot (sometimes impossible), especially on retina devices. What I have learned in later years, is that you can easily increase compression level, as long as your images are large. Large images with high compression, will often beat smaller images with low compression, both in file size and visual quality. The bonus is that you can have very large dimensions available for very large desktop screens.
About
recommendations for
dimensions and
compression, it's opinionated of course, and depends on other factors: Website's average visitors internet speed, average visitors location (proximity from server) and speed of server. Also, numbers by example, are you willing to sacrifice 1% of your visitors on slow devices so that the 99% majority can enjoy high quality images? For many photo-website owners, the answer will be yes.
tbp wrote:the optimal image resolution for original files? 2000px long side? 2560px? More? Less?
As long as you are using proper compression, you can easily use images
2048 - 2880 px to showcase high-quality images. Personally, if I was a photographer, I would perhaps choose
2560 px right now.
tbp wrote:Is the DPI/PPI setting evaluated by X3 or can I set whatever I want, e.g. 300dpi in Lightroom?
DPI is irrelevant for screens, which simply use pixel-resolution of images.
tbp wrote:What compression value do you recommend? In Lightroom I mostly use around 75% quality and I use JPEGmini in addition
I would go with something like 70% quality for large images, as it offers high compression with minimal loss of quality.
As soon as you start using smaller images (for example 1280 px), which are less likely to scale on screen, you may need to increase quality progressively.
tbp wrote:Which file size should I aim for? 500kb? Or even less?
500 kb should be acceptable, but it depends on detail and color for each image. In our
sample gallery, average file size is below
300 kb.