Web Revival

Not 100% sure it's the right place to post this but it also feels a lot like it 100% belongs here. So, let me know what you think ;)

I don’t know about you but when I decided I've had enough of the big bloated web, it was not just to get back to a Web that was not rotten to its core by marketing-money—and the annihilation of any notion of privacy marketing requires in order to better track everything we do so they can sell more ads. This mattered a lot to me, obviously. But it was not my sole motivation to be looking for a smaller and a more humane Web.

My other reason was to reduce my digital-waste.

Be it storage space used on the server for all the large pictures, or the energy used to make scripts run and to transmit always more volume of data between the server and the computers of any visitor.

So, without being a developer myself, I searched for ways to create a website as small and as light as possible; I searched for ways to reduce the size of the images too so they would waste less space and load faster.

It goes without saying, but to reduce waste the first thing was to refuse tracking, scripts and ads. In summary, I don't have ads at all and I don’t know who is visiting my website or what they do when they're visiting... unless that person decides to tell me by contacting me... through email, or here on Lemmy, as there is no way to publish a comment (but that's not directly related to e-waste, it's me not wanting to deal with spam ;)

Here is what I managed to get, I thought it might interest others and could be an interesting discussion:

• The website is static, it's generated through Hugo. Only the resulting HTML pages (full static, no PHP or JS) are uploaded on the server, with a really minimal CSS sheet.
• Minimalism was my objective to begin with but Hugo can do fancier stuff too. On my website there is nothing fancy, no animation and no effects. Just text and a few images (even the dark theme you can see in the first screenshot is not managed by the website: it's a FF extension called Dark Reader doing it). Also, the home page is text-only so it loads even faster (less than 14kB).
• I don’t think there is a single script running in the background but since I’m not an expert and only transformed an existing theme there may still be something hidden somewhere? All I can safely say is that the website loads very fast and that if there is a script running I honestly don't know about it.
• For optimizing the images I did quite a lot of research. Testing various approaches and compression algorithms. I ended up adopting the… AVIF video file format. Yep, a video format that works flawlessly to save static images and that also saves a lot of storage, like a lot.

To give you an idea, here is the picture I used in my last post (posted this morning). It’s a 1000x710px PNG screenshot of my desktop (879,5kB), next to it is a 700px JPEG (118,1kB) and next to it is a 700px AVIF at... 22,6 Kb. If you want ot check the actual image quality (not this poor compressed version) of the AVIF file go check the actual post.

Since AVIF can be tricky to get right, I wrote a small script that does the conversion for me using the imagemagick and the ffmepg command lines (they will need to be installed on your computer). I could only use a recent version of imagemagick (and that’s what I did when I was still using a Mac computer) but I’ve gotten better results using ffmpeg for the AVIF conversion.

#Excerpt of the full script

# resize 700 px if is larger than 700  
# add an unsharp mask (sharper image)
# Save temp file in /temp
convert "$1" -resize 700x700\> -unsharp 0x1 "/tmp/$NOW.jpg"

# convert temp file to avif using ffmpeg
ffmpeg -i "/tmp/$NOW.jpg" -c:v libaom-av1 -crf 30 -pix_fmt yuv420p "$DIR/optimized.avif"

Since I’m also lazy as fuck and don’t fancy myself typing complex command lines when I can avoid it, I transformed those little scripts into Nemo 'Actions' (Nemo is the file explorer that comes with my Linux Mint system, Actions are one of its nifty feature that lets it execute scripts through the contextual menu). So, now all I need to do is to right-click on whatever picture to have it converted as a jpeg, AVIF (and also a B&W version if I ever need it).

Which makes it almost immediate to get the image I need. If you have never written one, an Action looks something like that:

[Nemo Action]
Active=true
Name=Optimize AVIF
Comment=Convert to a 700px AVIF file
Icon-Name=image
Exec=<action_scripts/makeAvif.sh %F>
Selection=any
Extensions=png;PNG;jpg;jpeg;JPG;JPEG;webp;WEBP;AVIF;avif
Quote=double

If you want to reuse those scripts/Action, they’re on my codeberg Git repo.

Dislaimer: I’m not a dev and I’m not even much of a geek. So, there is no warranty it will work. All I can say is that this works well enough for me and I'm ok with the result. There is no doubt this could be improved upon a lot. If you ever feel like doing it, you’re more than welcome to but please do let me know, so I can also use your improvements.

Also, if you have suggestions, tips, ideas to optimize further my website and images, do not hesitate to share them.

Since you managed to read everything to that point, and in case you want to have a look at my website ;)