画像と写真 · Social Image Resizer
サイズを変更するとソーシャル画像内の小さな文字が読めなくなる理由
· なぜそれが重要なのか
画質 タイポグラフィー アクセシビリティ
デザイン キャンバス上では読みやすいテキストでも、画像が携帯電話サイズのフィードに縮小されて圧縮されると、判読できなくなる場合があります。この投稿では、可読性の背後にあるピクセル演算と、投稿前にそれをテストする方法について説明します。
誰も読めなかったインフォグラフィック — 電話画面上の緻密なデザインの具体的な失敗
インフォグラフィックは、広いデザイン キャンバスでは完全に読み取れる場合がありますが、携帯電話サイズのソーシャル イメージとして配信すると失敗することがあります。単語は変わりませんでしたが、各文字を説明するために使用できる出力ピクセル数は変わりました。高密度のサポートコピーは、視聴者がそれを読む前にテクスチャになります。
元のレイアウトだけでなく、エクスポートされたファイルをテストします。 Social Image Resizer は、ターゲットのプリセット寸法でレンダリングし、結果の Blob をダウンロード用に提供します。この導関数には、ブラウザーによって行われた実際のサンプリングとローカル エンコーディングの決定が含まれているため、可読性のレビューに適した成果物となります。
テキストもピクセルです — ダウンスケールによって文字の高さがどのように縮小されるのか、そしてなぜピクセルより細いストロークがぼやけたり消えたりするのか
画像内のテキストはセマンティック タイプではなくなりました。色付きのピクセルです。アートワーク全体を縮小すると、文字の高さとストロークの幅も他のものと一緒に縮小します。複数のソース ピクセルにまたがるストロークは出力ピクセルの一部のみに寄与するため、リサンプラーはそれを背景とブレンドする必要があります。
高コントラストのエッジは損失を明らかにしますが、カウンターが閉じたり、隣接するストロークがマージしたりした後は、コントラストだけでは構造を救うことはできません。キャンバスのスムージングは、ギザギザのエイリアスを避けることを目的としているため、小さなレタリングは鮮明に壊れるのではなく柔らかくなる場合があります。効果はスケール、フォント、太さ、コントラスト、ブラウザの実装によって異なります。
非可逆ローカル エンコーディングにより、細部がぼやける可能性があります。宛先圧縮はこの証拠の範囲外です
JPEG および WebP エクスポートはこのツールでは損失が多く、その品質引数が画像の細部に影響を与える可能性があります。 PNG は、損失の多い出力段階を回避しますが、ダウンスケーリング中にすでにブレンドされた情報は復元しません。レタリングに PNG を選択すると、基本的なピクセル バジェットを変更せずに、変数を 1 つ削除できます。
ワークブックは、ソーシャル プラットフォームによるもう 1 つの仕上げステップを示しています。 ToolAcre は宛先エンコーダーをテストしないため、この記事はすべてのサービスがテキストを一方向で圧縮することを保証するものではありません。承認されたローカル エクスポートと実際の宛先プレビューを比較して、アップロード前に何が起こったか、その後に観察された内容を区別します。
ディスプレイ サイズでデザインします — キャンバス サイズではなく、実際に表示されるピクセルの高さでタイプをチェックします
デザイン レビューには、人々が実際に画像に遭遇するピクセル寸法とスケールを含める必要があります。ダウンロードしたファイルは、単語が読めるようになるまでズームするのではなく、関連する携帯電話で通常のプレゼンテーション サイズで開きます。大きなモニターでプレビューすると、アートワークにより多くの物理的スペースが与えられるため、失敗を隠すことができます。
1 対 1 のピクセル検査は、視聴者のエクスペリエンスとしてではなく、診断として保持してください。境界があいまいであることが明らかになる可能性がありますが、受け入れられるかどうかは、メッセージが文脈に沿って努力せずに読めるかどうかです。デバイス、レイアウト、クリエイティブな選択によって結果が変わるため、普遍的な文字サイズのカットオフは規定されていません。
単語を減らし、文字を大きくします — 詳細をキャプションまたはリンクされたページに移動し、見出しの画像はそのままにします
テキストが失敗した場合は、別のエクスポート品質を試す前に単語数を減らしてください。 1 つの見出しを宣伝し、修飾子を削除し、詳細を投稿のキャプションまたはリンクされたページに移動します。行数が少なく、文字が大きくなると、各文字のピクセル数が増加し、文書を模倣するのではなく、画像が視覚的な役割を果たすことができます。
また、文言と競合する細いルール、小さなアイコン、装飾パターンも簡素化します。これらは同じ有限の出力グリッドを消費します。グラフィックに詳細な指示を含める必要がある場合は、単一のラスター ソーシャル イメージに依存するのではなく、読みやすいように設計されたアクセシブルなページまたはドキュメントを提供します。
実用的な例: 普遍的な存続ポイント サイズを要求せずに、最終サイズでテキストを比較する
見出し、小見出し、密なフッターを含む 16:9 アナウンスを準備します。現在の 1920×1080 ツール プリセットでエクスポートし、携帯電話で出力先の通常の表示スケールで表示します。どの階層がすぐに読み取られ、どの階層がズームまたは推論を必要とするかに注意してください。
単語数を減らし、ストロークを大きくした改訂版を作成し、同じパスを介してエクスポートします。この比較は、考え出された最小ピクセル高さによってではなく、読者によって判断されるべきです。将来のリビジョンで合格した条件を再現できるように、ターゲットの寸法、形式、品質を記録します。
これでカバーされないもの — スクリーンリーダーのアクセシビリティ。画像内のテキストには、そのサイズに関係なく代替テキストが必要です。これは投稿ステップであり、サイズ変更ではありません。
読み取り可能なピクセルでは、スクリーン リーダーが画像テキストにアクセスできるようになりません。代替テキスト、キャプション、および宛先固有のアクセシビリティ フィールドは、公開ステップの一部として残ります。 Social Image Resizer は画像ピクセルに作用し、それらの意味論的な記述を作成しません。
長くて重要な命令を画像内にのみ配置することは避けてください。支援技術や翻訳ツールを使用している人には、大きな文字であってもアクセスできない場合があります。クロッパーは鮮明なグラフィックを生成するのに役立ちますが、アクセシビリティにはビットマップ以外の同等の情報と、それを保存する投稿ワークフローが必要です。
要点: 最終サイズでの読みやすさをテストする — Social Image Resizer を使用すると、サイズ変更されたファイルが提供されるため、投稿する前に携帯電話で確認できます。
最終サイズでの判読性をテストし、失敗をエンコーダの問題として扱う前に、コンテンツ デザインの問題として扱います。より簡潔な文言、より強力な階層、およびより大きなストロークは、理解する必要がある部分に限られたピクセル グリッドを割り当てるため、通常、より堅牢なアーティファクトを作成します。
ToolAcre は、そのレビューに必要な正確な出力を提供します。エクスポートし、関連するデバイスでファイルを開き、宛先のプレビューを比較してマスターから修正します。エディターで拡大した場合にのみ機能するデザインは、本来の小さな画面に対応する準備ができていません。