Website image sizes: smaller and faster load times vs bigger images with more image quality

[red_zergling]

I recently started resizing my images to 2560 by 2160 (if I recall it correctly) instead of WordPress recommend 2160 by 1920. I figured it wouldn't impact load time too much but it's missing marks on some of the benchmarks in Google Chromes developer console.

For anyone with a portfolio, what is your approach to how you resize and display images?

I'm thinking I will switch back to 1920 and then provide an additional page somewhere for higher resolutions.

Here is my website as of now, which is still in the middle of a makeover. https://boni.photo.

 

[barry]

Hi, those benchmarks are aimed at the average website, not a photography one.

Unless you use this as an off-site backup or archive, I would aim at whatever the highest resolution they're going to be displayed at is. That may be hard to estimate though if using a fully responsive theme.

IIRC it is possible for WP or a gallery plugin to create multiple sizes of each image, so when displaying multiple images in columns the page loads faster. But it's been quite awhile since I've worked on WP frontend stuff.

 

[BobBill]

Sensors..FWIW; on-line source...

Full-frame image sensors are 35mm in diameter, the same size as old school celluloid film. Hence the name full-frame. There are many smaller frame sensors (known as crop sensors), and smartphone sensors are found at the tail end of the spectrum.

Subscribe to see EXIF info for this image (if available)

Various sensor sizes. Source: techspot.com
A full-frame 35mm sensor measures 864mm2 while a 1/1.7” smartphone sensor only measures 43mm2. That means the once-praised Huawei P30 Pro’s sensor, for example, is 20 times smaller than a full-frame DSLR sensor. That’s a lot!

 

[John King]

I recently started resizing my images to 2560 by 2160 (if I recall it correctly) instead of WordPress recommend 2160 by 1920. I figured it wouldn't impact load time too much but it's missing marks on some of the benchmarks in Google Chromes developer console.

For anyone with a portfolio, what is your approach to how you resize and display images?

I'm thinking I will switch back to 1920 and then provide an additional page somewhere for higher resolutions.

Here is my website as of now, which is still in the middle of a makeover. https://boni.photo.

Nice photos, but you might need a much faster web server if you want to keep this design!

Perhaps avoid using WP as a photo server?

I use WP as a frontend to my gallery s/w (ZenPhoto). Not as pretty, but hugely faster.

As for resizing, I use exactly half to avoid interpolation artifacts.

I uploaded 91 images yesterday, 315 MB. It took 1m45s.

HTH.