https://labs.cybozu.co.jp/blog/akky/tags/%E7%94%BB%E5%83%8F%E5%88%87%E3%82%8A%E5%87%BA%E3%81%97/ Recent content in 画像切り出し on akky@サイボウズラボ・ブログ Hugo ja Tue, 17 Apr 2018 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/ Tue, 17 Apr 2018 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/ <p><a href="https://www.salieo.com/">Salieo</a> は、Javascript で画像ファイルから写真の重要そうなところを切り出して表示してくれるというサービスです。サイトのキャッチは&quot;instantly, intelligently, responsive&quot;(即座に、賢く、レスポンシブに)となっています。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-top.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-top_hu_80a3a2a4c32f355c.webp 480w, https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-top_hu_58695deefb67a8b8.webp 768w, https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-top_hu_54b18f2adc94761.webp 962w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-top.png" width="962" height="766" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>ユーザー登録してAPIキーをもらってみました。同じ一つの写真が<a href="http://akimoto.jp/salieo/">こんな風に</a>自動でクロップされて表示されます。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-cropped-screenshot.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-cropped-screenshot_hu_9de72b71239dbf60.webp 480w, https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-cropped-screenshot_hu_d75680b63ee51f05.webp 678w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/salieo-cropped-screenshot.png" width="678" height="668" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>比較のため、スクリプトをオフにすると以下のようになります。横長でも縦長でも、元の画像がそのまま縮むので、車の形がゆがみますね。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/without-salieo-screenshot.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/without-salieo-screenshot_hu_9cdf8fcad4ef919.webp 480w, https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/without-salieo-screenshot_hu_e221e3fd0f07ae51.webp 674w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2018/04/salieo-generates-responsive-images/without-salieo-screenshot.png" width="674" height="668" alt="" loading="lazy" decoding="async"> </picture></a></p> <p># 物があるところをうまく切り出してくれる、ということなのですが、この写真はちょっと例には良くなかったかな。</p> <p>ユーザー登録した上で、申請したドメインやURLパターンに合致した画像だけが変換の対象となります。変換できる画像の数や変換の回数によって料金が変わりますが、一番下の無料枠でも10画像、月25,000回までの呼び出しができるようです。</p> <p>先行の類似サービスとして、<a href="https://imagga.com/solutions/cropping-api.html">imagga</a>や<a href="https://imagekit.io/">ImageKit.io</a>が見つかりましたが、どちらも無料枠は無いようです。Salieo の無料枠もお試し用という感じの枠ではありますが、実際に試せるのはやはりいいかと。</p> <p>これらのサービスを使えば、切り出しについて特に考えずに元の画像一つをアップロードしておけば、サイトで表示した時にその時の縦横比にあわせて動的にクロップされるわけです。あとは写真から重要そうな場所を切り出す判定部分の精度が良ければ、画像が表示される際の縦横比を固定しにくいサービス運営者からは、有料でも嬉しいサービスとなるかもしれません。</p> <p>via <a href="https://news.ycombinator.com/item?id=16855863">Hacker News</a></p>