Image formats and resolution - for Low Bandwidth Web Apps



  • I have a Business Requirement for remote place system (app) accessibility of the web application.

    More specifically, The user of this application should be able to access this application from remote place where internet speed is limited (with 56kbps speed). Major part of the application with user engagement is filling up an online form and placing few service requests. And, a small part of application has images.

    Now, I am not sure on technical specs of the image to be used in such an app to meet the Business Requirement. (When I say technical specs - size, format, resolution) I am looking if there is any suggestion, or guidelines to get this through.



  • Page size

    If you need a site to work on a 56kbps connection you need to go as "close to bare metal" as you can.

    By that I mean no libraries or frameworks (no bootstrap, React, Angular etc. etc. and definitely no themes from places like themeforest, those things are always bloated!), just vanilla JS, CSS and HTML.

    No custom fonts either I am afraid, they add loads of weight, instead use a web safe font combination

    You probably want the total page weight to be under 100kb and ideally under 50kb.

    Image

    With regards to images you should use WebP if the browser supports it and fall back to jpeg. I would compress images to 70% (as a nice balance between quality and size).

    It doesn't matter what format they supply it to you you should convert it.

    Also make sure images are sized correctly (so if they display at 400px by 250px make sure the image is 400px by 250px so you aren't sending any wasted bytes).

    Even better if you can use SVG for images (company logos tend to be SVG etc.) as those are likely to be even smaller and will scale to any screen size without loss of quality. If they give you SVGs then use them.

    Other basic things to consider

    Try to keep requests as low as possible, 56kbps connections tend to have huge latency so the round trip time for requests can seriously impact performance. Try to keep total requests under 20 (and ideally under 8!).

    Hopefully the above should get you started. If you want to learn more about performance I would suggest heading over to Stack Overflow and looking at the "pagespeed-insights" tag as that is nearly all related to speed.

    Finally using Page Speed Insights / Lighthouse in developer tools in Chrome browser (F12 -> Lighthouse) as you build the site will help you see if you have the page loading quick. You really need to try and get above 95 for someone on a 56kbps connection to have a chance.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2