Inspiring

Answered

Is there a better way to downscale for web especially for my situation?

Forum|Forum|7 years ago
May 24, 2018
3 replies
761 views

I have a question about downscaling photos for web page display. Keep in mind that we do have the ability to code photos so that when you click on them they display a larger and clearer version. But doing this takes a lot of time because it's not built into our system and I have to hand code everything from scratch.

So I basically have to take the photos in PSD and scale them down myself so they look reasonably clear as well as make the file size reasonable so they load fast. And then I lay them out onto the page in a grid or whatever.

As an example, I had a photo that was:

2043w x 1315h and it was 2.47 MB.

Because our web page is constricted to about 1000 pixels wide, I downscaled them in PSD. I simply went:

WIN Alt+I+E (image size) and then changed the width from 2043 to 400 - PSD automatically changed it to the correct height and then I saved it. At 100% viewing it looks fine and the file size dropped from 2.47 MB to 72 KB. I used 400 wide so I can put two next to each other from left to right and then the rest below them.

Another thing too - our web site is "old" meaning it's not responsive. When you view the site on a 1920 monitor these downscaled photos look good. But for an older person who may blow up the browser to a larger setting - or because they're using old low-res monitors - obviously my photos that I downscaled are not going to look good. So I'm trying to figure out a better way to scale these photos so they look good when the browser is blown up and on low res monitors. And of course get the file size down too so they load faster.

I'd appreciate any tips or advice. And please don't nag me about my needing a new web site platform - this is beyond my control and I have to work with the system

Thanks.

This topic has been closed for replies.

Correct answer WILDCAT54

I mean, to be honest it sounds like you know what you need to do. Your site is restricting you more than anything.

Do you have the ability to change how images are handled on your site?

Otherwise you will be stuck to scaling your images to where they will work with what you have, which it sounds like you are already do.

If you are hand coding the images on multiple pages of your site maybe consider making an images include. For each image within the include you would want to assign an ID and call that ID on the appropriate pages.

D Fosse

Community Expert

Thanks, guys

D Fosse

Community Expert

I think you're already doing this the only possible way you can do it. If it looks good, it is good.

The question here isn't low-res, but high-res 4K monitors. 400 pixels is natively tiny on such a monitor, to the point of being a thumbnail. But then at the same time, the paradigm out there is still 1920 pixels, and that's still the standard you have to prepare your images for.

This conflict-of-interest between 2K and 4K monitors is still handled by compromise and workaround. When a current web browser detects a 4K display, it scales images up by a linear factor of 2, so that it displays at the same physical size on screen as it would on a standard display.

Some time in the future we will all have 4K and 5K displays, and then your web page is definitely obsolete at 1000 pixels wide. But until then it's business as usual.

I have a rule-of-thumb for web work that holds up surprisingly often: it's not my problem, it's theirs. People viewing on uncalibrated monitors with colors all over the map? Not my problem. People buying 4K monitors with no clue about the implications? Not my problem. And so on. Get it right on your end; you can't take responsibility for everybody else.

c.pfaffenbichler

Community Expert

People viewing on uncalibrated monitors with colors all over the map? Not my problem.

Delightful.

It seems noteworthy how often people post on this Forum trying to blame the professional image editing software (Photoshop) for displaying the image »wrong« because some/any other application like a browser or viewer that lack color management displays the image differently …

WILDCAT54Correct answer

Inspiring

I mean, to be honest it sounds like you know what you need to do. Your site is restricting you more than anything.

Do you have the ability to change how images are handled on your site?

Otherwise you will be stuck to scaling your images to where they will work with what you have, which it sounds like you are already do.

If you are hand coding the images on multiple pages of your site maybe consider making an images include. For each image within the include you would want to assign an ID and call that ID on the appropriate pages.

Deaf_GuyAuthor

Inspiring

You're right - I am doing it correctly then and there's no magical way of doing it better except hand coding the "click here to see larger version" but that is just too much work with everything else I do

So thank you for letting me know there's no other magical way. Much appreciated.

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