We avoid upscaling images, but sometimes it’s necessary.
When we built ozake.com, we spent an enormous amount of time searching for crystal clear background images at high resolutions. Not all of the images we wanted were big enough, so we had to upscale some of them.
We used Photoshop, but Pixelmator Pro produces much better results.
And, Upscayl is a new Mac app that uses AI to create very clean and natural-feeling results.
Here’s the original low-resolution JPG downloaded from the internet:
We’ll test three ways of upscaling the image:
Photoshop 24 (2023)
Here are the results:
Pixelmator Pro ($5/month) is far better than Photoshop at upscaling, and it’s extremely fast.
Upscayl consistently produces slightly better results, and it’s free.
This post is about this page↗ — you might want to look at it before continuing.
First, let me be clear: pourover makes the best coffee.
I’ll drink anything rather than go without, but pourover is the way.
I knew this when, after having bought more than fifteen different coffee making apparatuses, including four æropresses, I was drinking coffee at my mother-in-law’s house and thought: mais comment ça se fait que ce café est si bon ? (she’s French).
And I knew that the way, c’est du pourover (if you prefer espresso, I won’t judge you out loud).
This isn’t the post I set out to write
I started out to write an elaborate post about all the cool stuff you can do with Svija.
As part of the process, I created an infographic about coffee filters, then turned it into this web page: ↗
It turned out that I couldn’t find much to write — creating a website with Svija is just like other graphic design.
In this case, it took me:
eight hours to design the main infographic
50 minutes to design a mobile version
40 seconds to convert the fonts for web use
one press of a button to turn it into a web page
So, no long article — I’m not going to write 1000 words about pressing a button.
Svija is a tiny product, practically invisible — you design like you always have.
And, if you feel like making that into a website, well now you can↗.
How does it work?
I’ve been assuming that you know how Svija works. If you don’t, the thumbnail drive version is:
you design normally in Adobe Illustrator
there’s a minimal Mac app that uploads your changes constantly
there’s a tool panel in Illustrator to save the page
an admin website lets you add new pages and decide which Illustrator files will be shown
Svija vs. making a similar page in HTML
If I had wanted to present the same information on a traditional website, I would have had to make a choice between two bad options:
do the same work in Adobe Illustrator then include the graphic as a plain image in a regular web page, or
do a radically simplified version to fit into a WordPress-style theme
Either choice would result in a mediocre experience for my visitors.
But more importantly, in this case, I had fun. The whole process was a blast.
I never had to fight with my tools
I was never blocked from moving or resizing an element as I would have been if designing in HTML
I could use any fonts and shapes, transparency, curves, and long continuous lines, all impossible in HTML
The whole process was creative. There was no administrative stuff — no fighting with a CMS etc.
It did take me 45 seconds to convert five fonts at convert.io (it would have been faster but I’m too cheap for a paid account and can only convert two at a time).
Let that sink in: I did a beautiful web page, one that would be impossible with any regular website builder, and it was fun, (and it’s Google-indexable, accessibly readable etc).
Are there mistakes in my infographic?
I actually don’t know anything about coffee filters, although I did obsessively measure the ones used for the graphic.
I’m sure the kind souls on the internet will correct me if I’m wrong about something.
And you know what? With Svija, I can make corrections in less than 30 seconds.
The next step: animation
The one flaw with this graphic is that it’s static.
We’ve gotten to the point where website animation, at least for a marketing website, has become de rigueur.
The coffee-filter page suffers from an absence of movement. So, I’m going to add some animation.
I won’t add anything too radical, but some dyamic scaling, a little rotation, some gentle surprises, and a few mouseovers will really make the page come alive (h/t Mick Jagger↗).
Visit news.ycombinator.com — 162 comments (some of them were ours). There was lots of useful feedback, and some nice compliments:
Absolutely ingenious. I love what you’ve done here.
I agree, this could fix a massive amount of headaches depending on what kind of site you’re building.
If it’s proven to be performant enough, I think it would work for 90% of sites out there (pages of information + pictures)
Theoretically you could even have a graphic designer build a site without much code knowledge instead of hiring a webdev.
This is how you enable creative web design. Sure, you shouldn’t necessarily run your business on something like this (for a multitude of reasons), but for personal websites and prototypes this is great.
When Flash plugins were on the way out everyone always repeated how this would open the door for equally powerful HTML5 tooling. But while HTML5 has gained all the technical capabilities of Flash, nobody has managed to make an authoring tool as good as Adobe Flash. With the loss of Flash we mostly lost the creative websites by people who can’t code but are great at visual design. This comes close to enabling that again.
I really like that this allows people to finally break free from the box design and try something new. Of course there will be challenges like accessibility along the way but those can be solved.
An idea who’s time has come? SVG is an awesome concept, a superpower that has been basically demoted to create tiny vector icons.
Fuck yeah, I love svgs. I’m not a designer so this isn’t really for me, but the potential here is huge. Nice work.
I really really really really really really really really LOVE THIS.
1 feature I love to see, if possible, is to implement either youtube videos or Gifs.
(Would be cool if there was a really basic keyframe animation tool bar, but thats a lot of work) So don’t listen to me.
But overall i love this. Thank you for making this!
I like this idea. Using SVG on websites is quite fun to break the rigidness.
The workflow idea behind this is super innovative– From your SVG program directly to the web.
Of course some bugs to work out, but for a new idea, damn.
I think this is great! it has some drawbacks, but I enjoy seeing others push the web to its limits.