Added image optimization

build.sh

@@ -20,16 +20,44 @@
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 # SOFTWARE.
 
-
 write_section_header() {
 	echo "<h2 class='s$1 clickable' onclick='activeSection(\"$2\")' >" >>$3
 	echo "$2" | tr a-z A-Z >>$3
 	echo "</h2>" >>$3
 }
 
+MINIFIED_IMAGES_DIR='.minified'
+IMAGE_PREVIEW_WIDTH=200
+
+# Returns path to minified img or default img if no tools for minification
+minify_image() {
+	local image=$1
+
+	if ! [ "$(command -v magick)" ]; then
+		echo "${image}"
+		return
+	fi
+
+	local preview_image
+	preview_image="${MINIFIED_IMAGES_DIR}/${image}.min.png"
+
+	mkdir -p "$(dirname "${preview_image}")"
+
+	magick convert "${image}" -resize "${IMAGE_PREVIEW_WIDTH}" -format png -write "${preview_image}"
+	echo "${preview_image}"
+}
+
 write_img() {
-  echo "  <a target='_blank' href='$1'>
+	local image=$1
-<img loading='lazy' src='$1' alt='$1' width='200'></a>" >> $2
+	local output=$2
+
+	local preview_image
+	preview_image=$(minify_image "${image}")
+
+	echo "
+  <a target='_blank' href='${image}'>
+    <img loading='lazy' src='${preview_image}' alt='Preview of ${image} image' width='${IMAGE_PREVIEW_WIDTH}'>
+  </a>" >>"${output}"
 }
 
 rm *.html
@@ -71,13 +99,11 @@ maxPerPage=8
 
 declare -a sections
 
-for subdir in ./wallpapers/*
+for subdir in ./wallpapers/*; do
-do
 	section="${subdir##*/}"
 	sections+=("$section")
 	write_section_header $color "$section" ./index.html
 
-
 	page=1
 	img_count=0
 	subhtml="${section}_page${page}.html"
@@ -88,14 +114,13 @@ do
 	echo "<div class='pager'>" >>./index.html
 	countImgs=$(find "$subdir" -type f | wc -l)
 	countImgs=$((countImgs - 1))
-  for i in $(seq 1 $((( $countImgs / $maxPerPage)+1))); do
+	for i in $(seq 1 $(((countImgs / maxPerPage) + 1))); do
 		echo "<button class='btn pager-btn' onclick='loadPage(\"$section\", $i)'>$i</button>" >>./index.html
 	done
 	echo "</div>" >>./index.html
 	echo "<div  id='$section-content'>" >>./index.html
 	echo "<div class='c'>" >>./$subhtml
-  for wallpaper in ${subdir}/*
+	for wallpaper in ${subdir}/*; do
-  do
 		if [ "$img_count" -ge $maxPerPage ]; then
 
 			echo "</div>" >>./$subhtml
@@ -103,7 +128,6 @@ do
 			subhtml="${section}_page${page}.html"
 			touch ./$subhtml
 
-
 			echo "<div class='c'>" >>./$subhtml
 			img_count=0
 		fi
@@ -140,7 +164,6 @@ echo "
 }
 </script>" >>./index.html
 
-
 echo "
 </body>
 </html>" >>./index.html