こんにちは、Webプログラマの隅です。
〜Web制作の現場でよく目にする光景〜
ディレクター「ここの画像ぼやけてるから他のに変えといてくれる?」
デザイナー・コーダー「(画質が低い画像しかないな……)」
デザイナー・コーダー「この画像の高画質のバージョンいただけませんか?」
クライアント「それしかないです」
デザイナー・コーダー「どうしたもんか……」
支給された画像が低画質の画像しかない、他の会社から引き継いだサイトの画像が粗いけど加工前の画像がない
そのようなことでお困りのあなたにお伝えしたい!
実際の業務で使用しているpythonの活用方法第2弾はWeb制作時に役立つ「粗い画像を高解像度の画像に変換する」方法をご紹介します!
pythonのバージョン確認、インストール
まずPython3が必要になります。
PCにインストールされていない場合は下記記事を参考にインストールしましょう。
https://alaki.co.jp/blog/?p=4129
Pythonのパッケージ管理システム「pip」のインストール
ターミナルを開き、下記コマンドでpipが入っているか確認
1 |
pip -V |
下記のようにバージョンが表示されたらインストール済みです。
1 |
pip 22.3.1 from /usr/local/lib/python3.9/site-packages/pip (python 3.9) |
インストールされていない場合、下記手順でインストールしてください。
■get-pip.pyのダウンロード
まずは、以下のコマンドを ターミナル、または コマンドプロンプト で実行し、 get-pip.py をダウンロードします。
1 |
curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py |
■get-pip.pyの実行
次にダウンロードした get-pip.py を実行します。
ターミナル、またはコマンドプロンプトで get-pip.py が保存されているフォルダへ移動し、以下のコマンドを実行してください。
1 |
python get-pip.py |
再度、下記コマンドでpipが入っているか確認
1 |
pip -V |
下記のようにバージョンが表示されたらインストール済みです。
1 |
pip 22.3.1 from /usr/local/lib/python3.9/site-packages/pip (python 3.9) |
Pythonで画像の高画質化を行う
いよいよ本題の「画像の高画質化」をしていきます。
今回は画像系の機械学習の分野の1つである「超解像」を用いた画像復元ツール「SwinIR」を使用します。
GithubからSwinIRをダウンロード
下記のGithubからコードやモデルをダウンロードします。
https://github.com/JingyunLiang/SwinIR
下記赤枠をクリックしていくとzipファイルがダウンロードされるので解凍します。
学習済みモデルのダウンロード
下記にアクセスします。
https://github.com/JingyunLiang/SwinIR/releases/
学習済みモデル「003_realSR_BSRGAN_DFOWMFC_s64w8_SwinIR-L_x4_GAN.pth」をダウンロードしてください。
次に、このダウンロードした学習済みモデルのファイルを先程ダウンロードした「SwinIR-main」フォルダ内に保存します。
SwimIRによる超解像の実行
今回はサンプルとして用意されているこちらのカエルの画像を使用していきます。
SwinIR-main/testsetsフォルダの中に「sample」フォルダを作成し、高画質化をしたい画像を入れます。
ターミナルを開いて下記コマンドを実行
1 |
$ cd {パス}/SwinIR-main |
※ cd と打ってから SwinIR-mainフォルダをターミナルにドラッグ&ドロップすると楽です。
ターミナルで下記コマンドを実行し、高画質化を開始
1 |
$ python main_test_swinir.py --task real_sr --model_path 003_realSR_BSRGAN_DFOWMFC_s64w8_SwinIR-L_x4_GAN.pth --folder_lq testsets/sample --scale 4 --large_model |
※python3の実行をpythonコマンドに設定していない場合は「python main_test_swinir.py」を「python3 main_test_swinir.py」に変更して実行してください。
※処理に少し時間がかかります。
SwinIR-main/results/swinir_real_sr_x4_largeに処理後の画像ができるので確認します。
処理前の画像と比べてみると……
※左が処理前、右が超解像処理後
かなり綺麗になりましたね!
これでどんな画像もどんとこい!
と思いきや、超解像処理後の画像は元の画像の4倍のサイズになってしまいます。
Webサイトの画像をそのまま超解像処理後の画像に差し替えるとレイアウトが崩れたり、表示部分に対して大きすぎる画像を使用することでSEOの点数が下がってしまう可能性がありますね……
1枚、2枚なら手動でリサイズすれば良いですが数が多くなるとかなりめんどくさい……
ということで次回は超解像処理とセットで使える「pythonを使用して一括で元のサイズに戻す方法」をご紹介します!
ではまた!
【pythonを使用して一括で元のサイズに戻す方法】
https://alaki.co.jp/blog/?p=4342
最後に
ALAKIでは、これからどんどん海外に向けたビジネスを展開していきます。
クリエイティブ業務における修正依頼にかかる時間を1/5にできる自社サービス「MONJI」は海外のユーザー様にも好評です。
以下のサイトより、超直感的な修正依頼をぜひ体験してみてください!
■MONJI サービス紹介サイト
https://monji.tech/ja/
また最近では、閲覧しているサイトから修正依頼を1クリックで作成可能なChrome拡張機能「MONJI-izm」をリリースしました。
従来の読み込みと比較すると、読み込み速度が2倍に高速化。あっという間に読み込みが完了します。
これまでにない、爆速な読み込みを体験してみてください!
■MONJI Chrome拡張機能「MONJI-izm」
https://chrome.google.com/
※Chrome ウェブストアのページが開きます
ALAKI株式会社では、「MONJI」をはじめとするサービスで世界中に価値を提供するため、一緒に大きな目標に挑戦する仲間を募集中です!
さまざまな国で、さまざまな人たちと、ワクワクするビジネスに挑戦したい方のご応募をお待ちしております!
■ALAKI リクルートサイト
https://recruit.alaki.co.jp/
現場の業務フローに寄り添ったWebシステムをお求めなら、私たちALAKIにご相談ください。
ALAKIは経営者様が感じている問題点と、実際にWebシステムを利用される現場スタッフ様が直面している課題を、弊社システムエンジニアが丁寧に聞き取り、お客様と共にシステムを作り上げていきます。
業務改善が実現できるWebシステムをお求めの方は、是非ALAKIにご相談ください。