Markdown with HiDPI/Retina images

Question

Markdownから生成されたHTMLを使用してイメージをHiDPIディスプレイに表示するには、イメージが高解像度で表示されます。通常、srcset属性の<img>タグを作成するか、各画像にwidthとheightを適切に設定するか、メディアクエリを使用します。ただし、Markdown画像の結果では、alt属性のみが許可されます。特に、私はmarkedライブラリを使用しています（私はこれを制御できません）。

私はCSSを完全に制御できます。 CSSでは、少なくとも物理的なピクセルの幅よりも幅の広い論理ピクセルの1/3のすべてのイメージを作成する方法がありますか？そうすれば、Markdownで参照されるすべての画像を3xにする必要があります。これはこれほど簡単ですか？

img { 
    width: 33.33%; 
} 

はるかに良いが、デバイスのdevicePixelRatioに応じて、異なる画像をダウンロードし、ブラウザを持っているいくつかの方法だろう。

HTMLの使用はオプションではありません。マークされたものはsanitizeフラグとともに使用され、HTMLをエスケープします。私は、CSSソリューションや他の巧妙なメカニズムがあることを期待しています。

Answer 1

デバイスの幅とデバイスのピクセル比率を考慮することができます。だから私たちはこの問題に取り組むことができます。

/* Large Monitors devices (large desktops, 1920px and up)*/ 
@media only screen and (max-width: 1920px) { 

    .logo { 
    width: 160px; 
    height: 109px; 
    background-image: url("/img/1920px/logo/logo-1x.png"); 
    } 

    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and ( min--moz-device-pixel-ratio: 2), 
    only screen and ( -o-min-device-pixel-ratio: 2/1), 
    only screen and (  min-device-pixel-ratio: 2), 
    only screen and (    min-resolution: 192dpi), 
    only screen and (    min-resolution: 2dppx) { 

    .logo { 
     width: 160px; 
     height: 109px; 
     background-image: url("/img/1920px/logo/logo-2x.png"); 
    } 

    } 

} 

/* Extra large devic 
es (large desktops, 1280px and up)*/ 
@media only screen and (max-width: 1280px) { 

    .logo { 
    width: 120px; 
    height: 82px; 
    background-image: url("/img/1280px/logo/logo-1x.png"); 
    } 

    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and ( min--moz-device-pixel-ratio: 2), 
    only screen and ( -o-min-device-pixel-ratio: 2/1), 
    only screen and (  min-device-pixel-ratio: 2), 
    only screen and (    min-resolution: 192dpi), 
    only screen and (    min-resolution: 2dppx) { 

    .logo{ 
     width: 160px; 
     height: 109px; 
     background-image: url("/img/1280px/logo/logo-2x.png"); 
    } 

    } 
} 

/* Large devices (desktops, 960px and up)*/ 
@media only screen and (max-width: 960px) { 

    .logo{ 
    width: 100px; 
    height: 68px; 
    background-image: url("/img/960px/logo/logo-1x.png"); 
    } 

    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and ( min--moz-device-pixel-ratio: 2), 
    only screen and ( -o-min-device-pixel-ratio: 2/1), 
    only screen and (  min-device-pixel-ratio: 2), 
    only screen and (    min-resolution: 192dpi), 
    only screen and (    min-resolution: 2dppx) { 

    .logo{ 
     width: 160px; 
     height: 109px; 
     background-image: url("/img/960px/logo/logo-2x.png"); 
    } 

    } 

} 

/* Medium devices (tablets, 640px and up)*/ 
@media only screen and (max-width: 640px) { 

    .logo{ 
    width: 78px; 
    height: 42px; 
    background-image: url("/img/640px/logo/logo-1x.png"); 
    } 

    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and ( min--moz-device-pixel-ratio: 2), 
    only screen and ( -o-min-device-pixel-ratio: 2/1), 
    only screen and (  min-device-pixel-ratio: 2), 
    only screen and (    min-resolution: 192dpi), 
    only screen and (    min-resolution: 2dppx) { 

    .logo{ 
     width: 160px; 
     height: 109px; 
     background-image: url("/img/640px/logo/logo-2x.png"); 
    } 

    } 
} 


/* Small devices (landscape phones, 320px and up)*/ 
@media only screen and (max-width: 320px) { 

    .logo{ 
    width: 78px; 
    height: 42px; 
    background-image: url("/img/320px/logo/logo-1x.png"); 
    } 

    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and ( min--moz-device-pixel-ratio: 2), 
    only screen and ( -o-min-device-pixel-ratio: 2/1), 
    only screen and (  min-device-pixel-ratio: 2), 
    only screen and (    min-resolution: 192dpi), 
    only screen and (    min-resolution: 2dppx) { 

    .logo{ 
     width: 160px; 
     height: 109px; 
     background-image: url("/img/320px/logo/logo-2x.png"); 
    } 

    } 
} 

Answer 2

これを達成するには、単純に生のHTMLを使用します。 rules状態（太字）：

Markdownは、HTMLの代わりに、またはそれに近いものではありません。その構文は非常に小さく、HTMLタグのごく一部にしか対応していません。この考え方は、HTMLタグを挿入しやすくする構文を作成することではありません。私の意見では、HTMLタグはすでに簡単に挿入できます。 Markdownの考えは、散文の読み書き、編集を容易にすることです。 HTMLは形式を公開しています。マークダウンは、の書式です。したがって、Markdownのフォーマット構文は、プレーンテキストで伝えることができる問題のみを解決します。

Markdownの構文でカバーされていないマークアップについては、HTML自体を使用するだけです。 MarkdownからHTMLに切り替えることを示すために、その前に置く必要はありません。タグを使用するだけです。

ので、ちょうどあなたがHTMLの場合と同じようsrcsetの属性および/またはwidthとheightで<img>タグを使用します。 Markdownはそれらをそのまま通過させます。

Answer 3

Markdownから出てくるHiDPIイメージで作業する方法の1つは、title属性を利用しています。イメージタイトルは意味的に意味があり、attribute selectorsを使用して効果的にイメージのサイズを設定するためにCSSに情報を提供します。

例として、私はこのような値引き画像を作成することができるが：

![](http://images.ucode.com/logo_1200.png "Important example") 

それからdevicePixelRatio有するデバイスにとっては非常に鮮明な作り、400ピクセルまで1200pxの幅を設定する属性セレクタを使用することができ3：すべての重要な例は論理幅400個のピクセルのを持っていると言う

img[title~="important" i][title~="example" i] { 
    width: 400px; 
} 

。 1200ピクセルイメージを送ると、標準のDPIデバイスのイメージダウンロードは遅くなりますが、そうでなければ問題ありません。

理想的には、異なるdevicePixelRatioの複数の画像をフィードできるという解決策があります。しかし、これは少なくとも今は十分です。