print.cssが原因じゃなかった！Chrome印刷で画像を表示させる方法

この記事はで読むことができます。

当ブログでは商品・サービスのリンク先にプロモーションを含みます。

こんな悩みを解決できます

Chromeで印刷すると初回だけウォーターマークが消える

サイトの印刷レイアウトが意図通りに表示されない

print.cssが効かない原因がわからず困っている

読者さん

サイトを印刷しようとすると、1回目だけウォーターマークが消えるんです…。

ロベルト

その現象、よくある問題です。原因は画像の読み込みタイミングかもしれません。

Google Chromeで印刷プレビューを開いた際、「なぜか1回目だけウォーターマーク（透かしロゴ）が表示されず、2回目以降は表示される」という不思議な現象に遭遇したことはありませんか？

実はこの問題、CSSのバグやChromeの不具合ではなく、「ブラウザの処理速度」と「画像の読み込み速度」の競争によって引き起こされる、典型的なタイミングの問題なんです。

この記事では、その原因を紐解き、サイト開発者向けの恒久的な対策と、一般ユーザー向けの簡単な対処法の両方をわかりやすく解説します。

この記事でわかること

印刷時にウォーターマークが消える現象の根本原因
サイト開発者向けの恒久的な解決策2つ
一般ユーザー向けの簡単な対処法2つ

なぜ？Chrome印刷で初回だけウォーターマークが消える主な原因
【サイト開発者向け】ウォーターマークを必ず表示させる恒久対策
1. 対策1：ウォーターマーク画像をプリロードする（推奨）
2. 対策2：画像をCSSに直接埋め込む（Base64エンコーディング）
【一般ユーザー向け】今すぐできる！ウォーターマークを表示させる応急処置
まとめ：印刷時の画像表示問題は「読み込みタイミング」を意識しよう

なぜ？Chrome印刷で初回だけウォーターマークが消える主な原因

読者さん

てっきり印刷用のCSS（print.css）が読み込まれていないのかと思ってました。

ロベルト

惜しいです！CSSは読み込まれています。問題は、CSSが指定する「背景画像」の読み込みが間に合っていないことなんです。

現象のより正確な原因は、「print.cssで指定された背景画像の読み込みが、プレビュー生成に間に合わない」という点にあります。

1回目と2回目で挙動が変わる流れを、ステップで見てみましょう。

1回目の印刷プレビュー

ページを読み込んで初めて印刷プレビューを開くと、ブラウザは印刷用CSSを解釈し、指定されたウォーターマーク画像（例: logo-water.png）をダウンロードしようとします。しかし、画像のダウンロードが完了するより先にプレビュー画面の表示処理が終わってしまい、結果としてウォーターマークが表示されないままになります。

2回目以降の印刷プレビュー

1回目の処理で、ブラウザはウォーターマーク画像をダウンロードし、キャッシュ（一時保存データ）に保存します。そのため、2回目以降にプレビューを開くと、画像はネットワークを経由せず高速なキャッシュから即座に読み込まれます。これにより、プレビューの表示に余裕で間に合うため、ウォーターマークが正しく表示されるのです。

【サイト開発者向け】ウォーターマークを必ず表示させる恒久対策

もしあなたがこのウェブサイトの管理者または開発者であれば、利用者が毎回確実にウォーターマークを印刷できるように、根本的な対策を施すことが可能です。

読者さん

開発者じゃないと根本的には直せないんですね…。

ロベルト

ご安心ください。この後、一般の方向けの簡単な対処法も解説します。まずは開発者向けの解決策から見ていきましょう。

対策1：ウォーターマーク画像をプリロードする（推奨）

最も推奨される方法は、HTMLのタグ内に特定の記述を追加して、ウォーターマーク画像を優先的に読み込ませることです。

これにより、ブラウザはページ読み込みの早い段階で画像をダウンロードするため、印刷プレビューを開く頃には画像がキャッシュされている状態になり、読み込み遅延の問題を解決できます。


    
    
    
    <link rel="preload" href="images/ここに先に読み込ませる画像.png" as="image">

対策2：画像をCSSに直接埋め込む（Base64エンコーディング）

もう一つの方法は、画像を外部ファイルとして読み込む代わりに、テキストデータ（Base64形式）に変換してprint.cssに直接埋め込む方法です。

これにより、画像のダウンロードというステップ自体が不要になるため、読み込み遅延は絶対に発生しません。

現在のprint.css

body::before {
    /* ... */
    background-image: url("../images/logo-water.png");
    /* ... */
}

変更後のprint.css (Base64)

body::before {
    /* ... */
    /* 下記はダミーデータです。実際の画像から生成した文字列に置き換えてください */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...（ここに非常に長い文字列が入ります）...");
    /* ... */
}

ここに注意