• Welcome to the Lightroom Queen Forums! We're a friendly bunch, so please feel free to register and join in the conversation. If you're not familiar with forums, you'll find step by step instructions on how to post your first thread under Help at the bottom of the page. You're also welcome to download our free Lightroom Quick Start eBooks and explore our other FAQ resources.
  • Stop struggling with Lightroom! There's no need to spend hours hunting for the answers to your Lightroom Classic questions. All the information you need is in Adobe Lightroom Classic - The Missing FAQ!

    To help you get started, there's a series of easy tutorials to guide you through a simple workflow. As you grow in confidence, the book switches to a conversational FAQ format, so you can quickly find answers to advanced questions. And better still, the eBooks are updated for every release, so it's always up to date.

Exporting for website

Status
Not open for further replies.

h.peerboom-quicknet.nl

New Member
Premium Classic Member
Joined
Aug 14, 2019
Messages
4
Lightroom Version Number
10.3
Operating System
  1. Windows 10
Hi,
What are the optimal export setings regarding with and hight? I present my pictures full screen.
Thanks in advance
Bert
 
Depends on your website, and who you are showing too, and the website image or galley tools.

Tim

Sent from my HD1907 using Tapatalk
 
What are the optimal export setings regarding with and hight? I present my pictures full screen.
Personally, I crop my images to the picture I see so most of my pictures are different dimensions. It comes down to what you want to show.

When I create web pages, I normally have both a small image to display and a larger one for the viewer to drill down on. LrC does this with the Web module.

These days you need to also consider the device the user is viewing the picture on. This is called 'Responsive' web pages which adapt based on the dimensions and capabilities of the device.

If you are looking at standard monitors, then these days a 16:9 aspect ratio is fairly common with a resolution of 1920x1080. This resolution is the largest size my camera club accepts and is respect to monitor monitors.
 
Social media giant Facebook limits the width of any image that users upload to 2048 pixels in the long dimension. Adobe proxy file sent to the Adobe cloud and viewable in the user web page also uses a similar limit to the long dimension.
This is probably a good rule for user managed websites as well.


Sent from my iPad using Tapatalk
 
Last edited:
Hi,
What are the optimal export setings regarding with and hight? I present my pictures full screen.
Thanks in advance
Bert
Images are shown 1:1 on the internet, so 1 image pixel is 1 screen pixel. If you want to show your images in good quality full screen, then 1920 x 1080 may not be enough. There will be plenty of visitors with higher screen resolution. If somobody uses a 4K or 5K screen, they will normally not have set their resolution that high (because that would create tiny menus and other interface items), but 2560 pixels wide is quite common on those screens.
 
Images are shown 1:1 on the internet, so 1 image pixel is 1 screen pixel. If you want to show your images in good quality full screen, then 1920 x 1080 may not be enough.

According to the Worldwide Screen Resolution Stats (Jan 2020 – Jan 2021), the most commonly used resolutions across mobile, desktop, and tablet are:
1920×1080 (8.89%)
1366×768 (8.44%)
360×640 (7.28%)
414×896 (4.58%)
1536×864 (3.88%)
375×667 (3.75%)

According to StatCounter, the most used desktop screen resolutions from March 2019 - March 2020 are:

1366x768 (22.98%)
1920x1080 (20.7%)
1536x864 (7.92%)
1440x900 (7.23%)
1280x720 (4.46%)

It is most important to know your audience. While you and I may have the highest resolution 4K or 5K screens, we are in the minority. A 1920X1080 screen needs to accommodate the width of the web page AND the image TAG needs to fit inside the web page width. Good web design practices recommend image TAG sizes smaller than the typical user screen.
Since friction is more likely to occur on smaller screens, design with a mobile-first approach. It is harder to narrow a desktop layout for a mobile viewport while doing the reverse is easier.


Sent from my iPad using Tapatalk
 
Last edited by a moderator:
There are many important nuances to be aware of here.

What are the optimal export setings regarding with and hight? I present my pictures full screen.
Any website is potentially capable of showing any image full screen, if the website has the option to scale an image of any pixel dimensions to fit the pixel dimensions of any display. But because scaling a small image up to a large display will obviously look bad, the real question is: What is the largest display on which you would like to support full resolution display of your photos? The answer is not straightforward and depends on tradeoffs you decide to make. The tradeoffs are unavoidable; because displays come in a vast range of pixel dimensions and aspect ratios, you simply cannot make one size perfectly fit all.

So the first tradeoff is that you have to pick a display size (in pixel dimensions, not inches or cm) to target as the largest size you want to support. You may or may not feel like you have to support full resolution on a display such as the Apple Pro Display XDR, which is 6016 by 3384 pixels.

Another tradeoff is whether you are concerned about anyone downloading a full resolution image without licensing it from you, since if you are not OK with that and they use or resell the image, it could constitute copyright infringement. For that reason, many photographers limit the pixel dimensions of the images they display on their web site.

A website can be coded so that you do not have to make this decision at all, which frees you from a lot of tradeoffs. For example, the photo website service I use provides a resolution limit option for each web gallery. Instead of making a resolution decision at export time, you simply export at the image’s native pixel dimensions and upload that to the web site, and then on the web site, you limit the maximum pixel dimensions that the viewer gets to see and potentially download*. When a web site lets you upload full pixel dimensions while limiting the pixel dimensions available to the viewer, you get these advantages:
  • You don’t have to think about what pixel dimensions to upload. Upload the full pixel dimensions.
  • On the website side, you can limit the pixel dimensions sent to a viewer’s web browser, and you can change that at any time without having to upload a new set of differently scaled versions of the images.
  • If you decide to let people order prints directly from the web site, once again you do not have to upload print resolution versions because you already uploaded them at full pixel dimensions, not some arbitrarily limited pixel dimensions.
  • Because the uploaded image is the full pixel dimensions, it is also a full resolution online backup of those images.
  • If the website is coded to adapt the displayed pixel dimensions on the fly based on the detected display size, you don’t have to agonize over which monitor pixel dimensions to target for quality full screen display. The website simply detects the display’s pixel dimensions, and sends downsampled versions of the full resolution original to speed loading times on displays that have lower pixel dimensions than the uploaded photo. A big desktop screen gets a big version, a phone gets a small version, and they are both full screen at full resolution.
You can tell that the flexibility you have in your decision can largely depend on the capabilities of the website software you use. Unfortunately I’m not familiar with active.admin. If that software only lets you store and display one set of images at the same pixel dimensions that were uploaded, then you have to make the tradeoff decisions discussed earlier.

*Remember that download prevention, such as right-click blocking, is usually easy to defeat.
 
I didn’t say that the majority or even a large minority uses 4K screens, but the OP said he wants to show his images full screen, so he should be aware of the trend towards higher resolutions.

The most important thing in my earlier post is “know your audience” You do not want to send enormous images if the screen is not going to display these 1:1. The larger the image, the longer the page takes to download to the user’s browser. If that browser is limited to WiFi speeds, then you are going to have issues. By sending images sized to fit in the size parameters of the Image TAG, will be most efficient.

Adobe determined the 2560px on the long edge was adequate for web viewing and server storage. Faces book resizes to 2048 pix for every image users upload.

If the user was to show his images full screen and as improbable as it may seem, the web package soft ware will embed an image TAG to do this inside HTML code, you still do not know the answer to the question,”What size is full Size?” Your screen? My screen? The OPs screen or some user on an iPhone?


Sent from my iPad using Tapatalk
 
I used to use a product called JAlbum. It generates a static website you can upload to any server, and some of the templates had the ability to generate multiple sized versions of your image. Depending on the browser resolution it downloaded the best for with minimal size.

But as others have said. 1. Know your audience. 2. Know what you want to expose from an IP perspective.

Sent from my HD1907 using Tapatalk
 
Status
Not open for further replies.
Back
Top