You want clean, crisp, sharp, 4K images on your website to show off your visual assets. Here's why this might not be the best approach:
 

Size Matters

Big resolution images and file sizes bog down your website's loading speed. 
 

Largest Contentful paint (Desktop vs Mobile)

This is generally a measurement of how fast the biggest image on your website loads. This can give a good indication of how long it takes for a user to see your full website on their screen and be able to interact with it.

Specifically, it is "a Core Web Vitals metric that measures how long it takes for the largest content element in the viewport to render after a user navigates to a page," and can include videos, text blocks, or things above the fold.

Data usage

Big images use big data. Keeping file sizes reasonable helps your audience use less data and will cost them less in bandwith, resulting in a faster website.

Frustrating experience

With longer loading times, and even some images not loading at all, your user will be frustrated and not want to use your website. It's important that your website experience is frictionless. How many of us have clicked away from a website that didn't load on our phones within 5 seconds? *Raises hand*

Serps and Pagespeed

Did you know that your website speed directly affects how it ranks in a traditional search engine? A SERP (Search Engine Results Page) uses crawlers to identify key information, and depending on how fast they crawl, it can affect your ranking.

Additionally, when users give up on your page and navigate away, this can indicate low engagement, and the SERP will rank your website lower.

Compression vs Lossless Compression

You want to compress your images on your website, but you do not want to lose the plot. By using a type of lossless compression, you actually retain all the valuable data that makes your image great and crisp, and beautiful, but it still reduces the file size so your website can run better.

WebP AVIF

Two lossless formats often used on websites is WebP and AVIF. AVIF generally creates the smallest lossless files.

<picture> <source> <srcset>

Another tip is to make sure your images are responsive. Responsive images allow the user on smaller screens to download images at a size that works for them, instead of the massive original size. Imagine loading in a giant desktop image even though you are on your smart phone and the screen is much smaller, it would take a long time.

How to Safely Compress Your Images

To safely compress your images, always keep a copy of the original high-resolution image. Next make a copy that you will be making changes too. Resize your image dimensions, and then choose a lossless file type. You can also use a compression tool to do this process if it's easier. Some CMS have tools you can build into your website, and you can click a button to compress all of your images.

Fetchpriority and Preload

You can set up fetch priority and preload on your website so that a certain image loads/fetches first. This is helpful when a website has a prominent above-the-fold design element that needs to load in first. Your most critical images should be set up as preload. Never combine a fetchpriority with a preload.

Lazy loading

This is a technique you can use on your website to allow images to load in when needed. This means they will not load until triggered. This can save valuable space and time for your user.

Loading...

The key thing with websites is striking a balance. You want crisp images and great load times. If you have good load times and bad images, people might not like your website, and if you have amazing high-resolution images that take forever to load, no one will see them.