Web Devs Should Use Srcset For Images.
Enough with manifests. I will not explain why Srcset is the future of web for images (responsive images) because Google that offers the blogger platform to us for writing our stories knows that SRCSET is the key
for better Web and they are already be part of Webp project and they implemented automatically this feature when we upload images to our blogs.
The /s[Number]/ part of the image url when we upload an image is the width of the image we uploaded and this is why the original link of our 800x600 uploaded image for example has the /s800/ as part of the image link.
But how we can create different dimension sizes of our images if we want to create a manual carousel like this i have in my front page ? Manually ? Good Luck on hating your self and your favored image manipulating
program (btw, mine is GIMP). i tried once to create them with different layers of a file and for 4 different images i spend almost 1 hour.
So, for a daily routine it is not the best option creating these different size images from our original image manually and this is why i wrote a small script to allow Imagemagick's mogrify suite create the different
sizes images for me.
If you are not a Linux User, you can install a Linux environment (WSL) in your windows 10 or CygWin in Windows 7 or a Linux virtual machine to install
imagemagick & WebP (i know that there is imagemagick and webp binaries for Windows but my script works only on Linux environments ) .
On Debian based Linux like Ubuntu for example we can install the necessary libraries with this command as root or with sudo in-front:
$sudo apt-get install webp imagemagick
Srcset Script.
After you install the Imagemagick and WebP you are creating a file with this code:
#!/bin/bash
dimensions=("600x400" "800x600" "1400x1200" "2000x1800") #use your resolutions always in format "NumberxNumber"
ext="webp" #change with your desired extension. jpg, png, webp etc. only one and you should have install imagemagick and webp or script will fail
delay=0.3 #you can change or zeroing the delay for sleep. integers or floats the values
echo "Starting"
for i in "${!dimensions[@]}"
do
cp "$1" "${dimensions[$i]}"."$ext"
name=$(echo "$1" | cut -f 1 -d '.')
sleep $delay
mogrify -resize "${dimensions[$i]}!" "${dimensions[$i]}"."$ext"
mv "${dimensions[$i]}"."$ext" "$name-${dimensions[$i]}"."$ext"
if [ $? -eq 0 ]; then
echo "$((i+1))). ${name}-${dimensions[$i]}.${ext} created"
else
echo "something failed on $((i+1)) item of the array"
fi
done
echo "done."
Open your text editor (vi, nano, kate,etc) paste this code, change the dimensions of the different images you want with your numbers. for example if you want 2 images of 320x150 and 640x340 (i
changed the second resolution aspect ratio because mogrify is an excellent imagemagick suite and it will surprise you with the results) type: dimensions=("320x150" "640x340").
Save with any name you want and make it executable by typing: chmod +x
If you want to use it in every folder you are storing images you should add the location of the folder of your script into .bashrc file (hidden file in your user's main folder /home/user/.bashrc) with the command
at the end of the file:
# added the location of the folder i store my scripts
export PATH="/home/user/MyScripts:$PATH"
type: source /home/user/.bashrc
to make it have effect without reboot. if you don't you should reboot to make it available from everywhere.
Usage and explanations.
If you have name your script 2srcset.sh and the name of the image is name-of-the-original-image.png, you can can call the script with this syntax if you have added it to bashrc file:
2srcset.sh name-of-the-original-image.png
or if you don't have it in your environment file with this syntax but only in the same folder as the script file and the image: ./2srcset.sh name-of-the-original-image.png
The script will create in seconds all the different dimensions you have inside the dimensions array and it will convert it to WebP images too. (suggested since it saves a lot of size compared to png and jpg !).
If for any reason you don't want the WebP conversion you are changing the ext="webp" part with something like this for png files: ext="png".
Ending and conclusions.
I hope you will find my script useful and ir will inspire someone to create a similar script for windows scripting language since both
imagemagick and Webp Binaries
are available for windows 😀.
Also, i used a lot lately this script to create the srcset images of my other site (GameLink.gr) and i realized that the images that they scaled down with the script have the
half size of the images that i can create via scale and save with Gimp in Windows and a bit better analysis as you can see from the image above. i don't know how they do it but i think this is why they called the program image
magick!
