以前、某採用サイトのソースをぼけーっと眺めていた際に text-indent: 100%; とあり、なにコレ？となったのがキッカケで知ったのですが、H1タグへ表示しているサイトロゴとか、テキストを表示させずに画像のみを表示させたい場合、以下の方法でSEO対策のチェック（PageSpeed Insights）などのペナルティを回避できるようです。

CSS

* {
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}

サンプル

HTML

<div class="a-img">アサオカのサイト</div>

CSS

.a-img {
    display: block;
    width: 10rem;
    height: 10rem;
    margin: 0 auto;
    background: #fff url('https://asaoka.site/*****/logo/a-no-logo@gray.png') no-repeat 50% 50%/contain;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}

出力結果

アサオカのサイト

解説（？）

white-space: nowrap; でテキスト（文字列）を折り返させないよう指定し、text-indent: 100%; でテキストをコンテンツ幅分（100%）ずらして、overflow: hidden; で、はみ出した要素（ずらしたテキスト）を非表示にするといった感じ。

参考

text-indent – CSS: カスケーディングスタイルシート | MDN