added "remove alternative images in other resolutions" option

extension/core/bg/config.js

@@ -47,7 +47,8 @@ singlefile.config = (() => {
 		autoSaveLoad: false,
 		autoSaveUnload: false,
 		autoSaveLoadOrUnload: true,
-		removeAlternativeFonts: true
+		removeAlternativeFonts: true,
+		removeSrcSet: false
 	};
 
 	let pendingUpgradePromise;

extension/ui/bg/options.js

@@ -48,6 +48,7 @@
 	const autoSaveUnloadInput = document.getElementById("autoSaveUnloadInput");
 	const autoSaveLoadOrUnloadInput = document.getElementById("autoSaveLoadOrUnloadInput");
 	const removeAlternativeFontsInput = document.getElementById("removeAlternativeFontsInput");
+	const removeSrcSetInput = document.getElementById("removeSrcSetInput");
 	let pendingSave = Promise.resolve();
 	document.getElementById("resetButton").addEventListener("click", async () => {
 		await bgPage.singlefile.config.reset();
@@ -103,6 +104,7 @@
 		autoSaveLoadInput.disabled = config.autoSaveLoadOrUnload;
 		autoSaveUnloadInput.disabled = config.autoSaveLoadOrUnload;
 		removeAlternativeFontsInput.checked = config.removeAlternativeFonts;
+		removeSrcSetInput.checked = config.removeSrcSet;
 	}
 
 	async function update() {
@@ -132,7 +134,8 @@
 			autoSaveLoad: autoSaveLoadInput.checked,
 			autoSaveUnload: autoSaveUnloadInput.checked,
 			autoSaveLoadOrUnload: autoSaveLoadOrUnloadInput.checked,
-			removeAlternativeFonts: removeAlternativeFontsInput.checked
+			removeAlternativeFonts: removeAlternativeFontsInput.checked,
+			removeSrcSet: removeSrcSetInput.checked
 		});
 		await pendingSave;
 		await bgPage.singlefile.ui.menu.refresh();

extension/ui/pages/help.html

@@ -167,6 +167,14 @@
 				</ul>
 				<p>Pages resources</p>
 				<ul>
+					<li>
+						<span class="option">save lazy loaded images</span>
+						<p>Check this option to save all the lazy loaded images that are not displayed. This may help to save all the images
+							without scrolling the page. This feature is not guaranteed to work on all sites.</p>
+						<p class="notice">It is recommended to
+							<u>check</u> this option</p>
+					</li>
+
 					<li>
 						<span class="option">remove scripts</span>
 						<p>Check this option to remove all scripts. Unchecking this option may alter the document.</p>
@@ -214,11 +222,11 @@
 					</li>
 
 					<li>
-						<span class="option">save lazy loaded images</span>
-						<p>Check this option to save all the lazy loaded images that are not displayed. This may help to save all the images
-							without scrolling the page. This feature is not guaranteed to work on all sites.</p>
+						<span class="option">remove alternative images in other resolutions</span>
+						<p>Check this option to remove images that are alternatives in lower and/or higher resolutions to the ones displayed
+							by default. Checking this this option can considerably reduce the size of the file in some cases.</p>
 						<p class="notice">It is recommended to
-							<u>check</u> this option</p>
+							<u>uncheck</u> this option</p>
 					</li>
 
 					<li>
@@ -317,7 +325,7 @@
 						Chrome/Opera
 						<ul>
 							<li>You must enable the option "Allow access to file URLs" in the extension page to display the infobar when viewing
-								a saved page, or to save a page stored on the filesystem.</li>							
+								a saved page, or to save a page stored on the filesystem.</li>
 						</ul>
 					</li>
 					<li>

extension/ui/pages/options.html

@@ -60,6 +60,10 @@
 	</details>
 	<details>
 		<summary>Pages resources</summary>
+		<div class="option">
+			<label for="lazyLoadImagesInput">save lazy loaded images</label>
+			<input type="checkbox" id="lazyLoadImagesInput">
+		</div>
 		<div class="option">
 			<label for="removeScriptsInput">remove scripts</label>
 			<input type="checkbox" id="removeScriptsInput">
@@ -85,8 +89,8 @@
 			<input type="checkbox" id="removeAlternativeFontsInput">
 		</div>
 		<div class="option">
-			<label for="lazyLoadImagesInput">save lazy loaded images</label>
-			<input type="checkbox" id="lazyLoadImagesInput">
+			<label for="removeSrcSetInput">remove alternative images in other resolutions</label>
+			<input type="checkbox" id="removeSrcSetInput">
 		</div>
 		<div class="option">
 			<label for="maxResourceSizeEnabledInput">set a maximum size for embedded resources</label>

lib/single-file/single-file-core.js

@@ -106,6 +106,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 	}, {
 		sync: [
 			{ option: "lazyLoadImages", action: "lazyLoadImages" },
+			{ option: "removeSrcSet", action: "removeSrcSet" },
 			{ option: "removeAlternativeFonts", action: "postRemoveAlternativeFonts" }
 		],
 		async: [
@@ -393,6 +394,25 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			DOM.minifyFonts(this.doc);
 		}
 
+		removeSrcSet() {
+			this.doc.querySelectorAll("[srcset]").forEach(element => {
+				const tagName = element.tagName.toLowerCase();
+				if (tagName == "source") {
+					const parentElement = element.parentElement;
+					if (parentElement.tagName.toLowerCase() == "picture") {
+						const imageElement = parentElement.querySelector("img");
+						if (imageElement && imageElement.src) {
+							element.remove();
+						}
+					}
+				}
+				if (tagName == "img" && element.src) {
+					element.removeAttribute("srcset");
+					element.removeAttribute("sizes");
+				}
+			});
+		}
+
 		postRemoveAlternativeFonts() {
 			DOM.minifyFonts(this.doc, true);
 			if (this.options.compressCSS) {