WordPressの画像を改善および最適化する方法

公開: 2018-02-28

画像が大きすぎてインターネット経由で読み込めないので、久しぶりです。今日、ウェブサイトはそれらなしでは存在できません。インターネットの速度はここ数年で劇的に向上していますが、ブログの写真に注意を払うことが重要です。

あなたのサイトに画像をアップロードするのは簡単だからといって、それはあなたが何の準備もせずにそれをするべきだという意味ではありません。実際、最適化されていない画像は、さまざまな方法でサイトに損害を与える可能性があります。訪問者があなたをどう思うかに影響を与えることからあなたのウェブサイトとSEOランキングの速度に影響を与えます。それでもまだ考えていない場合は、WordPressで画像を改善するいくつかの方法を紹介します。

WordPressの画像を最適化して、サイトをスピードアップし、SEOを改善する方法

なぜWordPress用に画像を最適化する必要があるのですか？あなたが努力するならば、あなたは以下を期待することができます：

より速いサイト
より良いSEO
小さなバックアップ
帯域幅の使用量が少ない
より幸せなユーザー

また、画像を最適化できるさまざまな段階があることも知っておく必要があります。ブログにアップロードする前でも写真の世話をすることができますし、アップロード後にそれを行うこともできます。

サイトで画像をすばやくテストする

最適化に取り掛かる前に、サイトの速度とパフォーマンスをすばやく確認できます。リストのツールのいずれかを使用することで、サイト上の画像がどのような形であるかをすばやく知ることができます。

GTmetrixを使用すると、サイトの読み込みが遅くなる原因となっている正確な画像も表示されます。

アップロードする前にWordPress用に画像を最適化する

ブログを書いている間、ほとんどの人は自分の画像を最適化するために必要なすべてのステップを踏むわけではありません。通常、人々はカメラやスマートフォンから写真を撮ったり、インターネットから写真をダウンロードしたり、コンピューターソフトウェアを使用して写真を作成したりします。

彼らはフォーマット、画像の寸法、ファイル名については考えていません。写真が良さそうな場合、彼らはそれがインターネットの準備ができていると思い込んでいます。あなたがあなたのイメージをチェックしないならば、あなたは災害に向かって構築しています。

画像のサイズを変更する

各画像の幅と高さを確認する前に、WordPressWebサイトに画像をアップロードしないでください。たとえば、最大700ピクセルで画像を表示する場合、より広い画像をアップロードする必要はありません。そうすると、ファイルが大きくなり、サイトの速度が低下しますが、出力は同じになります。 WordPressは追加のサイズを作成しますが、アップロードする前に画像を準備しないという言い訳にはなりません。

画像のサイズ変更はすばやく簡単です。それを助けるMicrosoftペイントのような多くの無料ツールがあります。 EasyResizeのような画像のサイズを変更するための無料のオンラインツールを見つけることもできます。

画像のサイズはテーマごとに異なります。どちらを使用すべきかわからない場合は、WordPressテーマを詳しく調べて写真を調べたり、ドキュメントを検索したり、サポートにサポートを依頼したりしてください。

品質を変更する

寸法を変更した後は、画像の品質を変更することを検討する必要があります。ソフトウェアに応じて、画像の品質を変更するさまざまな方法があります。たとえば、常に人気のあるPhotoshopでは、Web用に画像を保存できます。このオプションを使用すると、画像を低品質で保存できますが、サイトに合わせて最適化されます。

また、画像をJPEGとして保存することを選択した場合、Photoshopは品質レベルを選択するように求めます。この場合、品質を12から8に下げると、画像のサイズが大幅に縮小されますが、品質の差はそれほど大きくなりません。

それでも写真の品質を変更するためのソフトウェアを使用していない場合は、無料のオンラインTinyPNGツールを試すことができます。写真をアップロードして、どのような違いが生じるかを確認してください。

適切なフォーマットを選択してください

サイズや品質を変更した後でも、フォーマットの変更を検討する必要があります。手始めに、適切な形式を選択するだけで、画像から数キロバイトを取り除くことができます。

一般的なルールは非常に単純です。写真をお持ちの場合は、JPEGにしてください。ロゴ、ベクター画像、または非常に単純なコンピューター生成グラフィックがある場合は、PNGを使用してください。グラデーションのない非常に小さな画像がある場合、または上記のような単純なアニメーションを表示したい場合は、GIFを使用できます。通常、PNG画像はJPEG画像よりもかなり大きくなり、形式を変更することでメリットが得られます。

多くの場合、画像を再構成しても品質に大きな違いはありませんが、サイズの違いは予想できます。次回、PNG写真をアップロードする前に、写真を撮ってJPEGとして保存してみて、違いを確認してください。詳細な説明については、PNG、JPEG、GIF、およびSVGの違いを確認してください。

ファイル名に注意してください

ファイル名は重要ではないように聞こえるかもしれませんが、実際には非常に注意する必要があります。画像ファイルの名前には、SEOの貴重な情報が含まれています。他の人がGoogleや他の検索エンジンであなたの画像を見つけられるようにしたい場合は、適切な名前を付ける必要があります。

スペースを使用せずに画像に名前を付けることをお勧めします。ページと画像をランク付けする場合は、キーワードを含めることを忘れないでください。たとえば、フェラーリカリフォルニアの写真をアップロードする場合、ファイル名は「ferrari-california.jpg」である必要があります。 WordPress用のSEOプラグインを使用している場合は、altタグでキーワードがチェックされることをすでにご存知でしょう。はい、適切な画像名を付けることが非常に重要です。

アップロード後にWordPress用に画像を最適化する

パソコンで画像を準備したら、アップロードを続行できます。うまくいけば、あなたの画像はちょうどいいサイズと品質です。形式とファイル名が正しいことを確認しました。アップロード後、WordPressは追加情報を要求します。メタ情報をスキップしないでください。画像を簡単に整理してSEOの準備ができるように、画像の詳細を入力します。

タイトル、説明、代替テキスト、キャプション

技術的な面倒を見る間、SEOを忘れてはいけません。常にタイトルと説明をメディアに追加してください。これは、WordPressのメディア管理に役立ち、SEOの向上にも役立ちます。また、画像が正しく表示されない訪問者に表示されるaltタグも忘れないでください。これはユーザーにとって役立つだけでなく、SEOにも役立ちます。ページのランクが上がり、ユーザーは新しい画像を簡単に見つけることができます。

常にキャプションは必要ありませんが、追加の説明が必要な画像（スクリーンショットなど）には必ずキャプションを追加してください。

WordPressで画像を編集する

写真をさらに編集する必要があることに気付いた場合は、ファイルをアップロードした後でもWordPressで編集できることを知っておく必要があります。アップロード済みの画像の回転、切り抜き、拡大縮小を変更します。サムネイルだけ、または他のすべてのサイズを編集することもできます。 WordPressのネイティブエディタは非常にシンプルですが、時々節約することができます。

すべてのサムネイルを再生成します

これまでのテクニックのほとんどは、まだアップロードしようとしている新しい画像ファイルで役立ちます。しかし、WordPressサイトにすでに数千とは言わないまでも数百のファイルがアップロードされている場合はどうでしょうか。心配しないでください。これらの画像を最適化し、サイズを変更することもできます。

簡単に修正するには、100万人以上のユーザーが使用している無料のRegenerateThumbnailsプラグインに興味があるかもしれません。画像をより細かく制御したい場合は、この記事の次の行で紹介する、画像の最適化に最適なWordPressプラグインのいくつかを確認する必要があります。

WordPressプラグインを使用する

もちろん、サイトの画像を最適化するのに役立つWordPressプラグインは数十あります。下にスクロールして、画像を最適化するための最適なWordPressプラグインを確認します。

必要に応じて画像を遅延読み込み

場合によっては、画像のサイズよりも品質の方がはるかに重要になります。これは、写真を一流にしたい写真家にほとんど当てはまります。ファイルのサイズや品質を低下させるリスクはありません。それでも、それはあなたが最適化を忘れるべきだという意味ではありません。この場合、WordPressの画像を最適化するには、遅延読み込みを検討する必要があります。

遅延読み込みは、ユーザーが必要な場合にのみ画像を読み込む（スクロールして表示する）手法です。たとえば、1つの記事に20枚の高品質の写真をアップロードすると、サイトの速度が大幅に低下します。ただし、画像を遅延読み込みすると、記事は非常に高速になり、写真は必要な場合にのみ読み込まれます。つまり、ユーザーが画像にアクセスした瞬間です。

レスポンシブ画像を用意する

WordPressテーマの大部分はレスポンシブですが、それは必ずしも画像もレスポンシブであることを意味するわけではありません。大きな画像を小さな画面にロードしたくないので、サイトに追加の画像サイズを登録する必要があります。テーマがレスポンシブ画像を使用していない場合は、その仕事に専門家を雇うことを検討してください。思ったほど簡単ではありません。

ソーシャルメディア用に画像を最適化する

画像がソーシャルメディアで見栄えがすることを確認したい場合は、追加の手順を実行して、メタタグとスキーママークアップを最適化する必要があります。

YoastのようなSEOプラグインを使用している場合は、設定を確認することを忘れないでください。たとえば、Yoastではソーシャルメディアに関連するいくつかの設定を行うことができます。したがって、SEO-> Socialに移動し、Facebook、Twitter、Google +、Pinterestに情報を入力します。

さらに必要で、追加のソーシャルメディアWebサイト用に画像を最適化したい場合は、WPSSO –ソーシャル共有最適化およびSEOプラグインの正確なメタタグ+スキーママークアップを確認してください。

WordPressがJPEG画像を圧縮する方法を変更する

WordPress Webサイトに大量のJPEG画像をアップロードしている場合、元の品質が失われていることに気付いたかもしれません。 WordPressのせいなのか疑問に思っているなら、今あなたはあなたの答えを持っているでしょう–はい、そうです！

JPEG形式で画像をアップロードすると、 WordPressは自動的に圧縮を変更し、画像の品質を低下させるかどうかを決定します。具体的には、WPはJPGEで90％の圧縮を使用します。画像が投稿のサムネイルとして使用したり、投稿に表示したりするためだけにある場合は素晴らしいことですが、写真をアップロードする場合は、可能な限り最高の画像にしたいですよね？

幸い、これを変更するために必要なコードは1行だけです。

JPEG画像の圧縮を停止します。

JPEG画像を圧縮したくない場合は、次のコードをコピーしてfunctions.phpファイルに貼り付けてください。

 add_filter（ 'jpeg_quality'、function（$ arg）{return 100;}）;

変更を保存することを忘れないでください。そうすれば、新しい画像をアップロードする準備が整います。

一方、画像はそれほど大きな問題ではないかもしれません。したがって、それらをさらに圧縮して、サイトの読み込みにかかる時間を節約したい場合があります。そのコード行の最後の番号を変更すると、新しくアップロードされた画像の品質が変更されます。

JPEG画像をさらに圧縮します。

数値が小さいほど、より多くの画像が圧縮されます。たとえば、これらのJPEGをさらに圧縮するには、次のコードが必要になります。

 add_filter（ 'jpeg_quality'、function（$ arg）{return 80;}）;

忘れないでください。デフォルトの圧縮レベルは90です。

重要：これは、functions.phpにコードを貼り付けた後にアップロードする画像にのみ影響します。ライブラリに既にある画像のサイズと品質を変更するには、プラグインが必要です。

WordPress用の最も人気のある画像最適化プラグイン

この記事の冒頭で、WordPressの画像を最適化して、サイトを高速化し、SEOを改善する方法について説明しました。ご覧のとおり、使用できる方法はいくつかあります。画像をブログにアップロードする前でも、画像を管理することが重要です。ただし、すでにサイトに写真が掲載されている場合は、すべての画像を個別に再最適化してから、もう一度アップロードすることができなくなる可能性があります。

心配しないでください。そもそもあなたがそうすることを誰も期待していません。 WordPress用の最も人気のある画像最適化プラグインを紹介しますので、次の数分で私たちと一緒にいてください。

画像を最適化するには、リストからプラグインを選択するだけです。あなたはそれを設定し、プラグインがあなたのために行うことを選択する必要があります。その後、メディアファイルの整理を開始しながら、リラックスして選択したプラグインに作業を委任することができます。

次のプラグインは、お持ちのWordPressサイトの画像を圧縮するのに役立ちます。これらはサイトの読み込みを高速化し、最終的にSEOの改善に役立ちます。

WPSmushプラグイン

価格：無料

700,000以上のアクティブなインストールがあるため、WPSmushはWordPress用の最高の画像最適化プラグインの1つである必要があります。さまざまな圧縮技術を使用して、画像をすばやく最適化できます。 WP Smushを使用して画像を圧縮することの優れている点は、画像の品質が低下しないことです。私たちを信じていないのですか？プラグインをテストします。

WordPress用の写真の準備について話したとき、サイズ変更は最適化プロセスの重要な部分であると述べました。このプラグインを使用すると、WP Smushで最大寸法を設定できるため、心配する必要はありません。そうすると、ライブラリに追加する前に、すべての大きな画像が自動的に縮小されます。

この素晴らしいプラグインは、JPEG、GIF、およびPNGファイルで機能します。すべてのディレクトリで機能し、添付ファイルを自動的に処理し、マルチサイトでも機能します。各画像を手動で操作することも、50枚の画像をまとめて編集することもできます。さらに良い結果とより多くのオプションが必要な場合は、WP SmushPROをチェックしてください。

EWWW ImageOptimizerプラグイン

価格：無料

面白い名前の後ろに、WordPress用の最も人気のある画像最適化プラグインの1つがあります。前述のように、EWWW Image Optimizerは、品質に影響を与えることなく画像を圧縮できます。プラグインが数秒であなたのサイトをスピードアップできると考えるとき、あなたはすでにそれをダウンロードする途中にいるでしょう。これを行うと、画像を一括で最適化できるようになり、GRAND FlaGallery、NextCellent、NextGENなどのギャラリーにも独自の一括最適化ページが表示されます。

WordPressのWP_Image_Editorクラスを使用するすべての画像は自動的に最適化されますが、他のすべての画像は手動で操作できます。最適化するフォルダを選択できるのが気に入っています。これと、どのプラグインがクラスを使用するかについての詳細は、WordPressリポジトリの公式EWWW ImageOptimizerページを開いてください。

JPEG＆PNG画像プラグインを圧縮

価格：無料

WordPressのロゴを持っているかわいいパンダがこのプラグインについてもっと知りたくないのなら、私たちは何をするのかわかりません。パンダが見覚えがある場合は、TinyPNGWebサイトの画像を圧縮するのに役立つパンダと同じだからです。ええ、動物は私たちが当初考えていたよりも用途が広いようです。しかし、プラグインに焦点を当てましょう。

このプラグインを使用すると、Pandaが自動的に画像を最適化します。新しいプラグインをアップロードするたびに、プラグインが引き継ぎ、その仕事をします。それでも、メディアライブラリにアクセスするだけで、個々の画像を最適化することも、一括して行うこともできます。

Compress JPEG＆PNG画像は、アニメーション化されたPNGもサポートし、マルチサイトで完全に機能します。WooComerceと互換性があり、WP OffloadS3で問題は発生しません。

プラグインの優れている点は、すべての画像に最大の幅と高さの属性を設定できることです。メタデータがどのように機能するかを心配している場合でも、心配する必要はありません。パンダはすべての情報をそのまま保持します。

ファイルサイズの制限はなく、ダッシュボードウィジェットを設定でき、WordPressモバイルアプリでも機能します。そのすべてのために、Compress JPEG＆PNG画像には100,000以上のアクティブなインストールがあり、WordPress用の最高の画像最適化プラグインのリストに載るに値します。

Imsanityプラグイン

価格：無料

このプラグインのカバー画像はあなたを怖がらせるかもしれませんが、少し時間を取って、Imsanityのすべての機能を見てください。ああ、プラグインの名前でさえ非常識に聞こえますよね？プラグインの名前に問題がなければ、提供できるものがたくさんあることがわかります。

Imsanityは画像を自動的に拡大縮小し、最大サイズを設定できます。また、一括サイズ変更オプションも備えています。ブログに最適化が必要な写真がすでに何百枚もある場合、これは重要です。

この無料のプラグインは、プラグインの設定にあまり苦労したくない場合に最適なオプションです。必要なのは、Imsanityをインストールしてアクティブ化し、いくつかのオプションを設定することだけです。それを忘れることができます。画像の最適化に向けて独自の方法を管理します。

BMP画像をJPGに変換できるオプションが気に入りました。しばらく前に誤ってアップロードしたBMPファイルがたくさんある場合に備えて、これは命の恩人になります。

ShortPixel ImageOptimizerプラグイン

価格：無料

30,000以上のアクティブなインストールがあり、ShortPixelImageは依然としてWordPressの最も人気のある画像最適化プラグインの1つです。プラグインには機能が満載されており、最適化する画像がたくさんあるサイトには必須です。

ShortPixel Image Optimizerは、JPG、PNG、GIF、およびPDFドキュメントを最適化するだけでなく、JPEG、PNG、またはGIF画像をWebPに変換することもできます。プラグインは他のギャラリープラグインとうまく連携し、サイトがHTTPとHTTPSのどちらを使用しているかは関係ありません。それはあなたが画像からEXIFデータを削除することを可能にします（写真家が持っているのが好きなもの）。

プラグインは、すでに最適化されている画像を認識するため、必要に応じて画像をスキップします。この素晴らしいプラグインを使用すると、自動最適化を許可または禁止したり、さらに多くのことを実行したりできます。リポジトリの公式ページをチェックして、すべての機能を確認してください。

Optimus –WordPress画像オプティマイザー

価格：無料

前述のプラグインと同様に、OptimusはWordPress用に画像を最適化し、画像の品質に影響を与えることなくそれを行います。プラグインに自動的に処理させることも、オプションをオフにして必要な場合にのみ画像を最適化することもできます。

Optimusはマルチサイトで動作し、WordPressのeコマースサイトにとっては見知らぬ人ではなく、WordPressモバイルアプリとWindows LiveWriter用に完全に最適化されています。コード行に触れることなくサイトを高速化できます。プラグインはさらに多くの機能を提供しますが、プレミアムバージョンをオプトインする必要があります。詳細については、WordPressプラグインリポジトリの公式ページにアクセスしてください。

WordPressで動画や画像の遅延読み込みを追加する

ウェブサイトに多くのビデオや画像素材を追加し始めると、読み込みが遅くなることは明らかです。それらがどこから来たとしても、ビデオや大きな画像はあなたのサイトに大きな重みを与え、あなたの訪問者がすべてのコンテンツをロードするのに必要な時間よりもはるかに長く待たされるでしょう。 WordPressを使えば、それは大したことではないはずです。これが、状況を簡単に修正する方法です。

PHPの使い方を知っている場合は、画像の遅延読み込みの追加と、エレガントなテーマについて同僚が書いた無限スクロールについてのすばらしい記事があります。

そうでない場合は、次の数行で、サイトの読み込みを高速化する最も人気のある遅延読み込みプラグインのいくつかについて説明します。そして、あなたは多くのことをする必要さえありませんが、プラグインをインストールして、いくつかの簡単なステップでそれをセットアップする必要があります。

動画の遅延読み込み

価格：無料

YoutubeとVimeoのビデオがたくさんある場合は、このプラグインのインストールを検討する必要があります。設定すると、プラグインが動画に画像を配置するため、ウェブサイトの読み込みがはるかに速くなります。訪問者がビデオにスクロールすると、この画像に「再生」ボタンが表示されます。クリックすると、ビデオの読み込みと再生が開始されます。簡単なデモは開発者のサイトで見ることができます。

WP YouTube Lyte

価格：無料

このプラグインは、すばやく簡単な方法でその仕事をします。インストール後、Youtubeビデオへのリンクを追加するか、ショートコードを使用して追加します。通常のビデオ、プレイリスト、または選択したビデオからのオーディオのみを追加するかを選択できます。その後、Youtubeビデオに画像が表示され、遅延読み込みが可能になります。画像をクリックするだけで、ビデオまたはオーディオを開始できます。
開発者のサイトでデモを参照してください。

a3遅延ロード

価格：無料

これはあなたのモバイルサイト専用です。モバイルデバイスで訪問者に表示したい画像やビデオがたくさんある場合は、a3 LazyLoadを確認する必要があります。画像や動画に遅延読み込みを追加できます。プラグインでは、ユーザーが読み込み中のコンテンツをスクロールしているときに表示される遷移効果を選択することもできます。

管理領域では、遅延読み込みするコンテンツを簡単にオンまたはオフにできます。オンになっている場合、コンテンツは、訪問者がコンテンツのその部分にスクロールしたときにのみロードされます。
1000枚の画像を備えた見事に表示されたデモがあります-それぞれはスクロールするとロードされるだけです。このプラグインの遅延読み込みビデオとしても、上のリンクをクリックすると表示されるビデオデモがあります。

BJレイジーロード

価格：無料

ビデオのサポートが不要で、画像の遅延読み込みのみが必要な場合は、このWPプラグインを確認する必要があります。インストールして設定すると、画像、サムネイル、Gravatar画像、さらにはiframeがプレースホルダーに置き換えられます。前述のプラグインと同様に、ユーザーがアクセスしたときにのみコンテンツが読み込まれます。

遅延読み込みする画像でも動画でも、上記のプラグインの1つがすぐに役立ちます。それらはすべて無料なので、プラグインの少なくとも1つを試さず、肩の重さがどれだけかかるかを確認する言い訳はありません。もちろん、同じ機能を持つプラグインは他にもたくさんあり、それらすべてを自由に閲覧して試すことができます。

前後の画像を魅力的に表示する

すでに多くの前/後の画像の例を見たことがあると思います。あなたのことはわかりませんが、「前後」という言葉を見て最初に頭に浮かぶのは、トレーニングプログラムの前後に体を見せてくれるフィットネストレーニングプログラムです。

あなたがそれについて考えるならば、ほとんどのウェブサイトは違いを紹介するために単純なアプローチを使用します–彼らは両方の画像を取り、それらを隣り合わせに、あるいは上下に配置します。同じ結果が必要な場合は、その方法をすでに知っているため、この記事を読むことはありません。

問題の前後にこれを解決するための視覚的に素晴らしい方法があり、それがあなたの手の届くところにあると私たちがあなたに言ったらどうしますか？さて、最終結果は本当に、本当にクールなので、セットアップ後、開発者を称賛します。

トゥエンティトゥエンティ

価格：無料

Twenty Twentyは、WordPressプラグインリポジトリから無料でダウンロードできるこの素晴らしいプラグインの名前です。

プラグインを使用すると、一方の画像をもう一方の画像の上に配置し、スライダーで遊んで、画像を表示/非表示にすることができます。デモをご覧ください。私たちが話していることがわかります。

さて、この小さなプラグインに夢中になったら、この素晴らしい効果を作成する方法を見てみましょう。デモ効果を再現するのは比較的簡単ですが、基本的なHTMLの使い方を知っておく必要があります。さあ行こう：

新しい投稿を作成するか、既存の投稿を開きます
投稿に2つの画像を挿入します。ビジュアルエディターで作業している場合は、画像が上下に表示されます。テキストエディタで作業している場合は、次のようなコードが表示されます。

 <a href="image1.jpg"> <img src =
"http://www.loactionoftheimage.com" width = "700" 
height = "200" /> </a>

<a href="image2.jpg"> <img src =
"http://www.loactionoftheimage.com" width = "700" 
height = "200" /> </a>

最初の画像の前に[twentytwenty]タグを入力します
2番目のタグの後に[/ twentytwenty]タグを入力します

テキストエディタで次のような結果になるはずです。

[二十二十]
<a href=”image1.jpg”> <img src =” http://www.loactionoftheimage.com/image1.jpg” width =” 700” height =” 200” /> </a>

<a href=”image2.jpg”> <img src =” http://www.loactionoftheimage.com/image2.jpg” width =” 700” height =” 200” /> </a>
[/ 20twenty]

最良の結果を得るには、写真が同じサイズであることを確認してください
投稿をプレビューまたは公開して、見事な前後の写真をお楽しみください

インタラクティブな画像を作成する方法–描画、説明、リンクの追加

今日、マルチメディアなしでウェブサイトを運営することは困難です。画像、ビデオ、音楽は、事実上すべてのWebサイトの一部です。平均的なインターネットユーザーは視覚刺激に大きく依存しているため、サイトの視覚的部分とインタラクティブな部分に注意を払う必要があります。画像のある記事は、画像のない記事よりも94％多く表示されます。また、ウェブサイト上のマルチメディアがコンテンツマーケティングのROIを高めることができることはすでに知られている事実です。

あなたのサイトの画像の世話をするようにあなたを説得する必要がないことを願っています。記事で画像を使わなくても（そうすべきです）、注目の画像を使っていますよね？ WordPressサイトの画像を管理したり、写真関連のテーマを設定したり、InstagramをWordPressサイトに接続したりするのに役立つ、非常に多くのギャラリープラグインがあります。しかし、もっとインタラクティブなコンテンツを作成したい場合はどうでしょうか。

手始めに、ユーザーが気に入る前後の画像効果を追加することに興味があるかもしれません。 AutomatticがWordPress.comにVRを導入した後、人気が高まっているWordPressのバーチャルリアリティを忘れないでください。それでも、何か足りないものがあります。クリック可能なパーツでインタラクティブな画像を作成することは可能ですか？はい、それは可能です。これから、それがいかに楽しく簡単かをお見せします。

注意を引く

価格：無料

あなたが好きになるこのプラグインについての最初のことはそれが完全に無料であるということです！ WordPressリポジトリの他のプラグインと同様に、数分でダウンロード、インストール、アクティブ化できます。無料版では、1つのインタラクティブな画像を操作できます。さらに必要な場合は、PROバージョンをオプトインする必要がありますが、これについては後で説明します。

プラグインは応答性が高く、インタラクティブな画像がどのデバイスでも正しく表示されることを心配する必要はありません。画像が画面サイズに応じて拡大縮小されるだけでなく、ほとんどの最新および古いブラウザ（デスクトップおよびモバイル）で機能します。 Draw Attentionは、新しいブラウザに表示されるときにキャンバス要素を使用しますが、古いブラウザにロードすると画像マップにフォールバックします。

特徴

この単純なプラグインがどれほど強力であるかを示す例に入る前に、DrawAttentionから何が期待できるかを見てみましょう。

描画–画像をアップロードすると、その上に図形を描画する機会が得られます。選択可能/クリック可能になる画像の任意の部分を選択します
色–ホットスポットをサイトのデザインに合わせることができるように色をカスタマイズします
ホバー時にハイライト–ユーザーが選択した部分にカーソルを合わせると、画像の別の部分が表示されます
詳細情報を表示–画像の選択した部分に関する詳細情報を表示します
URLに移動–ユーザーが選択範囲をクリックした場合、ユーザーを任意のURLにリダイレクトします

例–ハワイのインタラクティブマップ

デモサイトの例を使用して、DrawAttentionで何ができるかを正確に示します。それでは、プラグインを使用して作成したときにハワイのインタラクティブマップがどのように見えるかを見てみましょう。

あなたがしなければならない最初のことはハワイ諸島のイメージを見つけることです。 [注意を引く]-> [画像の編集]に移動したら、右側のサイドバーの領域に画像をアップロードする必要があります。画像が読み込まれると、楽しみが始まります。

ここでは、ハイライトの色（色、境界線、不透明度など）を選択し、「詳細情報ボックス」のスタイルを設定します（画像、タイトル、テキストの色など）。画像のすべての色を手動で選択したくない場合は、右側のサイドバーから配色をすばやく選択できます。

最も魔法の部分は、ホットスポットエリアの設定画面で発生します。ここでは、画像がフルサイズで読み込まれます。今やらなければならないのは、描画を開始して新しいホットスポットを作成することだけです。必要な数のポイントを追加できます。つまり、必要に応じて包括的な選択を作成できます。ホットスポットはいくつでも作成でき、それぞれに独自の設定を設定できます。

したがって、この例では、島の1つを選択する必要があります。島のタイトルを選択し、説明と、ユーザーがホットスポットにカーソルを合わせたときに表示される追加の画像（上記のGIF画像の右側）を追加します。

インタラクティブにしたい島ごとに、このプロセスを繰り返す必要があります。ホットスポットの準備ができたら、右側からショートコードをコピーするだけです。ショートコードを投稿、ページ、ウィジェット、または新しいインタラクティブマップを表示したい場所に貼り付ければ、完了です。ユーザーが選択項目をクリックした後で他のページにリダイレクトする場合は、説明ではなくURLを選択するだけです。そのように簡単です！

PROバージョン

無料版は画像が1つだけ必要な場合に最適ですが、PRO版では、サイトに必要な数のインタラクティブな画像を配置できます。これは考慮すべき最も重要なことですが、PROバージョンでは複数の画像よりも多くの画像を取得できます。

レイアウトオプション機能を使用すると、画像の選択した部分に関する詳細情報を表示できます。たとえば、ライトボックスまたはシンプルなツールバーに情報を表示できます。このツールバーは、ユーザーが画像の選択した部分にカーソルを合わせるとポップアップ表示されます。

また、20個の事前定義されたカラーパレットがあるため、すべての色を手動でカスタマイズする必要はありません。 PROバージョンは単一サイトライセンスで74ドルかかりますが、複数のインタラクティブイメージが必要な場合は、これは簡単です。

追加の画像サイズを再生成する方法

WordPressテーマに新しい画像サイズを登録するのは比較的簡単です。画像の大きさをシステムに伝え、名前を付け、切り抜き方法を決定したら、画像を好きな場所に自由に配布できます。しかし、古い画像はどうですか？

私たちが示したテクニックの1つを使用した場合は、新しい画像用に芝生を準備したことになります。投稿のサムネイルに新しく登録した画像サイズを使用する場合でも、作成者が投稿でそれらを使用できるようにする場合でも、functions.phpファイルに変更を加えた後にアップロードされた画像にのみ新しいルールが適用されます。古い画像を変更するには、サムネイルの再生成プラグインを使用することをお勧めします。

サムネイルの再生成：

価格：無料

プラグイン->新規追加に移動します
「サムネイルの再生成」を検索します
プラグインをインストールしてアクティブ化します
[ツール]-> [再生]サムネイルに移動します

すべての画像のサイズを変更する場合は、[すべてのサムネイルを再生成]ボタンをクリックして、プラグインがハードワークを実行するのを待ちます。

サイズ変更される画像を表示する場合、または一部の画像のみのサイズを変更する場合は、メディアライブラリに移動し、[一括操作]の下に新しいオプションがあり、各画像の横に1つあります。ギャラリー。

プラグインの良いところは、元の画像を削除しないことです。テーマで使用できる新しい画像サイズのみが作成されますが、元の画像サイズは後で使用するか、不要と判断した場合は手動で削除するために残されます。

それでおしまい。新しいサムネイルを楽しんだり、同じことができるSimple ImageSizesプラグインをチェックしてください。

jQueryで幅と高さの画像属性を削除する

WordPressの投稿に画像を追加すると、システムは自動的にその高さと幅の属性を画像に追加します。 That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

Open header.php file from your theme folder
Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</ script>
<スクリプト>
jQuery.noConflict（）;
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
}）;
}）;
</ script>

変更内容を保存

そして、あなたは完了です！ The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

Functions.phpファイルを開きます
Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

変更内容を保存
Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

関数.phpを開きます
次のコードをコピーして貼り付けます。

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

Change default variables in the array
変更内容を保存

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

例：

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

結論

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.