Reduce the size of showcase images (#899)

Fixes #875

Original showcase images are kept in another directory, and compressed
in webp in the distributed directory.
Since they won't change so much, let's keep them in git.

MANIFEST.in

@@ -1,3 +1,3 @@
 include *.rst
-recursive-include ihatemoney *.rst *.py *.yaml *.po *.mo *.html *.css *.js *.eot *.svg *.woff *.txt *.png *.ini *.cfg *.j2 *.jpg *.gif *.ico
+recursive-include ihatemoney *.rst *.py *.yaml *.po *.mo *.html *.css *.js *.eot *.svg *.woff *.txt *.png *.webp *.ini *.cfg *.j2 *.jpg *.gif *.ico
 include LICENSE CONTRIBUTORS CHANGELOG.rst

Makefile

@@ -7,6 +7,7 @@ DOC_STAMP = $(VENV)/.doc_env_installed.stamp
 INSTALL_STAMP = $(VENV)/.install.stamp
 TEMPDIR := $(shell mktemp -d)
 ZOPFLIPNG := zopflipng
+MAGICK_MOGRIFY := mogrify
 
 .PHONY: all
 all: install ## Alias for install
@@ -56,8 +57,13 @@ isort: install-dev ## Run the tests
 release: install-dev ## Release a new version (see https://ihatemoney.readthedocs.io/en/latest/contributing.html#how-to-release)
 	$(VENV)/bin/fullrelease
 
+.PHONY: compress-showcase
+compress-showcase:
+	@which $(MAGICK_MOGRIFY) >/dev/null || (echo "ImageMagick 'mogrify' ($(MAGICK_MOGRIFY)) is missing" && exit 1)
+	$(MAGICK_MOGRIFY) -format webp -resize '75%>' -quality 50 -define webp:method=6:auto-filter=true -path ihatemoney/static/showcase/ 'assets/showcase/*.jpg'
+
 .PHONY: compress-assets
-compress-assets: ## Compress static assets
+compress-assets: compress-showcase ## Compress static assets
 	@which $(ZOPFLIPNG) >/dev/null || (echo "ZopfliPNG ($(ZOPFLIPNG)) is missing" && exit 1)
 	mkdir $(TEMPDIR)/zopfli
 	$(eval CPUCOUNT := $(shell python -c "import psutil; print(psutil.cpu_count(logical=False))"))

docs/contributing.rst

@@ -226,7 +226,7 @@ In order to issue a new release, follow the following steps:
 - Switch to the master branch;
 - Update :file:`CHANGELOG.rst` with the last changes;
 - Update :file:`CONTRIBUTORS` (instructions inside the file);
-- If needed, recompress assets. It requires zopflipng::
+- If needed, recompress assets. It requires zopflipng and ImageMagick `mogrify`::
 
     make compress-assets
 

ihatemoney/templates/showcase.html

@@ -33,7 +33,7 @@
 </div>
 <script type="text/javascript">
 var pswpElement = document.getElementById('pswp');
-var items = JSON.parse('[{"h": 2450, "src": "/static/showcase/1.jpg", "w": 2450}, {"h": 2509, "src": "/static/showcase/2.jpg", "w": 2221}, {"h": 2536, "src": "/static/showcase/3.jpg", "w": 2101}, {"h": 2722, "src": "/static/showcase/4.jpg", "w": 2348}, {"h": 2745, "src": "/static/showcase/5.jpg", "w": 1804}, {"h": 3307, "src": "/static/showcase/6.jpg", "w": 2897}, {"h": 2321, "src": "/static/showcase/7.jpg", "w": 2239}, {"h": 2470, "src": "/static/showcase/8.jpg", "w": 2419}, {"h": 3307, "src": "/static/showcase/9.jpg", "w": 2602}]');
+var items = JSON.parse('[{"h": 2450, "src": "/static/showcase/1.webp", "w": 2450}, {"h": 2509, "src": "/static/showcase/2.webp", "w": 2221}, {"h": 2536, "src": "/static/showcase/3.webp", "w": 2101}, {"h": 2722, "src": "/static/showcase/4.webp", "w": 2348}, {"h": 2745, "src": "/static/showcase/5.webp", "w": 1804}, {"h": 3307, "src": "/static/showcase/6.webp", "w": 2897}, {"h": 2321, "src": "/static/showcase/7.webp", "w": 2239}, {"h": 2470, "src": "/static/showcase/8.webp", "w": 2419}, {"h": 3307, "src": "/static/showcase/9.webp", "w": 2602}]');
 var options = {
   index: 0,
   loop: false,