Doc: Automatic generation of responsive images

.eslintignore

@@ -1662,6 +1662,9 @@ packages/tools/buildServerDocker.js.map
 packages/tools/generate-database-types.d.ts
 packages/tools/generate-database-types.js
 packages/tools/generate-database-types.js.map
+packages/tools/generate-images.d.ts
+packages/tools/generate-images.js
+packages/tools/generate-images.js.map
 packages/tools/lerna-add.d.ts
 packages/tools/lerna-add.js
 packages/tools/lerna-add.js.map

.gitignore

@@ -1647,6 +1647,9 @@ packages/tools/buildServerDocker.js.map
 packages/tools/generate-database-types.d.ts
 packages/tools/generate-database-types.js
 packages/tools/generate-database-types.js.map
+packages/tools/generate-images.d.ts
+packages/tools/generate-images.js
+packages/tools/generate-images.js.map
 packages/tools/lerna-add.d.ts
 packages/tools/lerna-add.js
 packages/tools/lerna-add.js.map

Assets/WebsiteAssets/css/site.css

@@ -379,6 +379,10 @@ p,
 	margin-top: 40px;
 }
 
+#top-section-img img {
+	width: 100%;
+}
+
 .main-content {
 	flex: 1;
 }

Assets/WebsiteAssets/templates/front.mustache

@@ -56,17 +56,19 @@
 									<a href="{{baseUrl}}/plans/" class="button-link btn-trans plans-button">Sign up with Joplin Cloud</a>
 								{{/showJoplinCloudLinks}}
 							</p>
-							<img
-								srcset="
-									{{imageBaseUrl}}/home-top-img.png 2388w,
-									{{imageBaseUrl}}/home-top-img-2x.png 4820w
-								"
 
-								src="{{imageBaseUrl}}/home-top-img.png"
-								alt=""
-								class="img-fluid img-center"
-								id="top-section-img"
-							/>
+							<picture class="img-fluid img-center" id="top-section-img">
+								<source type="image/webp" srcset="
+									{{imageBaseUrl}}/home-top-img-4x.webp 4820w,
+									{{imageBaseUrl}}/home-top-img-2x.webp 2388w,
+									{{imageBaseUrl}}/home-top-img.webp 1205w
+								">
+								<source type="image/png" srcset="
+									{{imageBaseUrl}}/home-top-img-2x.png 2388w,
+									{{imageBaseUrl}}/home-top-img.png 1205w
+								">
+								<img id="top-section-img-img" src="{{imageBaseUrl}}/home-top-img-2x.png">
+							</picture>
 						</div>
 					</div>
 				</div>

packages/tools/generate-images.ts

@@ -1,10 +1,24 @@
-const dirname = require('path').dirname;
+import * as fs from 'fs-extra';
+import { dirname } from 'path';
+import { execCommand } from './tool-utils';
+import { fileExtension } from '@joplin/lib/path-utils';
 const sharp = require('sharp');
-const fs = require('fs-extra');
-const { execCommand } = require('./tool-utils.js');
-const { fileExtension } = require('@joplin/lib/path-utils');
 
-const sources = [
+interface Source {
+	id: number;
+	name: string;
+}
+
+interface Operation {
+	source: number;
+	dest: string;
+	width?: number;
+	height?: number;
+	iconWidth?: number;
+	iconHeight?: number;
+}
+
+const sources: Source[] = [
 	{
 		id: 1,
 		name: 'Square_1024x1024.png',
@@ -33,16 +47,20 @@ const sources = [
 		id: 7,
 		name: 'RoundedCornersMac_1024x1024.png',
 	},
+	{
+		id: 8,
+		name: 'WebsiteTopImage.png',
+	},
 ];
 
-function sourceById(id) {
+function sourceById(id: number) {
 	for (const s of sources) {
 		if (s.id === id) return s;
 	}
 	throw new Error(`Invalid source ID: ${id}`);
 }
 
-const operations = [
+const operations: Operation[] = [
 
 	// ============================================================================
 	// iOS icons
@@ -279,6 +297,41 @@ const operations = [
 		iconWidth: 46,
 		iconHeight: 46,
 	},
+
+	// ============================================================================
+	// Website images
+	// ============================================================================
+
+	{
+		source: 8,
+		dest: 'Assets/WebsiteAssets/images/home-top-img-4x.webp',
+		width: 4820,
+		height: 2938,
+	},
+	{
+		source: 8,
+		dest: 'Assets/WebsiteAssets/images/home-top-img-2x.png',
+		width: 2388,
+		height: 1456,
+	},
+	{
+		source: 8,
+		dest: 'Assets/WebsiteAssets/images/home-top-img-2x.webp',
+		width: 2388,
+		height: 1456,
+	},
+	{
+		source: 8,
+		dest: 'Assets/WebsiteAssets/images/home-top-img.png',
+		width: 1205,
+		height: 734,
+	},
+	{
+		source: 8,
+		dest: 'Assets/WebsiteAssets/images/home-top-img.webp',
+		width: 1205,
+		height: 734,
+	},
 ];
 
 async function main() {
@@ -317,7 +370,13 @@ async function main() {
 			if (destExt === 'jpg') {
 				s.jpeg({ quality: 90 });
 			} else if (destExt === 'png') {
-				s.png();
+				s.png({
+					compressionLevel: 9,
+				});
+			} else if (destExt === 'webp') {
+				s.webp({
+					// quality: 90,
+				});
 			} else {
 				throw new Error(`Unsupported extension: ${destExt}`);
 			}