Question 249160 in Html Question posted in
Some basic documentation can be found here.

How to manage heavy image assets in a simple html css js website into a faster site or proper loading UI if not faster?

I have a site running on digital ocean : https://studiosnow-gjxrv.ondigitalocean.app/ and the github code is : https://github.com/Omkarc284/SNsite1 It works better in development but in production its problematic!
As you can see i have heavy images but my client cant compromise on quality and we have used meta human renders so using 3d is also difficult hence I’m using image sequence here… I’m not a pro at UI but is there anyway i Can optimize the performance or the site?

I tried adding a loading screen but thats just a gif which runs for 10 secs and then the opacity becomes 0 … I want it to load proper and if not fast atleast a proper waiting time mechanism for the user to give the site a good feel

Tags:

2

Answers


  1. 0

    Optimizing large images for the web without losing quality is essential for improving website performance and user experience. Here are some steps you can follow to achieve this:

    1. Choose the Right Image Format:

      • Use modern web image formats like WebP, JPEG 2000, or AVIF where supported, as they provide better compression and quality compared to older formats like JPEG or PNG. However, make sure to provide fallbacks for unsupported browsers.

    2. Resize Images to the Correct Dimensions:

      • Determine the maximum display size required for your image on your website and resize the image accordingly. Avoid using larger images than necessary, as larger images take longer to load.

    3. Use Compression Tools:

      • Utilize image compression tools to reduce the file size while preserving quality. Some popular options include:
        • Image editors: Software like Adobe Photoshop or GIMP allows you to manually adjust compression settings.
        • Online tools: Websites like TinyPNG, TinyJPG, or Squoosh offer easy image compression.
        • Plugins: If you’re using a content management system (CMS) like WordPress, consider using plugins like Smush or ShortPixel.

    4. Enable Browser Caching:

      • Configure your web server to enable browser caching. This way, images will be stored in the user’s browser cache, reducing the need to re-download them on subsequent visits.

    5. Use Image Compression Formats:

      • JPEG: Adjust the compression level when saving images in JPEG format. A lower compression level retains more quality but results in larger file sizes, while higher compression levels reduce file size but may slightly degrade quality.
      • PNG: Use PNG-8 for simple graphics and PNG-24 for images with transparency. Optimize PNGs with tools like OptiPNG or PNGOUT.
      • WebP: If you’re using WebP, you can often achieve better compression with little quality loss compared to JPEG and PNG.

    6. Optimize for Retina Displays:

      • Create 2x resolution versions of your images for Retina and high-DPI displays. Use responsive image techniques or the srcset attribute in HTML to serve the appropriate image based on the user’s device.

    7. Lazy Loading:

      • Implement lazy loading for your images. This means images are loaded only when they come into the user’s viewport, reducing initial page load times.

    8. Consider Using Content Delivery Networks (CDNs):

      • CDNs can serve your images from servers geographically closer to your users, reducing latency and improving load times.

    9. Optimize Image Metadata:

      • Remove unnecessary metadata from images, such as EXIF data, which can add unnecessary bytes to the file.

    10. Test and Monitor:

      • After optimizing your images, test your website’s performance using tools like Google PageSpeed Insights, GTmetrix, or Pingdom. Continuously monitor your site’s performance and make adjustments as needed.

    Remember that the level of optimization you can achieve without noticeable quality loss may vary depending on the specific image and its intended use. Always strike a balance between image quality and file size to ensure a fast and visually appealing web experience.

    Login or Signup to reply.
  2. 0

    I see that you already implemented webp images with much smaller size than before. This is a step in the right direction in your case since you have over 300 images over JS. However, you are loading images with the same size for any device. You can optimize performance with a responsive image optimization plugin. It will dynamically deliver the right image size for the different devices and screen resolutions.

    In addition, some more things which you can improve. You can use blurhash to load the first screen even faster and then some nice spinner until 30 images are loaded to be able to start scrolling. Also, you can improve the cache policy. I see that it’s set to “10s” at the moment. You can use more efficient policy, see some explanation here: https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search