DPChallenge: A Digital Photography Contest You are not logged in. (log in or register
 

DPChallenge Forums >> Business of Photography >> websites and photo compression
Pages:  
Showing posts 1 - 14 of 14, (reverse)
AuthorThread
03/11/2021 09:29:12 AM · #1
Hi all, long time no see!

The place where I work is creating a new website, and the person working on the design just asked about compression. This was her question:

"Are our photos 'compressed?'
If not would someone know how to do this or be able to teach me moving forward into the new website?
Just researching images and SEO stuff and this is a common strong recommendation but I don't know how to compress an image or tell if one is compressed. I can teach myself but I thought I'd ask."


I had assumed that they were taking the photos and resizing them to web sized. But I have no idea.

How should photos be handled for a website?

Thanks!
03/11/2021 10:01:39 AM · #2
Photos for websites, other than photos that are intended to be presented to be judged on quality, are normally compressed pretty strongly. For most JPEG images, it's possible to crank up the compression pretty high without introducing perceptible degradation. There are three steps to getting an optimal image for a website:

1.) Determine the best format. For images that are graphic in nature, PNG is the best format. It will be smaller than a JPEG, and does not suffer from the edge artifacts that JPEGs do. For photos, JPEG is still the format of choice.

2.) Determine the size in pixels. The web designer knows what size the image will appear on the site. Given this, they can make some intelligent assumptions and come up with an optimal size. Example: An image is expected to take up half the page width. Therefore, if displayed on a 1080P monitor (1920x1080 resolution), its width in pixels on the display will be about half of 1920, or a bit less than 1000 px. Any image size under this number may appear soft, as it must be scaled up. A good image size in this case might be 1000px, or perhaps up to 1400px if quality display on higher resolution monitors is a concern. The image should be resized to the target pixel dimensions using a resizing algorithm appropriate to the image. This can vary based on image content.

3.) Determine the compression amount. This will be dependent on the quality required, and can vary based on the image content (if there is lots of small detail and that is important, then compression will need to be lower). This is a trial-and-error process, though experience helps a lot here

the result of the above process should be the most bang for the buck, that is, the highest quality image at the lowest file size, which should enhance page load speeds.
03/11/2021 10:05:52 AM · #3
Fritz hit the nail on the head.

Just to add, I suspect you already compress images yourself for DPC. I often save my images and realise the file is over the max of 700kb and have to change the JPG compression by reducing the quality setting to bring the file size down.
03/11/2021 10:59:29 AM · #4
Following on, once you have determined the pixel dimensions, this is how you can use either Lightroom or Photoshop to save for the web.
This is how I do it for the DPC 1200 pixel and 700 kb limits:
Either:
1) In Adobe Lightroom, use the export function, JPG format, sRGB color space, file limit set to 700 k, resize longest side to 1200 pixel, sharpen for screen, sharpening amount standard (can be saved as a template). Depending on the results you can then change the sharpening.
2) In Adobe Photoshop, resize you image size yourself to 1200 pixel longest side, then "save for web" and play around with quality setting to get within the file size limit (or to find the right compression setting for the quality you want).

I think the difficult part now is to choose the right initial pixel size for your audience (you have to know statistics about the audience), because on one hand you have people using larger and larger screen with higher resolutions, and you have others using the phone, on possible very different bandwidths. Not sure how that scaling works. On my own website, what looked a good format years ago, now covers less than 25 percent of my screen. On DPC the 1200 pixel images appear scaled up on my monitor, i.e. 2400 pixels wide. (oops, addition: I found out now that this 200% rescaling is actually a systems setting on my pc)

Message edited by author 2021-03-11 11:51:32.
03/11/2021 11:54:15 AM · #5
Originally posted by willem:

I think the difficult part now is to choose the right initial pixel size for your audience (you have to know statistics about the audience), because on one hand you have people using larger and larger screen with higher resolutions, and you have others using the phone, on possible very different bandwidths. Not sure how that scaling works. On my own website, what looked a good format years ago, now covers less than 25 percent of my screen. On DPC the 1200 pixel images appear scaled up on my monitor, i.e. 2400 pixels wide.

This is the really difficult thing.
I'm using a 5K monitor. Every photo on DPC looks like a thumbnail. As willem mentions, the vast majority of people will probably be using a smaller laptop, tablets, or phone to view the site. So who do you optimize for?
03/11/2021 02:08:05 PM · #6
Good discussion of the resolution trend, and of device dependencies. Couple thoughts in that regard:
- The vast majority of the audience using a desktop of laptop computer will be using 1080P or similar resolutions for quite a while yet. Only those really needing higher resolution are spending the money.
- The proportion of users using a traditional laptop or desktop computer to access web data is shrinking... rapidly.
- The fast-growing mobile-device category, oddly, is the area where resolutions are normally higher (sometimes much higher) than 1080P... but I would argue that the small screen size reduces the need for proportionally high resolution graphics. Those intended for 1080P are probably fine for mobile, again unless highest display quality is paramount.
03/11/2021 03:27:44 PM · #7
Thanks, all.

that's what I was thinking, was that the photos should be compressed/shrunk before upload.

I wasn't sure if the website does any compressing?

(and I hear you, Chris! I hate that I have a great monitor, I get really excited about my photo, and when I shrink it for DPC it looks so tiny and unimpressive on my screen!)
03/11/2021 03:58:47 PM · #8
Originally posted by vawendy:

(and I hear you, Chris! I hate that I have a great monitor, I get really excited about my photo, and when I shrink it for DPC it looks so tiny and unimpressive on my screen!)

You know you can (temporarily) change your monitor resolution setting to see/preview the image the way most of us will.
03/11/2021 07:30:51 PM · #9
Originally posted by GeneralE:

Originally posted by vawendy:

(and I hear you, Chris! I hate that I have a great monitor, I get really excited about my photo, and when I shrink it for DPC it looks so tiny and unimpressive on my screen!)

You know you can (temporarily) change your monitor resolution setting to see/preview the image the way most of us will.

In all honesty, do you think anyone is going to do this?
I don't have dual 5k 37" monitors so I can view them in 1080p peasant resolution.
03/11/2021 09:10:34 PM · #10
Originally posted by Venser:

Originally posted by GeneralE:

Originally posted by vawendy:

(and I hear you, Chris! I hate that I have a great monitor, I get really excited about my photo, and when I shrink it for DPC it looks so tiny and unimpressive on my screen!)

You know you can (temporarily) change your monitor resolution setting to see/preview the image the way most of us will.

In all honesty, do you think anyone is going to do this?
I don't have dual 5k 37" monitors so I can view them in 1080p peasant resolution.

Personally, yes I'd flip to a different resolution to preview the final image at approximately the scale others will view it before submitting, just like I look at it at 100% scale after sharpening even though I do most of my editing more zoomed-out. Otherwise us peasants may see something you don't....

I'm not suggesting you leave it at the lower-res setting all the time or for any other purpose than previewing a DPC entry -- even on my slow machines it shouldn't take more than a minute or so to change the resolution, check the image, and change it back. I was just pointing out it is an option ...
03/12/2021 10:11:20 AM · #11
amusing that the person doing the design would be asking such a question, lol

they should be able to view the images on any number of devices (or simulators) and visually inspect for image quality, as well as review/analyze the assets sizes and dimensions. if the site is responsive (i.e., able to tell if the browser is a phone, desktop, etc.), it should be able to serve up the appropriate assets.

and they should know how to manage those assets...
03/12/2021 12:12:44 PM · #12
Originally posted by Skip:

amusing that the person doing the design would be asking such a question, lol


Yes it is... I'm guessing that this is a pretty small organization, and whomever is doing the website design just doesn't have that level of training.
03/12/2021 05:05:47 PM · #13
Originally posted by GeneralE:

Originally posted by vawendy:

(and I hear you, Chris! I hate that I have a great monitor, I get really excited about my photo, and when I shrink it for DPC it looks so tiny and unimpressive on my screen!)

You know you can (temporarily) change your monitor resolution setting to see/preview the image the way most of us will.


Brilliant! Thanks, Gen!

I have a large monitor and my images look fine in PS, but then they're fuzzy and awful when I see them entered on DPC. This has been going on for over a year now (since Hubby and Son#1 gave me a new computer and monitor) and I've just become used to trusting that it will appear ok to others. Now, I will do as you suggest. Thanks, Gen!

I just have to figure out how... Ha!
03/13/2021 09:12:07 AM · #14
I have a display resolution (4500 x 3000 default) but I also have a setting "change the size of text, apps and other items", which is by default set to "200% recommended".

DPC images of 1200px are then enlarged to 2400px but still don't look soft. At 300% they look a bit softer and then the DPC image screen starts to fill my full display (including the border etc). Anything lower than 300% leaves blanks space on both sides of the image.

If I set it to 100%, the image (and everything else on the website) is really small and sharp. This is also what Kirbic said about mobile device, i.e. although they have a high resolution, the size of the screen is still small, so almost anything looks very sharp.

I think I probably need to be careful making comments about images that don't look fully sharp. It might be that the image is borderline sharp and as result of the 200% scaling it crosses the border.
When submitting however, if it looks sharp on my 200% setting, I can be sure it will be sharp for most of the audience.
Pages:  
Current Server Time: 03/29/2024 11:34:26 AM

Please log in or register to post to the forums.


Home - Challenges - Community - League - Photos - Cameras - Lenses - Learn - Prints! - Help - Terms of Use - Privacy - Top ^
DPChallenge, and website content and design, Copyright © 2001-2024 Challenging Technologies, LLC.
All digital photo copyrights belong to the photographers and may not be used without permission.
Current Server Time: 03/29/2024 11:34:26 AM EDT.