約20年前、あるクライアントのために美しいデザインのWordPressサイトを作成する機会がありました。しかし時間が経つにつれ、 クライアントがアップロードした画像が歪んでしまい、サイトの見た目が損なわれました。写真をアップロードする担当者が、 適切にトリミングするためのツールを持っていなかったことが原因でした。
画像を一括リサイズするためだけにPhotoshopを購入するのは賢明ではないと思いました。Photoshopを持っていたとしても、 バッチアクションを録画して画像をリサイズすることは難しくありません。しかし異なるサイズが必要な場合は、 別々のバッチアクションを作成しなければならず、最終的にPhotoshopが多くのプリセットで溢れてしまいます。 MacのAutomatorも同様の問題があります。
画像を一括でトリミング・リサイズできる使いやすいソフトウェアを探すのは大変でした。ほとんどのツールはピクセル化した 画像を生成するか、トリミングせずに指定サイズに合わせて変形させるものでした。トリミングなしで特定のサイズに合わせるために 画像を圧縮したい人がなぜいるのか、今でも不思議に思います!
もう一つの障壁は、これらのソフトウェアをインストールする必要があることでした。厳格なセキュリティポリシーのある環境では、 インストールに複数の承認が必要で、問題になることがありました。
この問題を解決しようと決意し、最初はインストール不要のアプリを開発しようとしました。しかし、複数のOSのサポートという 大きな障壁に直面しました。WindowsとMacの各バージョンで異なる実行ファイルが必要で、すべてのシステムでテストするリソースが ありませんでした。
そんなある日、ひらめきが訪れました:この問題を解決するためのウェブサイトを作ればいいのではないか?ウェブサイトは ソフトウェアほど強力ではないかもしれませんが、確実に仕事をこなすことができます。
BIRMEの最初のバージョンは2012年に誕生し、HTML、JavaScript、そしてFlash(Flashを覚えていますか?)で構築されました。 2015年にはZIPファイルの生成とダウンロードのトリガーに使用していたFlashコンポーネントを廃止しました。
BIRME 2.0のデザインは2016年に完成し、それ以来コードを徐々に更新してきました。今日では、最初から思い描いていた ものとほぼ同じになっています!
はい!BIRMEはJavaScriptを使用してブラウザ内で完全に動作し、写真のリサイズとトリミングを行います。 画像はコンピューターから外に出ることはなく、サーバーにアップロードされることもありません。
コードは完全に透明で、プログラミングの知識がある方なら誰でも確認できます。このオープンなアプローチにより、 BIRMEに悪意のあるものを隠すことは不可能です。
画像を特定のサイズにトリミングする際、BIRMEはどの部分を残してどの部分を削除するかを決める必要があります。 そこで焦点自動検出が役立ちます!
焦点自動検出は "smartcrop" という優れたJavaScriptライブラリを使用して、画像の最も重要な部分を特定します。詳細が多い領域(線、曲線、 視覚的な複雑さ)を探します。これらは通常、残したい「面白い」部分です。システムは写真を分析し、 詳細が豊富な領域を特定して保存しながら、重要度の低い部分をトリミングします。
セキュリティ上の理由から、ブラウザは通常、ウェブサイトが一度に複数のファイルをダウンロードすることを制限しています。 BIRMEで初めて複数のファイルを保存しようとすると、ブラウザが許可を求めます。
誤って「いいえ」をクリックしてしまっても大丈夫です!ブラウザの設定で簡単に変更できます。 「[お使いのブラウザ] で複数のファイルのダウンロードを許可する」と検索すれば手順が見つかります。 代わりに「ZIPとして保存」機能を使うこともできます。
名前変更機能はとても簡単です!命名パターンに「x」文字を含めるだけで、BIRMEが連番に置き換えます。 例えば、bird.jpg、cat.jpg、dog.jpgという3枚の画像がある場合、 my-pet-xxxというパターンを使うと、 my-pet-001.jpg、my-pet-002.jpg、my-pet-003.jpgに変更されます。
もう一つの特別なキーワードはORIGINAL-NAMEです。ORIGINAL-NAME_400x400のようなパターンを 使うと、画像はbird_400x400.jpg、cat_400x400.jpg、dog_400x400.jpgに変更されます。
連番の開始番号を設定することもできます。例えば100に設定すると、最初の画像はmy-pet-100.jpgという 名前になります。
ほとんどのオンライン用途では、80%の画質が画像品質とファイルサイズの優れたバランスを提供します。 特別な要件がない限り、90%以上にする必要はほとんどありません。
画像を最適化することで、ウェブサイトの読み込みが速くなり、モバイルユーザーの通信量を節約できます。 さまざまな画質設定を試して、ご自身のニーズに最適なものを見つけてみてください!
ピクセル化は、画像を元のサイズより大きくしようとするときに発生します。「超解像」などの特別なAIツールが 必要かもしれません。