Skip to content

🌟 [EPIC] Responsive images

Created by: Tirokk

roschaefer Authored by roschaefer

🌟 EPIC

Steps to implement:

Backend (uploading images)

  • normalize images #2859
  • compress images to a maximum file size #1922
  • store images in different resolutions (addressed by PR #2602 and/or PR #2605?)
  • update API to respond with the image in the requested size (addressed by PR #2602 and/or PR #2605?)

Webapp (displaying images)

  • migrate Avatar component from the styleguide (addressed by PR #2700)
  • migrate Card component from the styleguide #2685 (closed)
  • add a ResponsiveImage component that requests the correct image size according to screen size and resolution, and use it in Avatar and Card #2860
  • lazy load images in the ResponsiveImage component (maybe already part of #2860 / addressed by PR #2801?)

A user mentioned me on our network: https://human-connection.social/post/c0c726e7-bdef-45ac-8391-b82d17f125e8/bin-ich-eigentlich-die-einzige#commentId-7fc18102-25cc-452a-8729-7ea269131cc8

Mit dem Safari Browser (11.1.2) geht das Laden der Startseite extrem langsam, dazu sind zuerst einmal die Bilder bis auf einen 1cm-Streifen abgeschnitten, sie bauen sich langsam langsam Stück für Stück nach oben hin auf.

English:

With the Safari Browser (11.1.2) the loading of the start page is extremely slow, first of all the pictures are cut off to a 1cm strip, they build up slowly bit by bit upwards.

I had a look into our network traffic and indeed, our images are quite large. To reprodue:

  1. Go to our index page: https://human-connection.social/
  2. Right click >> Inspect >> Network
  3. Order requests by size (largest at the top)

You will see that some of the avatars are larger than 2MB(!). For example this here:

Screenshot - 2019-11-16T112509 896

The avatar is so small that it's barely visible. There is no justification to send more than 2MB over the wire.

User Problem

Especially for mobile browsers it is important to get smaller resolutions of images. You have a bandwith quota and it will exceed quickly. Furthermore, on a slow internet connection, the images will load really slowly, that's what the user is complaining about (see above ☝).

Implementation

In our legacy alpha, we used https://github.com/thumbor/thumbor. I think it's still a reasonable choice. We would have to change our kubernetes configuration in a way that there is another thumbor service which has the persistent volume claim on the uploads folder.

Design & Layout

:man_shrugging:

Validation

You would request a responsive image and get different resolution: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images