[bug]: Large images on the main (landing) website
altrusl opened this issue · comments
Is there an existing issue for this?
- I have searched the existing issues
I haven't found a repo for your main websitу (hoppscotch.com) so leaving it here
Current behavior
When users opens https://hoppscotch.com/blog or other pages on that subdomain they see images of enormous dimension and file size
For example: https://hoppscotch.com/images/blog-hoppscotch-wrapped-2023.png takes 8.53Mb
Its loading time is huge both for desktop and for mobile clients
Expected behavior
Proper image format (webp), dimension and file size
Steps to reproduce
- Go to https://hoppscotch.com/blog
- Check out image sizes
Environment
Production
Version
Cloud
Thanks for bringing this up.
I've added a build step to compress and optimize all image assets (png, jpeg, gif, tiff, webp, avif) using Sharp.js and SVG assets using SVGO.
Here's the output:
We'll see if we can optimize assets further. Since the initial changes are in production, I'll close this issue for now. Let us know if you find any other issues with the Hoppscotch platform.
Your quick reaction confirms the high quality of your project and product )
Thank you
For the future - image dimensions can be reduced too. They are like: 4800x2700.
It will greatly improve your Core Web Vitals. Especially using <picture> with 2-3 image size variants
