Resize images to optimize their storage and adapt their display
In order to reduce the weight of the images used in Startin'blox applications, the idea is to adjust/resize the images on the fly before displaying them.
For this, a new attribute resize-[field] associated to the solid-display-img
widget would be used to fill in additional information.
- If this attribute is missing, the url of the original image is transmitted.
- If this attribute is filled, the image is resized on the fly.
This attribute could receive as value:
- "height, width, cover/contain" elements separated by a comma:
- height and width are values filled in pixels, each of the first 2 values could be replaced by "auto" (to keep a consistent sizing),
- cover/contain would indicate how the image fits into its container: cover implies cropping what is out of frame, contain resizes to fit into the frame (relies on the CSS
object-fit
property).
- we could also imagine pre-recorded formats (S, M, L) corresponding to standardized image display formats ("S/M/L, auto, cover/contain" which would correspond to standardized image display formats.
Resizing could be managed in the store, in the image src construction with adding a feature or adding a <solid-image>
component.
<solid-display
data-src=".../users"
fields="username, picture"
widget-picture="solid-display-img"
resize-picture="150, auto, cover"
></solid-display>
ON THE BACK-END :
On the server side, when an image is requested, it can be processed before being sent to the client according to the value of the attribute communicated in the url.
For each processing done, the resized image is stored on the server to be sent later without having to re-process it.
Process steps:
- Capture of the http request to the image
- Verification of the parameter transmission in the image url
- If no parameter, the original image is sent to the client
- If parameter, verification of the existence of the image in the requested format on the server
- If available, this image is sent to the client.
- If not available, the resizing script creates the image in the requested format
- Store the new image on the server
- Sending the new image to the client.
To easily find out if an image has already been resized to the requested size, these are stored in folders whose name corresponds to an interpretation of the parameter value transmitted in the url. The image file keeps the same name as the original image.
For example, if the parameter value is "250,250,cover", the corresponding folder will be named "250-250-1". Parameters should be separated by "-" or any other character to make sure not to mix up, for example, "255,25,cover" and "25,525,cover".
In case it is necessary to regenerate the images, just empty the folder to force their re-generation the next time they are requested.