-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add responsive_images_for_jekyll plugin #28
base: main
Are you sure you want to change the base?
Conversation
* add a custom plugin to optimize the images
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks pretty cool and seems to work! The loading times for the webpage are way down, which is great!
- I think that
optipng
is the root cause of the slow initial build time. Maybe this can be exchanged? - For the CI runners: we have to make sure to cache the
imgs
folder.
I tried adding the libmagick stuff to the pipeline but failed. |
* try to fix the CI script by exchanging the Jekyll build script
* set build target folder to `_site`
* I think the page gets built into the `build` folder. * optimize caching
Visit the preview URL for this PR (updated for commit 454c0e3): https://cevi-tools-preview-deployment--dev-ipyd9ocu.web.app (expires Fri, 04 Feb 2022 20:58:50 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 |
I replaced the currently used deploy script with the one from https://github.com/helaili/jekyll-action, as this script allows for convenient pre-build setup commands. This must also be done for the productive build, I've not yet touched this build script. We also need to enable caching for the images and installation directories. |
The file sizes of all our images are huge. For example, the image for the walk-time generator is of size 2030×708px and comes at 1.4 MB, especially on mobile devices such high-resolution images are not needed. We should therefore resize all images and provide different resolutions such that the browser can load the correct one depending on its render size.
As it is a pain to resize images by hand, I would suggest an automated pipeline doing the job for us. As I'm currently evaluating using Jekyll for our Abteilingswebseite as well, I've implemented such a pipeline, see GitRepo. It's still work in progress... but can already be used as a gem module. Feel free to submit issues directly to the repo.
TODO's
imagemagick
: