• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

I don't understand pictures and desktop resolution..

Community Beginner ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

Hi everyone,

 

It's maybe a stupid question but i really need your help..

 

I'm studyng UX/UI and a big part of my work is to.. export pictures from photoshop for a website.
I'm working with Macbook Pro M1 16“ with a 3546x2234px resolution and i'm training with Editor X and WP.

 

First point that i don't understand :

When i'm working with Editor X, i see that the maximum resolution for my screen is 1620px width, but my macbook resolution is 3024px width.. Why ?

 

Second point that i don't undestand :

So when i export a picture, i'm thinking that to get a clear picture, i need to export it at the size that i want to be diplayed on the website. But when i export a 1500px pixel picture on photoshop, the picture seems very small 😕 and when i integrate it on the website, it's not clean at all. So i have to export the picture at least 2x bigger than what i was thinking, so 3000px (Weighter picture, slower website).

Why ?

 

So how to export my pictures ?

 

I don't speak english very well so it's difficult to me to explain it very clearly, i'm sorry and i hope someone might help me.

 

Thank you

 

Capture d’écran 2023-01-11 à 16.26.15.pngCapture d’écran 2023-01-11 à 16.41.58.pngCapture d’écran 2023-01-11 à 16.40.24.pngCapture d’écran 2023-01-11 à 16.17.49.png

 

TOPICS
macOS

Views

281

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 11, 2023 Jan 11, 2023

First the illustration (substitute whatever pixel dimensions apply for your screen; the principle is the same):

retina_3.png

 

And here's what you need to know:

 

  • 100% in Photoshop has nothing to do with size. It means one image pixel is represented by exactly one physical screen pixel.
  • Consumer-oriented image viewers and web browsers scale up when they detect a high resolution display. They use four screen pixels to represent one image pixel - in other words turn your high resolution display into an ordin
...

Likes

Translate

Translate
Community Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

First the illustration (substitute whatever pixel dimensions apply for your screen; the principle is the same):

retina_3.png

 

And here's what you need to know:

 

  • 100% in Photoshop has nothing to do with size. It means one image pixel is represented by exactly one physical screen pixel.
  • Consumer-oriented image viewers and web browsers scale up when they detect a high resolution display. They use four screen pixels to represent one image pixel - in other words turn your high resolution display into an ordinary low resolution display.
  • This is the industry-standard workaround to ensure the same material can be used everywhere, regardless of what screen technology the user happens to have.
  • Photoshop can't do that - it's used for a whole lot of things besides web, where it has to display accurately. So that's what it does.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

Thank your for the reply,

 

I understand, thanks to Retina display, we need to multiply the picture by 4 the definition picture for a clear display on a Retina screen. 

So it is a game to export the same image x4 with the minimum weight. That's difficult for complex and big pictures. 

Thank you again 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

There is actually a way to upload two images, and the browser decides which one to use based on detected screen resolution. But this is entirely in the realm of website coding, and outside Photoshop control. The site has to be built to support that (and fairly few are).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

LATEST

Yes i saw this but i'm not very good in code and i prefer to concentrate mylself on UX and prototype.

I'm making a website for my portfolio (so a simple website without coding).

So for now, i'm gonna multiply x2 my pictures with a maximum width in px to display (i've just tried and it work, the dificult part is to find the best quality/weight ratio)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines