6 ms·

Show HN: Make Your Photo 16x9

146 points by einaregilsson 6y ago

einaregilsson 6y ago
The site itself is at https://photo16x9.com https://photo16x9.com
- Pamar 6y ago
  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).
  - CivBase 6y ago
    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/92f1b387c4c98d24481ec28ea2fccc0d https://gist.github.com/CivBase/92f1b387c4c98d24481ec28ea2fc...
  - noahjk 6y ago
    4x5 is the optimal size on Instagram I believe. Gets you the most screen real estate as someone is scrolling past your photo
aminozuur 6y ago
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.
simlevesque 6y ago
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.
- einaregilsson 6y ago
  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.
Myztiq 6y ago
I'm somewhat surprised twitter hasn't gone ahead and implemented something like this themselves. Kudos for building a solution!
- einaregilsson 6y ago
  Thanks It was fun to build.
- p1mrx 6y ago
  Letterboxing has been deemed Ugly by modern web designers. Better to discard useful content until it looks nice.
  - ziml77 6y ago
    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.
    - jjgreen 6y ago
      And DVDs, Sony did this to Visconti's masterpiece Vaghe stelle dell'Orsa, monsters
- stunt 6y ago
  Twitter is making some changes: https://news.ycombinator.com/item?id=26416065 https://news.ycombinator.com/item?id=26416065
- dmitriid 6y ago
  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.
bellyfullofbac 6y ago
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?"
- einaregilsson 6y ago
  Fair point, although I like the blur effect. But you can also fill in with a solid color or transparency.
achairapart 6y ago
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.
- einaregilsson 6y ago
  Does the Canvas api have support for webp?
  - achairapart 6y ago
    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/HTMLCanvasElement/toDataURL https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasE...
biryani_chicken 6y ago
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.
- bigiain 6y ago
  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...
  - TacticalCoder 6y ago
    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...
    - bigiain 6y ago
      Fair point... :-)
  - fock 6y ago
    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.
  - ducktective 6y ago
    One can utilize `zenity` with that command to fire up a GUI filepicker and input box for sizes.
oktvn 6y ago
This is great for desktop wallpapers as well.
- nomdep 6y ago
  I don't think I know a desktop environment that doesn't do it for you already. What are you using?
thrusong 6y ago
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/ 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!
- UncleEntity 6y ago
  > 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.
  - thrusong 6y ago
    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.
dmnd 6y ago
Ridiculous feature request: Use fancy ML to content-aware fill the extra space
- brody_hamer 6y ago
  Uncrop! :)
  - aserafini 6y ago
    While still keeping it one page of html source code.
  - ddalex 6y ago
    Enhance 224 to 176. Enhance. Stop. Move in, pull out. Track Right. Center in. Track 45 right. Print.
abalaji 6y ago
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#gistcomment-3232972 https://gist.github.com/nikhan/26ddd9c4e99bbf209dd7#gistcomm...
deleted 6y ago
[deleted]
not2b 6y ago
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.
hellotomyrars 6y ago
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.

146 points by einaregilsson 6y ago

einaregilsson 6y ago

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

Pamar 6y ago
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).
- CivBase 6y ago
  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/92f1b387c4c98d24481ec28ea2fccc0d https://gist.github.com/CivBase/92f1b387c4c98d24481ec28ea2fc...
- noahjk 6y ago
  4x5 is the optimal size on Instagram I believe. Gets you the most screen real estate as someone is scrolling past your photo

aminozuur 6y ago

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.

simlevesque 6y ago

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.

einaregilsson 6y ago
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.

Myztiq 6y ago

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

einaregilsson 6y ago
Thanks It was fun to build.
p1mrx 6y ago
Letterboxing has been deemed Ugly by modern web designers. Better to discard useful content until it looks nice.
- ziml77 6y ago
  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.
  - jjgreen 6y ago
    And DVDs, Sony did this to Visconti's masterpiece Vaghe stelle dell'Orsa, monsters
stunt 6y ago
Twitter is making some changes: https://news.ycombinator.com/item?id=26416065 https://news.ycombinator.com/item?id=26416065
dmitriid 6y ago
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.

bellyfullofbac 6y ago

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?"

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

achairapart 6y ago

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.

einaregilsson 6y ago
Does the Canvas api have support for webp?
- achairapart 6y ago
  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/HTMLCanvasElement/toDataURL https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasE...

biryani_chicken 6y ago

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.

bigiain 6y ago
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...
- TacticalCoder 6y ago
  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...
  - bigiain 6y ago
    Fair point... :-)
- fock 6y ago
  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.
- ducktective 6y ago
  One can utilize `zenity` with that command to fire up a GUI filepicker and input box for sizes.

oktvn 6y ago

This is great for desktop wallpapers as well.

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

thrusong 6y ago

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/ 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!

UncleEntity 6y ago
> 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.
- thrusong 6y ago
  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.

dmnd 6y ago

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

brody_hamer 6y ago
Uncrop! :)
- aserafini 6y ago
  While still keeping it one page of html source code.
- ddalex 6y ago
  Enhance 224 to 176. Enhance. Stop. Move in, pull out. Track Right. Center in. Track 45 right. Print.

abalaji 6y ago

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#gistcomment-3232972 https://gist.github.com/nikhan/26ddd9c4e99bbf209dd7#gistcomm...

deleted 6y ago

[deleted]

not2b 6y ago

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.

hellotomyrars 6y ago

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.