Known Participant

Question

LR Classic web gallery images appear larger than specified

Forum|Forum|29 days ago
April 23, 2026
7 replies
134 views

Using LR Classic 13.2 on a MacBook Pro OS 13.6.4. When creating and exporting a web gallery, using the Classic Gallery template, and sizing the images, the sizes are increased by 100% when viewing in LR or a web browser (tried Chrome, Firefox, and Safari). So a 1000px image becomes 2000px, and noticeably softer in sharpness. However it doesn’t do this on my lower resolution monitor (2 monitor setup). I can move the browser window from monitor to monitor and see the image quality change. Why is this happening and how can I maintain the image size specified (is this html code I can modify)? Thanks!

Per Berntsen

Community Expert

@Conrad_C

That’s a very thorough explanation!
I was going to do this today, but you saved me the trouble.
And your knowledge about Macs (which I’m not familiar with) made it even better.
Also, using screen PPI instead of dot pitch makes it much easier to understand.

@darrisleeharris

Conrad’s answer should tell you everything you need to know.
One thing I’d like to add is the downsides of using a reduced screen resolution – monitors perform best at their native resolution.
Reducing the resolution will affect sharpness for images as well as text.
This might lead you to believe that sharp images are blurry, and you might oversharpen them.
The image I posted earlier is very sharp when viewed at 100%, 1900 x 1200 resolution (native).
At 1280 x 800 it looks terrible.

Always view images at 100% view to assess sharpness, noise and general image quality.
This the only view that gives you a true representation of the image – one image pixel is displayed using one screen pixel. Any other magnification will be inaccurate and misleading because the image has been scaled.
The exception is when using a high resolution/Retina screen, like the MacBook Pro with a 254 PPI screen. The pixels are so small that everything seems to be sharp, and it’s necessary to view at 200% to establish if an image is sharp or not. Viewing at 200% has the same effect as reducing the resolution by 50%, but without the downsides I mentioned above.

I have a Windows laptop with a 13” 3000 x 2000, 258 PPI screen, and I always view images at 200% instead of 100.
This simulates an effective screen resolution somewhat higher than, but similar to my 24” 1920 x 1200 desktop monitors.

Conrad_C

Community Expert

I think Per and I are thinking along the same lines. And I have a very similar setup of a 14” MacBook Pro driving two older external displays. Here is what I think. First we’ll solve for why the image looks different sizes on the desktop displays.

In image editors (not just Lightroom and Photoshop, but across the industry), what they call 100% really means 1:1, or one image pixel to one screen pixel. When you have displays with different resolutions, the pixels will be different sizes, so the size of 100% magnification will be different. (Being so variable, 100% for screen display is not the same as when 100% is defined as Actual Size for print.)

To know how large the image should appear at 100% on each display, first we need to figure out the display resolution by knowing one dimension (width or height) of the display in both pixels and inches, and then divide pixels by inches, to get pixels per inch. For your desktop displays, that means an image 1000 pixels wide appears at the following widths in inches in an image editor and a web browser. If I did the math right, the width in inches in the last column is about how wide a 1000 px image should measure if you hold up a ruler to each of those displays. (Is that what you see if you measure them with a ruler on your end?)

	Panel width in pixels	Panel width in inches	Display hardware resolution (px/in)	OS scale factor	1000 px wide image, at 1:1 magnification, in an image editor and web browser
BenQ SW272Q	2560 px	23.5 in	109 ppi	1x	9.2 inches wide
Auria EQ176P	1280 px	13.3 in	97 ppi	1x	10.4 inches wide
NEC P242W	1920 px	20.5 in	94 ppi	1x	10.7 inches wide
NEC P242W set to 1280 px wide	1280 px	20.5 in	62 ppi	1x	16 inches wide

That all makes sense; if a display was 100 ppi, then you would expect a 1000 px image to be 10 inches wide on that screen. These widths are a little more or less than 10 inches wide because the displays are, by default, slightly above or below 100 ppi. When you changed your P242 to 1280 px wide, its 1:1 resolution dropped to 62 ppi so the image appears wider.

OK, now we bring in the MacBook Pro. The big difference here is that the panel has so many pixels that the pixel density works out to 254 ppi. At such a high resolution, 1000 pixels wide is only 3.9 inches, so that is how wide the image measures in an image editor like Lightroom Classic, at 100% magnification, at the default display resolution setting for a 14” MacBook Pro.

When a desktop display exceeds roughly 190-200 ppi, macOS and Windows decide they must switch to 2x HiDPI/Retina to avoid making the UI too tiny to read, so macOS decides the 254 ppi MacBook Pro display should be Retina 2x. The web browser detects this in the OS and if there is no code on that web page that handles HiDPI/Retina, then the browser decides it should enlarge the image 2x to be consistent with the UI scaling. That makes the image 7.3 inches wide.

So the image editor displays the 1000 px image using every tiny pixel of the display (3.9 inches wide at 254 ppi), but the web browser enlarges the image (7.9 inches at 157 ppi) in line with the current UI scaling, keeping it consistent with what a viewer would expect.

	Panel width in pixels	Panel width in inches	Display hardware resolution (px/in)	OS scale factor	1000 px wide image, at 1:1 magnification, in an image editor	1000 px wide image, at 1:1 magnification, in a web browser
MacBook Pro 14”	3024 px	11.9 in	254 ppi	2x	3.9 inches wide	7.9 inches wide

In this way, an image 1000 px wide shows up at four different widths in inches on each of the four displays, because each has a different panel resolution in pixels per inch. Additionally, on the MacBook Pro (or any other display with over about 200 ppi), some applications may apply 2x scaling in line with it being a Retina display at 2x.

As another example that doesn’t even involve an image editor or web browser: If you use QuickLook on the Mac desktop to preview a 1000 px graphic and take a screen shot of that window, when you open the screen shot in any image editor it will say the graphic is 2000 px wide; so even QuickLook blew up the image on the Mac desktop.

darrisleeharrisAuthor

Known Participant

Thanks Per and Conrad, you’re great!

I understand about viewing at 100% and how a pixel size is relative. It’s the 2x scaling that’s confusing. If I’m following, the only control normal users have over what gets scaled, is to change their display resolution or even the display itself (to a lower res model). Is that accurate?

Conrad_C

Community Expert

You can have more control than changing the display settings or switching to a monitor with a different panel resolution. Sometimes you get more control with the software that goes with your display, like the BenQ software. Or you can install additional third-party software with advanced options.

For example, there are Mac utility applications that expose more options for displays, such as SwitchResX or BetterDisplay. The picture below shows BetterDisplay. The way it’s set up, with the option “Always show both low (non-HiDPI) and high (HiDPI) resolutions” on, it shows not only all possible resolutions for a display, but all of those resolutions as 1x (low-resolution) or 2x (high-resolution).

That’s why you see some resolutions listed twice, such as 2560 x 1440 that’s highlighted in green. One of that pair has a symbol next to it that BetterDisplay uses to mark 2x resolution. The display doesn’t actually have enough real pixels to display that full resolution, but BetterDisplay builds a 2x video buffer (5120 x 2880) in memory and projects that on the display. Although it doesn’t look much different, it does “trick” the OS into letting you simulate different levels of UI scaling on any display.

If this sounds complicated and confusing…it is. With these advanced options, it’s very easy to put your display into a weird state that you might not understand (it’s happened to me). But the point is, if you’ve got a good handle on the principles and the math, with the right software you can have more control over simulating UI and 1:1 sizes on various displays.

But as always, you still have to take into account how different applications interpret the current display settings, like how a web browser will or won’t decide to double the size of a graphic based on both the display settings and the web page code.

darrisleeharrisAuthor

Known Participant

Thanks Conrad!

Reviewing the OS Settings, I did see more resolution settings for the old Auria display (had to click a button), and that the coarser setting that enlarged the images was “HiDPI” (explaining why it enlarged the images). But I didn’t see HiDPI or Retina settings for the BenQ. So I remain a little confused how the highest resolution setting does not enlarge the images. Could all the resolution settings on this display be HiDPI, except for the highest?

In the end, this all came to my attention because a client mentioned that the photos in a gallery were blurry. What should I tell them?

Thanks again!!

Darris

Per Berntsen

Community Expert

I have to ask you one more thing – to measure the width of the screen area in inches (not including the frame) on all three monitors. Height is not necessary.

darrisleeharrisAuthor

Known Participant

BenQ SW272Q, 23.5” wide
Auria EQ176P, 13.25” wide
NEC P242W, 20.5” wide

Conrad_C

Community Expert

Also, which model of MacBook Pro is it, and how wide is the screen? (same as Per asked, width not diagonal, and not including the bezel)

Per Berntsen

Community Expert

You seem to be expecting a 1000 px image to display the same physical size (measured with a ruler on screen) on any monitor. It doesn’t work like that.
A pixel does not have a fixed physical size. The size is determined by the physical dimensions of the screen and the screen resolution (pixel dimensions). See my previous post.

So –
What are the sizes of your monitors in inches? (as stated by the manufacturer)
And are you running both of them at their native resolution?
If not, at what resolution are you running them?

In the screenshot below a 1000 px wide image is open in Photoshop.
My screen resolution is 1920 x 1200.

I then changed the screen resolution to 1280 x 800, and the image displays like this:

darrisleeharrisAuthor

Known Participant

Sure, maybe, but I understand that things will appear larger or smaller based on the resolution (one reason I have a coarser resolution - to make type bigger for my middle aged eyes).

Here’s a test that might be helpful -

Using just the BenQ SW272Q 27” monitor, with a finder window, I viewed an image at each resolution, 1920x1080, 2560x1440 (I think this is native), 3008x1692, 3360x1890, and 3840x2160.

To view the image, I merely hit the space bar to create a preview. I then did a screen capture for just the image (command+shift+4, then select the image). I then did file info for each screenshot (command+I). The image is 1000px, but the only screen capture that read 1000 (and not 2000) was the finest resolution, 3840x2160.

I did the same test with the NEC, at the native 1920x1200, then 1600x1000, and 1280x800 - all read consistent pixel dimensions.

Same test with the Auria, at the native 1280x1024 the image size was normal, but when I switched to 1024x819, it behaved like the BenQ.

So I’m still a little confused why this would happen at certain resolutions. But I do feel better that this doesn’t seem to be a LR problem. Thank you for helping me understand that!

Per Berntsen

Community Expert

I wrongly assumed that one of your monitors was high resolution (4k or more), but it turns out that they’re both standard resolution. (or less)

The physical size of a screen pixel (called dot pitch) depends on two things – the physical size of the screen and the number of pixels.
So what are the sizes of your monitors in inches? (as stated by the manufacturer)
And are you running both of them at their native resolution?
If you reduce the screen resolution, everything will display larger.

darrisleeharrisAuthor

Known Participant

Hi Per Berntsen,

Indeed, I don’t normally produce video, so no need for anything more than 2K. And I’m not sure this is a monitor issue.

I’ve tried four different computers, and four different LR versions, and only the newest and oldest LR versions operate normally. The newest computer is an Apple Studio, running LR 15.1 (monitor is 1920x1200). The oldest is a Mac Trashcan running LR 9.2 (monitor is 1920x1200). And the other two computers are 2021 MacBook Pros; one running LR 15.1 (1512x982), and the other in a two monitor set up running LR 13.2 (already mentioned before).

To confirm, the newest and oldest versions of LR produce web files that are not doubled in size when viewed in a web browser. And of course the newest version of LR is not compatible with my day to day work machines (MacBook Pro).

Any other suggestions? Thanks!

darrisleeharrisAuthor

Known Participant

Ok, I retract my statement about monitors, you must be correct, but I’m confused as to what’s happening. I’m not even sure it’s LR thing now. When I view the website that LR created on three different monitors, I get the correct size on 2 of them - an old NEC 1920x1200 (that used to be calibrated) and an old Auria 1280x1024 (low quality monitor for tool palettes). The newest monitor, BenQ 1920x1080, does not work correctly. My next test is finding a LR alternative to create a web gallery.

Per Berntsen

Community Expert

High resolution screens have very small pixels, so a 1000 px image will display physically much smaller than on a standard resolution screen.
To compensate for this, web browsers will automatically scale images (and text) to 200% when they detect a high resolution screen.

If you have your own website (designed and developed by yourself or a web designer), there are ways to get around this problem.
One way is to serve high resolution screens a 2x high quality image (2000 px in your case), and trick the browser into thinking that it has already been scaled to 200% by the use of a script.

You can see it in use on my website, perberntsen.com, which was made several years ago. There might be easier/simpler ways to do this now.
The Lightroom web galleries do most likely not have this kind of feature. (never used them)

darrisleeharrisAuthor

Known Participant

Thanks for the reply Per Berntsen! Alas, I already tried making the image bigger (thinking the browser thought the image was too small at 750px). The image is still displayed at double the pixels. LR is doing this before I even output the web files. In the Web module (classic gallery), I enter 1000px, or whatever, and then in grid view, click on an image to display it, and it’s double the pixel size (I do a screenshot, then measure it). To confirm, when the images are outputted into the resources folder, they are the correct size.

Regarding how browsers display images, isn’t there some HTML code that I can include that tells the browser not to upscale the images? And by the way, one monitor is 1280x1024 and the other is 1920x1080. Is a 2K monitor really that different than a 1280?

Thanks again!

Conrad_C

Community Expert

I think Per is correct, and to use more specific terminology, this is how it works:

It depends on if a display is set up in the OS as HiDPI (Windows/Android) which is the same as Retina (macOS/iOS). On both sets of operating systems, that means:

If the display is not set to HiDPI/Retina, as in older displays, then most web browsers display an image at 1:1 (one image pixel to one screen pixel). It matches the photo editor, but this leads to the same problem that the UI has: As the panel hardware resolution increases, all 1:1 elements become smaller until they become too small to read or see comfortably. This problem is exactly what led to the development of HiDPI/Retina.
If the display is set to HiDPI/Retina, the OS is told what scaling (can be called device pixel ratio or scale factor) to use for UI on that display, and web browsers apply the same scaling for images. For desktop displays this can be 2x, for phones it’s sometimes 3x because the screen is smaller. This is why a 4K computer display (3840 x 2160 px) set to HiDPI/Retina actually displays a “looks like” resolution of 1920 x 1080 px at 2x scaling, or double the pixel density of a legacy 1x display. If a web browser detects HiDPI/Retina at 2x, it will show images at 2:1 (two screen pixels for every image pixel along one dimension).

Applying this to your displays, the 1280 x 1024 display is lower resolution, so assuming it defaults to the old 1x scale factor (not HiDPI/Retina) on Mac/Windows, then a web browser will choose to display images at 1:1.

If your MacBook Pro model is 2012 or later, then its display defaults to Retina scaling, so a web browser will see that, assume 2x pixel density, and apply 200% scaling to compensate. So I would expect images to look about twice as large in a web browser as in an image editor.

In this way, in a photo editor the same image can appear to be larger on the 1280 x 1024 display than on the MacBook Pro Retina display, but in a web browser the image on the MacBook Pro Retina display will by 2x how it looks in a photo editor. And these differences are totally expected and normal after accounting for both the differences in panel resolutions and the differences in pixel density scale factor.

It’s very important to understand that this isn’t specifically about Lightroom or Photoshop or Safari or Chrome or Edge. On a given HiDPI/Retina display, just about any image editor you try will display an image at 1:1 (one pixel to one screen pixel) for maximum editing precision, but just about any web browser will apply the OS setting for HiDPI/Retina scale factor.

By the way, this is not weird, this is how print has worked for decades. 1:1 view in an image editor is not the size we expect in print. To achieve 300 ppi for print, the image must look smaller in print than it does at 1:1 on any screen with a panel resolution lower than 300 dpi. Only after screens started reaching print resolutions was it necessary to come up with HiDPI/Retina, to provide the same necessary pixel density correction that we are already used to for print.

The resolution choices in macOS System Settings / Displays are usually Retina by default, but if you use third-party software you can for example specifically tell macOS whether you want a display to be Retina (2x pixel density) or not (1x pixel density). So you could set a 14” MacBook Pro to its default of “looks like” 1512 x 982, which is its native panel’s 3024 x 1964 at 2x pixel density. Or to 3024 x 1964 at 1x, where the UI will be too small to read comfortably, which is why this choice is not shown by default on macOS.

isn’t there some HTML code that I can include that tells the browser not to upscale the images?

It can be HTML code with CSS or JavaScript. Again I think Per is on the right track with what he already posted: Upload image sets at 1x and 2x pixel density, and include code that lets the web browser choose the correct image set and scale it correctly. I’m not a web developer, but one common method is having the website code include CSS media queries to ask the web browser what it knows about the display. If the browser says the display is HiDPI at a certain scale factor (such as 2x), then the CSS uses the appropriate code block to download and size the appropriate images for that scale factor. I don’t know which web gallery makers support this, but some examples of the technique is in the following links.

Handling responsive images in HTML

Retina Display Media Query

My next test is finding a LR alternative to create a web gallery.

As I said, this is not specific to the applications you are using because all image editors and all web browsers do the same thing, following established industry standards. The only way it’s going to work differently or easier is if the web gallery software supports HiDPI/Retina displays by exporting code and image sets optimized for responsive design. So that’s what you specifically want to look for in web gallery software.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded