Skip to content
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

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

wp99cp
Copy link
Member

@wp99cp wp99cp commented Jan 28, 2022

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

  • Fix slow initial build time
  • Update Readme
  • Test automatic build scripts. They will probably fail since you now need to install imagemagick:
/usr/gem/gems/mini_magick-4.11.0/lib/mini_magick/configuration.rb:139:in `cli': You must have ImageMagick or GraphicsMagick installed (MiniMagick::Error)

* add a custom plugin to optimize the images
@wp99cp wp99cp requested a review from maede97 January 28, 2022 16:14
Copy link
Member

@maede97 maede97 left a 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.

@maede97
Copy link
Member

maede97 commented Jan 28, 2022

I tried adding the libmagick stuff to the pipeline but failed.
Possibly related: minimagick/minimagick#509

* 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
@github-actions
Copy link

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 🌎

@wp99cp
Copy link
Member Author

wp99cp commented Jan 29, 2022

I tried adding the libmagick stuff to the pipeline but failed. Possibly related: minimagick/minimagick#509

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants