Hi,
It's possible to do something similar with a custom item field. You would have to make it as a "radio" type and then in the values you could use the img tag of an image in the "title" input field, like you did with the values of the characteristic.
However, the CSS presented in this tutorial would have to be different as the custom fields don't use the same classes as the characteristics.
I can see that you have a size characteristic which apparently doesn't affect the price or anything of your product. So you could do it the other way around: instead of having a size characteristic with a color custom item field, you could make a custom item field for the size selection, and use the color characteristic for the color selection. That way, you would keep down the number of variants.