My trembling noodle arms are not made to lift a 150-600mm lens.

Anyway, I try to have it with me more, including in my passenger seat when I drive around, and it paid off.

I found more kestrels!

Two of them seem to have settled in a church, a ten minutes drive away from my place, so I will now head there regularly, hoping to see them again.

Here’s the female.

I tried to find a heron

I did not find a heron.

I tried all the ponds and lakes I know they frequent, and went to a lock where I know they nested a few years ago, but no dice. I did get some nice pictures of cormorants, though! They have beautiful eyes.

An egret found me

It swooped down over a town street when I least expected it (mainly because I did not expect an egret in town, ever), and landed on a house’s chimney.

I needed a moment to process the white shape was not an “abnormally large seagull”, then I swerved off the road and ejected myself from my car in my hurry to take pictures.

The egret was kind enough to pose for me until I was done. I did not get a front view of its face, which is a shame because everyone should see an egret/heron from the front.

Incidentally, the egret found me while I was looking for the kestrels, not the herons.

My first pic of a great egret, ever:

Illegally fancy bird

I also saw a pheasant. He had zero survival instincts and did not seem to compute I was a human while I remained in my car. He did bolt when I got out, at least?

I hope he wasn’t raised in captivity and released for hunting because that shit makes me an enraged kind of sad.

Now, my most common experience with actually hauling the telephoto lens outside is: no birds. Zero. Extinct. Even pigeons vanish. Not this weekend, though! I was blessed.

Genuine photograph of an actual angel

I saw not just one, but two kestrels this weekend. On two separate days and in different locations. Absolute miracle, because I only ever see raptors on the side of highways while driving. But those were semi-urban.

The one on the picture seems to have settled on the roof of an events building in my city, so that kestrel has dominion over two parking lots, while also being right next a woody area and, a short flight away, pastures. Food is easily available in the form of city rats raiding the nearby trash cans, he only has to swoop down. The bird’s living conditions are better than mine.

Just look at this smug fluffball. He doesn’t even pay rent.

The counting

The kestrel thing was entirely separate from the whole “sitting in a stolen garden to watch birds for a census” thing. At the bird feeder, the visitors were a little more commonplace: tits. So many tits.

The blue tits showed up in force. They are a gregarious and adventurous species, so of course whole groups dropped by and shouted their little heads off to alert everyone a human was there. They still went for the food. I love them.

Great tits came in lesser numbers, feet first, to shove the blue tits off the feeder. They are bullies and my least favorite of the Paridae.

One robin showed up - they’re solitary and territorial - very cautious, very annoyed I was there. It didn’t stick around (there was more bird food on a side of the house where I was not).

And then there was the Surprise-For-Everyone-Involved. I was minding my own business, stalking birds and spooking my best friend’s neighbours by pointing a telephoto lens at their houses, when a huge bird landed in the branches behind the bird feeder. And, before my inner catalogue of the local bird species could even boot (“That’s too big to be a tit…”), it saw me and bolted in the opposite direction (“…but it’s not black so it’s not a jackdaw…”), then landed on a tree on the other side of the garden to give me the stink eye (“…and it’s sure not a pigeon. Jay?”).

Probably thought I couldn’t see it anymore, but joke’s on it, I spend ungodly amounts of money on entirely overkill photography equipment.

Behold the power of zoom lenses

It was a great spotted woodpecker.

I can’t tell if it was male or female (you need to check for a red spot on the back of the head, which only the males have, and I did not get a single shot showing it).

I’m going to have to steal my friend’s garden again to find out.

A cool app

If you want a really amazing tool to help counting birds: Merlin Bird ID

It’s incredibly good at identifying birds by sound. Highly recommended.

I was taking bug pics, because there’s sunlight in Belgium right now and I’m not about to waste it, and I was moving leaves and flowers to get better angles.

And this cutie climbed on my finger.

Behold, a cutie:

It didn’t just climb there: it sat on my finger for more than twenty minutes. Just… Sleeping, or cleaning its legs and antennae. Totally unperturbed. I seriously thought something was wrong with it so, after the first ten minutes of bee sleep, I got up and tried to find it a nice little spot.

And that would be how many people taking a stroll got to meet a weirdo holding up a hand and carrying a bumblebee.

The bumblebee was fine, by the way.

I offered it puddle-water-droplets, but it didn’t want those. I showed it every flower on the way in case it was exhausted and hungry, it didn’t want them.

Then I used my secret weapon, “that huge pot of lavender at the end of the trail”. I showed it the lavender (which is THE place to be for all bees around), and it immediately climbed on and started foraging and flying from stalk to stalk.

So, entirely fine, just lazy. I can relate.

Truly magical moment, 10/10, would taxi bees around again.

That plan was thwarted by bees.

I walked a whole 22 steps this Wednesday. Got out of my car, stepped onto a dirt trail between fields and train tracks, and immediately sat down to look at bees until sunset. Right where the trail started.

Can you blame me, though? Look at this face.

The grey-backed mining bee, Andrena vaga

I am not an expert, and you might want to fact-check with entomologists.

The grey-backed mining bees - a species of solitary bee - live in Europe (and other places) and feed primarily on willow pollen.

They are black and shiny, with a fluffy thorax covered in grey hair. The males have distinctive white “beards”, but I did not get good pictures of males. I think this is one, though:

• External source with a good picture, in French.

The females burrow into the ground to nest. While the nests are individual, many bees might nest in the same area, which looks like this:

The digging

I filmed it.

Note: this is not the “brand new tunnel” process. This lazy little one was reopening an existing nest. I saw another bee dig a new tunnel and a lot more effort, time and spinning was involved.

Extra pics

I did. I added them to all my Santa lists and birthday lists, up until the point I actually got my hands on a microscope. It was underwhelming. Whatever it was showing me, it was not what I wanted. So, I stopped pestering my relatives to get me one, and kept receiving truckloads of board games instead (which was also underwhelming because, back then, I was a single child).

Then I became an adult, and then (much later) I got disposable income, and then I got myself a microscope. And it still sucked.

It could have ended there. I could have had savings. But no. I had to impulse buy a camera, and figure out what I actually craved for: “macro photography”.

I want to “zoom, enhance, zoom, enhance” stuff like I’m on CSI.

Behold! A flower.

I went and got myself extension tubes (which are, basically, tubes, which you put between the lens and the camera to get a better magnification). As every single purchase of photography gear, it got me to investigate and order more gear, because photography is a hellish hobby, and you should NEVER TRY IT.

But, anyway, I am very happy to get to see small things, but bigger, and I immediately tested the extension tubes + my macro lens on a flower after trying and failing to take decent shots of insects. Flowers are nice, because they don’t scamper off, unless there’s wind. And if there’s wind, you can just hold them. Nobody will know.

Back to the zooming

Thanks to the tubes, I can now get pretty stunning detail on bugs that are around 4-5 mm, like this mite :

It’s however even harder to get proper exposure and focus, which means I’ll have to practice. A lot.

I struggle with insects because they are small, they move, and sometimes they fly up trees when they notice me. Getting the proper combination of shutter speed and aperture kind of requires the stars to align. Not enough sunlight, and every picture is underexposed; if the sun is too high, the contrast is awful.

Also, even when the sun is where I need it, I can still get the aperture wrong, and only a millimeter thin slice of the bug will be in focus.

My solution to this is to throw obscene amounts of money at the local photography store. The proper solution is practice.

Wish me luck and an attention span!

Bonus: Photobombing

No extension tubes for this one, but here’s the true “outside macro” experience: a tiny bug peeking in while you’re taking pics of something else entirely.

I like taking pictures of bugs. I have limited skills as a photographer, so I need a specific combination of circumstances to take okay pictures match my aesthetic: a sunny day, that “15 minutes window of time” when the sun is at the right angle, pretty leaves, and bugs. The bugs are somewhat critical.

The wet Belgian winter has not been helpful.

Enter “Bug & Seek”

Bug & Seek is a cute bug-catching / simulation game. You play as the new owner of the town of Buggburg’s insectarium, and endeavor to fill it with the insects you catch, while also:

• investigating the mysterious robbery that happened before you arrived
• filling up your codex
• helping the residents by catching bugs for them
• helping local children with their questionable pet choices.

Exactly what Steam needed to put in front of my face to guarantee a sale, in this wet Belgian winter.

The game

There are many bugs to catch (175+), which appear depending on the season, biome, time of the day, and type of hiding spot.

They come with a little catchphrase—

Did I mention it’s pixel art? It’s pixel art, people.

Ahem. They come with funny little catchphrases, but also informative codex entries, which are a delight to read.

Warning: you might end up on the internet at two in the morning, investigating trivia such as “attended by ants for honeydew” and “burn their enemies alive”.

You also gradually enhance and decorate the insectarium, improve your catching skills — which allows you to catch rarer insects — and help build the university’s collection.

Conclusion

It’s cute, I love it. If you’re into insects, chances are you’ll like it too!

I went to school for websites back in ‘00, ‘03, when everything was made of tables and spacer.gif, and you had to keep your entire website under 150kb or you failed your class. So gather ‘round, children, and listen to the questionable wisdom of a woman who has refused to touch any sort of HTML since the advent of responsive design.

(I am not an expert.)

What’s this rambling about?

We’re going to be covering a few assorted topics:

• Why nuking your visitors’ mobile data is bad
• How to check if your website is too heavy
• What to do about it
  • image-side
  • HTML-side

It’s not super complicated, but I really like run-on sentences and sound very condescending.

Why is file size so important?

Heavier images are slower to load, and your visitors might find themselves staring at your art gallery, waiting for each picture to load. Slooooowly. Sloooowly. Line by line. Some of those visitors have ADHD (I am referring to nobody in particular and especially not me). They’re gone.

More importantly, mobile data comes in various package sizes, and some people have less than 1gb/month. Throwing 100mb of images at them on a single page is downright cruel.

Did I sin? Are my images too heavy?

There are quite a few good tools that will analyze a page and tell you everything wrong with it. Today, we are going to use PageSpeed Insights.

Grab your site URL (preferably the page with the most images) and throw it into the form. Submit. Get a cup of tea. Come back to a soul-crushing report that gives you:

• Scores (for mobile and desktop)
• Acronyms
• Judgement
• A laundry list of recommendations

Now search the report for the words “Avoid enormous network payloads”. If you don’t find it, you did good :3

How to fix it?

Smol images

We are going to take the “Peter Pan” approach to things growing too much:

The boys on the island vary, of course, in numbers, according as they get killed and so on; and when they seem to be growing up, which is against the rules, Peter thins them out; (…)

There are various ways to make images “thinner”:

Using adequate dimensions

Determine the largest width/height the image will be displayed at on your page. If your layout is 1200px wide, resize larger images to match that size it in an external editor. Create small thumbnails and link to the large file if needed.

Some screens have a higher pixel resolution, and need alternate larger pictures to display, we’ll cover that in the HTML part!

Using an adequate file format

We have the oldies:

• JPGs are better for photography, and lossy.
• PNGs are heavy but can have use alpha transparency.
• Indexed PNGs (fixed palette with max. 256 colors) are good for pixel art with flat transparency but no animations.
• GIFs have an indexed palette too, and they handle animation. Good for pixel art and such. Not supposed to be used for TV show sequences, but the internet decided otherwise.

Then we have modern formats:

• WebP
• AVIF: open file format and really cool but not yet supported by Edge, so we’ll skip it until Microsoft gets its s*** together.

♫ Everything you the old formats can do, I WebP can do better. ♫

Or, at least, WebP tries its very best. It offers very good compression, handles animation and transparency … So, unless converting your original image to WebP horribly mangles it (or somehow makes it heavier), use WebP. It’s well supported.

Internet Explorer doesn’t count.

“I am not converting my 24871 images by hand!”

Caesium Image Compressor has you covered!

It has every feature you’ll need to quickly convert all (and by that I mean “most”) of your images to WebP:

• It can load folders recursively and save the compressed images to the same folder
• It has various resize options (percentage, dimensions, fit width or height)
• It can add suffixes to the saved files

Which means you can generate “my-birb_thumbnail.webp”, “my-birb_small.webp” and “my-birb_full.webp” from “my-birb.jpg” within minutes, for 24871 images if necessary.

Other tools

• TinyPNG: Optimize images online
• Website Planet compressor: Alternate optimizer (no Webp)

Fancy HTML

To accommodate the many screen sizes an resolutions out there, there’s responsive images.

The website provides a base image and alternate versions, and some instructions on when to use them. The browser picks the best for the current viewport. Which is why I introduced you to Caesium Image Compressor three paragraphs ago. You’ll need it.

Now brace for confusion, although I’m just going to tell that you that features exist, and that smarter people have written better tutorials.

The “srcset” attribute

The simplest way to handle responsive images. It’s a straightforward way to display the same image, but in different sizes, with the browser picking the best size.

The srcset attribute is used on the image tag:

  <img src="birb.webp" srcset="birb.webp, birb-2x.webp 2x">

Defining the srcset comes with various degrees of complexity. You can target:

• the pixel density of the screen, using pixel density descriptors (1x, 2x, 3x), so larger images can be used on devices with a higher resolution.
• the viewport’s width, by providing the width of the images: for an image that is 300px wide, we use the “300w” descriptor. Pixel density impacts this.
• Precise sizes, by adding a “sizes” attribute. It allows for more fine-tuning. You list the various sizes of the image in the srcset attribute, and “media conditions”, like the maximal size of the viewport, and the available “slot” width to occupy.

<img
  srcset="birb-400w.jpg 400w, birb-750w.jpg 750w"
  sizes="(max-width: 500px) 400px, 750px"
  src="birb-750w.jpg"
  alt="A bird" 
>

The “picture” tag

It can be used when you want:

• a fallback image for older browsers that do not support WebP.
• different images depending on the situation: to change the image orientation, to display cropped pictures on phones so the details are clearer…

Here is an example that does both:

<picture>
  <source media="(max-width: 582px)" srcset="robin-portrait.webp">
  <source media="(min-width: 583px)" srcset="robin-landscape.webp">
  <img src="robin-landscape.jpg" alt="A robin">
</picture>

If you resize your browser window, this robin should switch between a portrait closeup and a landscape picture:

Documentation

As I said earlier, smarter people wrote about this ;)

• Mdn: Responsive images
• The Definitive Guide To Responsive Images On The Web

They don’t work anymore and I am sad. Anyway. I wanted some, and windows wouldn’t cooperate, so I made some. But at the website level because I am a “web” dev.

The script

What it does

You give it image urls and a few parameters. It will create an image element in your html, then move it to the upper right corner of elements that have a class of your choice.

You’ll have to draw your own images because I’m lazy and didn’t make samples ;)

How to use it

First, add the script to your page. You can download the javascript file on Github.

  <script src="/assets/js/mp-screensitter.js"></script>

Then, include this javascript at the bottom of the page, and change the parameters as needed.

<script>
window.addEventListener("load",function(event) {
    new MpScreensitter(
        {
            seat_class: 'seat',  
            sitter_class: 'sitter', 
            sitter_images: [
                './sitter.gif',
                './sitter2.gif',
            ],
            sitter_offset_x: 10, 
            sitter_offset_y: 14, 
        }
    );
},false);
</script>

Parameters

They are all optional, but tweaking of the offsets will be needed if your image goes over the box it sits on.

The “sitter_images” array should also contain your images with their proper path.

seat_class (default: “seat”)

The CSS class of the elements to target. You can have multiple “sitters” on a page if you target different classes. The target elements cannot be inline!

sitter_class (default: “sitter”)

The class of the sitter image

sitter_images (default: [’./sitter.gif’] )

A list of the possible sitter images. One will be selected at random the target box changes.

sitter_offset_x (default: 0)

Distance from the right side of the box in pixels

sitter_offset_y (default: 0)

Vertical offset in pixels. The “legs’” size

Get the script on Github

But css variables are my new favorite thing.

But what are those?

Variables store values, and can be accessed in other parts of your stylesheet, to apply said values to various elements.

Instead of finding and replacing a color, font, etc. everywhere you used it, you can instead define it in one place and change it there.

Declaring variables

You can declare your variables inside a selector.

The simplest way to do it is to use the :root selector, which will make the variables accessible globally.

:root {
    --my-color: #fff;
}

You can then call that variable in other selectors, using the var() function, like this:

.my-class {
    color: var(--my-color);
}

Variables in action

Let’s make a very, very simple example with minimal html.

<div class="tut-demo">
    <header>Title</header>
    <div>My fancy content</div>
</div>

That isn’t very fancy, so let’s give it a makeover. In our css file, let’s define the variables we will need: colors, a border radius…

:root {
    --tut-bg-primary: #fff;
    --tut-bg-secondary: #8f0b42;
    --tut-color-primary: #17181c;
    --tut-color-secondary: #fff;
    --tut-border-radius: 20px;
}

And then, let’s use the variables in our selectors.

.tut-demo {
    background: var(--tut-bg-primary);
    color: var(--tut-color-primary);
    border-radius: calc(var(--tut-border-radius) * 1.5);
    border: 2px solid var(--tut-bg-secondary);
}

.tut-demo header {
    border-radius: var(--tut-border-radius);
    background: var(--tut-bg-secondary);
    color: var(--tut-color-secondary);
}

And here we are. Behold, our fancy block:

And now we switch themes!

CSS variables can be redefined inside selectors, which allows for quite a bit of customisation with minimal code.

You don’t have to redefine every variable. You can do this:

.tut-demo-blue {
    --tut-bg-secondary: #3d9bbd;
}

<div class="tut-demo tut-demo-blue">

Or you can do this:

.tut-demo-yellow {
    --tut-bg-primary: #3f3f3f;
    --tut-bg-secondary: #ffc771;
    --tut-color-primary: #ffffff;
    --tut-color-secondary: #000000;
    --tut-border-radius: 0px;
}

<div class="tut-demo tut-demo-yellow">

It makes everything easier.

Want a day/night theme? Change the colors. Change the images. Want to make things a bit easier on your dyslexic visitors? Change the fonts, the line height and letter spacing. Or you can just be creative and have a custom design by page.

Theme switching demo

Default Blue Yellow