Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Macintosh1984

macrumors 6502
Original poster
Dec 15, 2012
339
47
Hi!

What size do you use for photo enlargements in a website considering most used resolutions on desktop and mobile?

1920x1080px?

Example: 4104x2736px, better 1920x1280px or 1620x1080px?

Vertical photo: better height 1080px or 1920px?

Thanks!
 
Hi!

What size do you use for photo enlargements in a website considering most used resolutions on desktop and mobile?

1920x1080px?

Example: 4104x2736px, better 1920x1280px or 1620x1080px?

Vertical photo: better height 1080px or 1920px?

Thanks!
Depends on the content. You need to keep in mind that people also are on 5k monitors now. I usually use something like this to have those different images and sizes figured out: http://www.responsivebreakpoints.com/
 
  • Like
Reactions: ezekielrage_99
Depends on the content. You need to keep in mind that people also are on 5k monitors now. I usually use something like this to have those different images and sizes figured out: http://www.responsivebreakpoints.com/
The site is about "buildings construction". I'm using WordPress and for the gallery I want to use only 1 version of the image.

Please, what would you do? I was looking at these statistics

Screenshot-2017-01-12-10.53.53.png
 
Hi!

What size do you use for photo enlargements in a website considering most used resolutions on desktop and mobile?

1920x1080px?

Example: 4104x2736px, better 1920x1280px or 1620x1080px?

Vertical photo: better height 1080px or 1920px?

Thanks!
You will need at least two. It would not be polite to force mobile users ( or anyone ) to download 20 or more high resolution images for your gallery. Create a bunch of thumbnails that can be clicked to see a high resolution version.
 
  • Like
Reactions: ezekielrage_99
Of course we are talking about a gallery with thumbnails and lightbox effect!

Example: 4104x2736px, better 1920x1280px or 1620x1080px?
Example: 2736x4104px, better 1280x1920px or 1080x1620px or 720x1080px?
 
What are the photos of? What is the site's purpose?
Photography site use very high resolution, social media use lower.

Have images for mobile and desktop.
Use media queries to display the proper sized images for different display resolutions.

To answer the example query:
Yes. They will all work.
 
The site is about "buildings construction". I'm using WordPress. Unique photos for desktop and mobile.

I think that 1920x1080px is OK, do you think?

Example: 4104x2736px, better 1920x1280px or 1620x1080px?
Example: 2736x4104px, better 1280x1920px or 1080x1620px or 720x1080px?
 
... I want to use only 1 version of the image. ...

This is a very very very very bad idea!

Forcing large images on users slows the page rendering, massively so for users with limited bandwidth. You'll chase away many potential viewers with this approach.

You should have a set of modestly sized images that do not require any resizing in the client's browser as your initial presentation size. Having a second set of higher resolution images that they can choose to view is fine, but forcing these on the site's visitor is bad design, plain and simple.
 
Doesn't Wordpress have responsive images built in, since version 4.5 or so? Lightbox should also have a box to tick off for smaller devices.
 
Well... for this site I want to use only 1 version of the image...

Can you pleas answer to this situation?

1920x1080px is OK, do you think?

Example: 4104x2736px, better 1920x1280px or 1620x1080px?
Example: 2736x4104px, better 1280x1920px or 1080x1620px or 720x1080px?
 
OK 1920x1080. About vertical photo, example 2736x4104px, better 1080x1620px or 720x1080px?
 
OK 1920x1080. About vertical photo, example 2736x4104px, better 1080x1620px or 720x1080px?
depends on the context/content, but definitely not over 1080px, if you're only serving one image. Try something like 640 x 800 or something
 
If you want to use a single image for responsive design then the monitor size really doesn't matter as much as knowing the maximum size of the content area of your website. Even if you do not want to use media queries for your images, you need to be using media queries for the breakpoints in your major site structural elements (like content area, banner, sidebars, ...). Therefore, if even if a visitor has a 4K monitor, your content area will likely be much smaller based on the maximum size media query breakpoint (if your content area can really grow to the width of a 4K monitor then you have design problems).

For example, even on my 5K iMac, the latest site I developed using Bootstrap framework has 9 columns for the content area and 3 for the sidebar (auto left and right margins keep the site centered in the browser window of course). This results in the content area having a maximum width of 836 px. Therefore, I have set Drupal 8 to resize all images uploaded by editors to a maximum of 836 px. Make that image responsive using CSS and you are good to go.

For another example, look at the current page in MacRumors in developer window of your browser as an example. If they wanted to allow posting of images to posts, there is no reason to allow larger than 777 px because that's the max content area no mater how big a monitor the visitor has.
 
1920 x 1080 are pretty common to the best of my knowledge. But obviously the more resolutions you support, the more compatible your wallpaper becomes.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.