On my website francoscarpa.com, I publish photos of my private life among other stuff. Since I’m so involved about performance and UX, I’d like to know from you what’s the best way to serve these photos. To give you an example of what I’m trying to accomplish, here’s an example of Web page where I put some photos. I know about all the HTML topics like sizes, srcset and picture, but it would be impossible to replicate the code to serve the right image for all of my images. It would be perfect if there was something that could serve the perfect image for the user “at runtime”. How would you deal with this issue?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (4)
Hi Franco, DEV/Forem currently uses cloudinary.com/ which as imgix.com/ is a media server that helps you resize images "at runtime".
There are open source alternatives you can use such as imgproxy.
My suggestion is not to do image management by scratch because it's a time sink unless you're building a "image resizing" business. Cloudinary has a free tier.
My favorite resource was images.guide, a beautiful ebook written by @addyosmani , which apparently disappeared to be replaced by a section on Google's web performance site :-( Fortunately it's still available through the Web archive: web.archive.org/web/20200214202552...
It's probably not the exact solution for you given that it's in PHP and it looks like your site is done in C#, but Glide allows you to create an endpoint in your application that serves up your images, and provides a simple API to allow you to dynamically resize, crop or reformat your images, as well as providing various effects and transformations, by simply specifying query parameters when fetching them. You do have to specify signatures so that it can't be misused, but that's straightforward enough.
If you can find a C# equivalent that would probably do the trick.
I'm not entirely sure what you mean by replicating code to serve the perfect image... but you can do some pretty easy optimization with your images.
First of you can (and should) resize your images.
d33wubrfki0l68.cloudfront.net/832e...
This one, for example, is 3072x4096 pixels big. That's masssssive! On the website, the image is barely 500x700. Reduce the load times by adjusting your images before even uploading them to your storage/host. That should save you roughly 80%-90% of the load times for the images as 600kb per image is quite hefty. For convenience sake: squoosh.app/
Drag and drop your image in here, in the bottom right corner select resize and choose a sensible size. Roughly something of the size that it will be later on your page.
If you think that your visitors may access your website from all over the world, host your images on a CDN (Content Delivery Network) to reduce the distance between the server and the visitor.
Other than that you can lazy load the images, meaning they will only then load right before the image scrolls into the view. This would speed up your initial load time. But this is more of a micro-optimization compared to properly adjusting your files upfront.
You should also consider lazyloading images. Lazysizes is a great library although there are other options.