Songs per day

Ever wondered which day was the most popular? It’s definitely a Sunday, I’ve looked it up!

Apparently artists get really inspired by the weekend, not so much by the mid-week… So if you’re looking for a new song-idea, be original and sing about a Wednesday!

Everybody loves graphs

Day Original Covers
Monday 42 577
Tuesday 13 106
Wednesday 4 11
Thursday 6 21
Friday 19 146
Saturday 69 403
Sunday 79 928

Thanks to: https://secondhandsongs.com

Old style cat-movie

In the last post I wrote about creating a movie from a series of images. Here’s a taste of what that looks like 😸

The photos were taken in burst-mode. I used FFMPEG to convert to grayscale, scale down to 420p and dimmed the contrast a little (so the image lights up a bit).

ffmpeg -r 10 -pattern_type glob -i "*.JPG" -vcodec libx265 -vf "scale=-1:420, format=gray, eq=contrast=0.8" -tag:v hvc1 -preset veryslow -crf 28 -an -pix_fmt yuv420p poezenfilmpje_gray_scaled_vs_fps10_eq_nob.mp4

With this, 1,18GB of JPG-images get compressed into a 665KB movie. Impressive.

I also tried:

  • different presets (ultrafast: smaller filesize, but looks much worse)
  • different framerates (10fps worked best)
  • increase brightness (made it look ‘flattened’)
  • curves=strong_contrast, but made it too dark

Creating movies and GIFs from a series of photos

I sometimes use ‘burst mode’ on my camera if I’m making photographs of my daughter (or cat), so I can select the best photo and discard the rest. After a while I found out that these burst-photos are also cool to show as a video. These short ‘movies’ look they are shot with an old-fashioned videocamera.

Here’s my process 🤓

Images to MP4

The command to create a movie from a series of jpg-images (without resizing):

ffmpeg -r 10 -pattern_type glob -i "*.JPG" -vcodec libx265 -tag:v hvc1 -preset veryslow -crf 20 -an -pix_fmt yuv420p result.mp4
  • -vcodec libx265: the best quality encoder
  • -tag:v hvc1: necessary for playback on OSX
  • -crf 20: great quality / filesize (28 is default, 16 is visually lossless)
  • -an: no audio
  • -pix_fmt yuv420p: also necessary for playback in Quicktime
  • -preset veryslow: slow encode, best quality
  • -r 20: 20 ms between frames
  • optionally -vf "scale=-1:420, format=gray": rescale (to 420p) and gray-scale

CRF is a factor to indicate quality/filesize. I find it extremly hard to judge the result from this. One source suggests using CRF 16, but to my eye there is no difference between 17 or 20. You can check for yourself with two samples I generated: image 1, image 2. I’ve included the previous encoder of choice in the table below as well to show how impressive H.265 is. According to the documentation, CRF 23 is default in H.264 and CRF 28 is default in H.265.

Setting Filesize Quality
H.264, CRF 17 38MB great
H.265, CRF 17 27,5MB great
H.265, CRF 20 17,2MB great
H.264, CRF 23 13,7MB good
H.265, CRF 28 3,5MB good (impressive for this filesize)

for 24 JPG images all at 4,7MB (totaling 112,8MB)

Images to GIF

H.265 is nice, but sometimes you need a more archaic format if you want to share your movie. The following incantation converts a series of images to a GIF. You will need ffmpeg and ImageMagick installed (which is easy, if you have brew on your Mac).

ffmpeg -pattern_type glob -i "*.jpg" -vf scale=800:-1 -r 10 -f image2pipe -vcodec ppm - | convert -delay 10 -layers Optimize -loop 0 - result.gif

The above seems to create the best looking gif for the smallest filesize (2,5MB for the same 24 images).

Other methods I’ve tried:

  • using only ffmpeg: some weird pattern gets added to the GIF
  • using imagemagick first and ffmpeg last: same weird pattern added to the GIF
  • using only imagemagick: the file ends up twice as big, no visible improvement
  • using graphicsmagic: similar results to imagemagick
  • using palettes, different scaling, different dithering in ffmpeg… Nothing got close to the combo-option described above:

Different dithering (looks good, bigger filesize)

ffmpeg -r 10 -pattern_type glob -i "*.JPG" -vf scale=800:-1:sws_dither=ed -an -pix_fmt rgb8 ffmpeg_dither.gif

Using palette creation and different rescaling (not a great result, also big file)

ffmpeg -r 10 -pattern_type glob -i "*.JPG" -vf scale=800:-1:flags=lanczos,palettegen -an -pix_fmt rgb8 -y tmp_palette.png
ffmpeg -r 10 -pattern_type glob -i "*.JPG" -i tmp_palette.png -lavfi scale=800:-1:flags=lanczos,paletteuse=dither=floyd_steinberg -an -pix_fmt rgb8 -y ffmpeg_lanczos_palette_dither.gif

Here’s more info on these settings

note: ImageMagick uses ‘delay’ and FFMPeg uses FPS. The delay in ImageMagick is described in ticks (1/100 of a second). So 20 FPS is a delay of 5 (delay=100/FPS)

Optimization

Apparently ImageMagick already does a great job of optimizing. Using gifsicle --optimize does not result in a smaller filesize (sometimes even enlarging the file).

Tools used: ffmpeg 3.4.1, imagemagick 7.0.7-18

Comparing photo-services • Part 1

We got some photos printed, but I wasn’t 100% satisfied with the quality. Thirty-year old photos from my childhood look sharper! At first I thought this was because of the photos being taken with a digital camera, but then I realised it could also be the printer.

I’ve since found out that the company we used (Hema) is rated as one of the worst places to print photos.

Other photo-printers

In the search for a better photo-printing service I’ve decided to order 20 photos at three different providers so I can see the quality differences for my self. I looked around at several online reviews, comparison sites and forums to see which providers I would compare. Below are the sources that mostly influenced my decisions.

Silent shiver

This horse-photographer made a very detailed comparison of three professional photography printers. I’m going to use her post as a blueprint for my when I compare the photos.

Compared:

  • Profotonet: most consistent quality, but least sharp
  • Saal Digital: cheapest, but less consistent in quality
  • FIFO Color: sharpest prints, but too dark

Fotovergelijk

Fotovergelijk is a place where people rate printed photos and compare pricing. Hema is rated the worst…

I’ve added the printer-service used by the website if they don’t print their own photos.

Good:

  • Profotonet (10)
  • Albelli (9) uses Albumprinter to print
  • Webprint (9) (named Smartphoto in other countries)
  • Fotofabriek (9)
  • Pixum (9) CeWe
  • Fotogoed (9) Küpper druck

Reasonable:

  • Blokker (8) Fujiprint
  • Albert Heijn (7) CeWe

Bad:

  • Aldi (6) CeWe
  • Kruidvat (5) CeWe
  • Hema 🤨 (4)

The scale originally goes from 1 to 5, but I converted it into a 10-point scale so I can compare it with the scoring of Onlinefotoservices.

Onlinefotoservices

Lastly, we take a look at onlinefotoservices, another comparison site.

Highly rated:

  • Profotonet (8,8)

Reasonable:

  • Primera (7,7) CeWe
  • Smartphoto / Webprint (7,6)
  • Pixum, Aldi, Photobox (7,4) CeWe

Bad:

  • Kruidvat (6,3) CeWe
  • Hema (6,1)

Conclusion

Everybody agrees Profotonet is the marketleader in high quality photo-printing. Albelli and Webprint seem to be a good 2nd place. CeWe is popular, but has a mixed track-record. The other two high-rated services from Fotovergelijk are not known to me (Fotofabriek and Fotogoed) and are also more expensive. They are highly rated in service, so perhaps I can go back to them some time.

For now I will order photos at Profotonet, Albelli and Webprint. In the next post I’ll compare the outcomes!

Prototyping with Axure • Part 1

I use Axure in my work as UX-designer and thought I’d share some of the tricks I’ve come up with in the past 5 years. This post was originally named “OMG Axure, WTF?”, because these are some nice hacky workarounds 🤓

I’ll add more over time, but for now I have two image-related tips.

1: Never optimize images

By default Axure asks if you want to ‘optimize images’ on import:

Always answer No here

I always answer ‘no’ on this: Axure has a very aggressive image optimization. You will notice JPG-artifacts (especially in corners) and enlarging the image will make it look extremely bad. On top of that, lose the alpha-channel in PNG (so no more ‘see-through’).

Optimizing images is not necessary. This is not the ’90s anymore! I have very image-heavy files with dozens of pages in them (because for some projects our agency still uses static-comps) and my six-and-a-half year old MacBook Pro handles them just fine.

Of course, if the image does slow you down, you can very easily optimize it later by right-clicking ‘optimize image’ or slicing a tiny piece off of it (CMD-6). But be careful: there is no ‘unoptimize image’!

If you do remote-testing and you worry about page-load: read on!

2: Preload images for remote testing

Axure does not export an image multiple times if the same image is on multiple pages. Instead it links to the same image-file. ‘So what’, you might think, ‘big deal!’

But this is actually very useful information for us! For remote testing we sometimes have users with very little bandwidth and in that case it might be detrimental to the test if the pages load very slow. Especially because I ‘never optimizing images’ 😇

Here’s the tip: after you’re done with your masterpiece of a prototype, create another page in Axure and call it ‘preloader’. Go through all your pages and copy all images to the ‘preloader’ page. Easiest is to CMD-click on the images in the bottom-right pane to select all of them, then CMD-C to copy.

Copy all images

Now you should have all images from your prototype on the ‘preloader’-page. Simply add a huge white-box over them and add a bit of an explanation for the people participating in the test. Also include a button so people can start the test. If you want to be really fancy, you can disable the button first and have it be enabled after ~10 seconds (because people never read the label ‘wait for instructions’).

The end-result

Why cover the images with a big white box, and not set the images to ‘hidden’ in Axure? Because some smart browsers might realise the images are set to visibility:hidden and not load the images to preserve bandwidth.

Now all your pages will load quickly!

That’s it for now, more tips will follow!