dieren: high-resolution webp image alternatives

Modern compression format allows for much higher quality at the same size,
enough for (1920px / 3 columns) or 2x DPR at previous 320px width, even then
with generally less visible artifacts than JPEG; in direct comparison only
pig (and its porpoise sibling) are significantly worse due to lost details.

Automatically served by Apache if advertised in client Accept header
(currently supported by 95% ie all modern browsers).

diff --git a/.htaccess b/.htaccess
index f9d21dd91309d68baee254c63fd969dc8438984e..35296eee6c2aa268c8c93ed1801d6b34ce13e66f 100644 (file)
--- a/.htaccess
+++ b/.htaccess
@@ -21,6 +21,11 @@ RewriteCond    %{REQUEST_FILENAME}     !-f
 RewriteCond    %{DOCUMENT_ROOT}/$1.plp  -f
 RewriteRule    ^/*([^/]+)(.*)           $1.plp$2
 
+# replace jpeg images by webp alternatives if supported
+RewriteCond    %{HTTP_ACCEPT}           \bimage/webp
+RewriteCond    %{DOCUMENT_ROOT}/$1.webp -f
+RewriteRule    (.*)\.jpg$               $1.webp
+
 # allow browsers to cache for upto a month
 <IfModule headers_module>
 <FilesMatch "\.(?:css|js|json)$">

diff --git a/tools/mkimgthumb b/tools/mkimgthumb
index fc3316229c34c6385baccba278ac6b9c39c9981d..217b7734d45ec55c2d2100bb314645ade9ace804 100755 (executable)
--- a/tools/mkimgthumb
+++ b/tools/mkimgthumb
@@ -22,9 +22,11 @@ for my $src (@ARGV) {
                unshift @cmds, -chop => "$crop[0]%x$crop[1]%";
        }
        unshift @cmds, -gravity => 'northwest' if @cmds;
-       push @cmds, -resize => '300x200^', -gravity => 'north', -extent => '300x200';
-       push @cmds, '-strip', -quality => '60%';
-       system(convert => $src, @cmds, "../$name.jpg") == 0
+       push @cmds, '-strip', -gravity => 'north', -quality => 60;
+       my @cmdwebp = (-resize => '630x420^', -extent => '630x420', -quality => 30);
+       my @cmdjpeg = (-resize => '300x200^', -extent => '300x200');
+       system(convert => $src, @cmds, @cmdjpeg, "../$name.jpg" ) == 0 and
+       system(convert => $src, @cmds, @cmdwebp, "../$name.webp") == 0
                or $failcount += warn "error creating $name.jpg from $src\n";
 }