Show HN: Make Your Photo 16x9 | Hacker News Reader

Show HN: Make Your Photo 16x9

einaregilsson.com

146 pointseinaregilsson43 comments

Here is how you can do it with ImageMagick:

`convert -gravity center -background black -compose Copy -resize 800x450 -extent 800x450 input.png output.png`

Sadly I don't know how to do it without specifying the size in pixels. Using `16:9` for resize and extent doesn't do the trick.

Do you have instructions so your mom could do that? Or would you just send here to the OPs website?

I know which I'd do...

You're bringing in the moms... Does yours read HN?

A certain audience does enjoy technical hints and explanations. Heck, ImageMagick / convert are part of quite some workflows on servers...

Fair point... :-)

yes. Figuring out the size thing is a technical problem. Then you can put the resulting script into a desktop-iconifiable format where she can just drag-and-drop her image onto. No website needed and just as simple as the website.

One can utilize `zenity` with that command to fire up a GUI filepicker and input box for sizes.

The site itself is at https://photo16x9.com

Cool... any chance to see a "photo1x1.com" doing exactly the same for Instagram, maybe? (They favour square format creating a simikar problem for users).

I just skimmed the source code and it looks like you could add support for other aspect ratios really easily. Not sure if OP is accepting pull requests.

EDIT: I went ahead and added quick support for other aspect ratios myself. Feel free to use it.

https://gist.github.com/CivBase/92f1b387c4c98d24481ec28ea2fc...

4x5 is the optimal size on Instagram I believe. Gets you the most screen real estate as someone is scrolling past your photo

Ridiculous feature request: Use fancy ML to content-aware fill the extra space

Uncrop! :)

While still keeping it one page of html source code.

Enhance 224 to 176. Enhance. Stop. Move in, pull out. Track Right. Center in. Track 45 right. Print.

I'm somewhat surprised twitter hasn't gone ahead and implemented something like this themselves. Kudos for building a solution!

Thanks It was fun to build.

Letterboxing has been deemed Ugly by modern web designers. Better to discard useful content until it looks nice.

It was deemed ugly long before that. TVs have been defaulting to stretching/cropping to avoid letterboxing or pillarboxing for years. And before that, movies were converted with pan-and-scan to fill a 4:3 TV.

And DVDs, Sony did this to Visconti's masterpiece Vaghe stelle dell'Orsa, monsters

Twitter is making some changes: https://news.ycombinator.com/item?id=26416065

This would be a solution to a problem that Twitter created themselves. They decided to crop the images using "advanced algorithms" (which in reality works worse than random()).

The only solution is for Twitter to stop cropping the images. Problem solved.

Thanks for making it a one-file web page. Even though I don't have an immediate use for it, it's so nice to see a web app that loads instantly.

While I understand why Twitter is so popular and why people put text in images to share it on Twitter this problem is still very silly.

Kudos to the author regardless.

I built four tools that looked and functioned almost exactly like this about six years ago, but using PHP.

They were called "Picture Perfect," "Portrait Perfect," "Partner Perfect," and "Process Perfect."

I initially developed Picture Perfect for my reporter colleagues at a news radio station to use for our website, and they loved it.

Just drag a photo on the site, crop it exactly how you want to our website's exact aspect, and hit download to save it to a work machine.

My homophobic boss didn't like that I had this on my own server and didn't get approval to share it first, so he ended up sending the link to SoCast (a CMS company) and they built the functionality into the backend a week later. Whatever- it made our lives easier.

Then I moved on and worked at a small local news blog site, and repurposed these tools to use there. We had a quota of articles to write, post, and schedule on social media per shift, and these got 45 minutes of manual photo editing down to five minutes per shift.

These were the tools:

Picture Perfect: Drag and drop a photo, then draw a crop box on it and output exactly the dimension you need.

Portrait Perfect: Drag and drop a portrait photo, and output a version of it centred on a blown-up, blurry version of itself.

Partner Perfect: Drag and drop two photos, draw a crop box on each, and output a single image of them sitting side by side (useful for two portraits of sports stars, or when there were two mugshots).

Process Perfect: Drag and drop a photo and either output a black and white version or a version with a colour multiply effect applied.

When I left that job, I pulled them offline, but recently started work on a site that merged all four of them (behind a login, where you can create any aspect and save your creations). It's buggy and slow, but I haven't had the time to finish polishing it: https://phototools.prezince.com/

But either way, it definitely provided value, and I'm glad someone has done it using only front end code. Good work!

> My homophobic boss didn't like that I had this on my own server and didn't get approval to share it first...

> When I left that job, I pulled them offline...

Sounds like the first boss had the right idea...and obviously not the homophobia.

I'm pretty sure you're allowed to build little utility websites and share them with your friends on Facebook.

Extra context: people complained about how tedious the SoCast CMS was to use for years before I got there.

Either way, whatever, as long as the tool effected change, I got what I wanted for myself and my co-workers.

> I'm pretty sure you're allowed to build little utility websites and share them with your friends on Facebook.

Your friends, sure, but not necessarily your coworkers, depending on the context. The company might be under various legal obligations with regards to how those photos are used, and sending them to an unapproved third party could put them in serious legal hot waters. That's regardless of your intentions.

I doubt that's the case here and trust your assessment of the situation. I also think the comment you're replying to wasn't particularly tactful. But yeah, it could be an issue in some situations and, like it or not, as engineers we always have to keep an eye out for this kind of stuff.

Fair enough. Thanks for the tactful and insightful comment.

Depends on the state, but often if you make something that relates to your employer's business, even on your own time, your employer owns it.

I don't know the laws here in Canada but I was always under the impression if you do something on your own time with your own equipment, you own the IP. It's been that way at several of my employers in the creative fields.

I only spent two hours building the initial Picture Perfect prototype, so at least it got something done when my former boss couldn't deliver something after two years of people begging for an easier way.

> My homophobic boss

This is either the opposite of how people used to say things that weren't cool were "gay," or you just added a useless detail to the story for I'm not sure what reason.

He actively tried to cripple my career because of my sexuality, going as far to start putting me on non-broadcasting shifts because I "sounded too gay" (which I don't, I just don't have an AM voice that sounds like I've been smoking cigars for two decades).

In his words, it "affected the trust listeners had in the station."

So, he wasn't pleased I built a tool in two hours that he couldn't deliver in at least a year.

I didn't even hide the tool. I gave it to two senior staffers and sent it his way right away.

this is really neat! Now someone just needs to make this for video so I don't need to use ffmpeg to meet Twitter's video standards.

https://gist.github.com/nikhan/26ddd9c4e99bbf209dd7#gistcomm...

At first glance (and the glances after that), the blurring makes me think there are things being censored. IMO unhelpful because the audience will think "hey why is this screenshotter hiding stuff before and after the quote?"

Fair point, although I like the blur effect. But you can also fill in with a solid color or transparency.

I've been looking for something like this for a while, for the same reason as you (optimizing pics for Twitter). I currently use the Skitch app on macOS, which requires like 5 clicks and a few keystrokes to lock the ratio to 16x9.

Maybe you can double its usefulness by adding an option to save as WebP, so that's both a ratio and a format converter.

I think should be trivial, on current supported browsers at least.

Does the Canvas api have support for webp?

By quickly looking at MDN[0], at least in Chrome, yes. Honestly, I can't say for other browsers at the moment.

[0]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasE...

My friend has a blog and will love this. Could you let the user control the blur ? I tried it and for some images I found that the blur was not strong enough.

Good idea. I've just changed it so now you can keep pushing the blur button and it will increase the blur by 1px for each push.

This is great for desktop wallpapers as well.

I don't think I know a desktop environment that doesn't do it for you already. What are you using?

Reply on news.ycombinator.com