वेब साइटों के लिए स्वचालित रेटिना छवियां

104

रेटिना डिस्प्ले के साथ नए ऐप्पल मैकबुक प्रो के साथ, यदि आप अपनी वेबसाइट पर "मानक" छवि प्रदान करते हैं, तो यह थोड़ा फजी होगा। इसलिए आपको एक रेटिना छवि प्रदान करनी होगी।

क्या स्वचालित रूप से @2xछवियों पर स्विच करने का एक तरीका है , जैसे आईओएस (ऑब्जेक्टिव-सी के साथ) करता है? मैंने जो पाया है वह है: मोबाइल और रेटिना डिस्प्ले पर उच्च-रिज़ॉल्यूशन छवियों के लिए सीएसएस , लेकिन मैं चाहता हूं कि मुझे सीएसएस या जावास्क्रिप्ट के बिना , मेरी सभी छवियों के लिए एक स्वचालित प्रक्रिया मिल सके ।

क्या यह संभव है?

अद्यतन
मैं @Paul डी। वेइट द्वारा सुझाए गए इस दिलचस्प लेख और सेबस्टियन द्वारा जुड़े एक दिलचस्प चर्चा पर जोर दूंगा ।

html image retina-display

— jan267
स्रोत

6

retinajs.com

— Stephan Bönnemann-Walenta

3

आप इसे PHP के साथ सर्वर साइड में कर सकते हैं: retina-images.complexcompulsions.com

— ReLeaf

2

@ michaelward82: फोटोग्राफिक छवियों के लिए, डैन जॉबिसिस सुझाव देता है कि आप छवि पर लागू किए गए JPG संपीड़न की मात्रा बढ़ाकर, बिना आपकी फ़ाइल आकार के बिना सभी को रेटिना-आकार की छवियां दे सकते हैं । तथ्य यह है कि छवि को या तो स्केल-डाउन प्रदर्शित किया जाता है या एक रेटिना डिस्प्ले पर अक्सर इसका मतलब है कि संपीड़न कलाकृतियों दिखाई नहीं दे रहे हैं।

— पॉल डी। वेट

1

वास्तव में यह गलत नहीं है , लेकिन मैं सोच रहा था कि क्या उपयोग करने के लिए कुछ चाल है। आईओएस में यह स्वचालित है ... इसलिए मैं इसे पूछ रहा हूं! :)

— Jan267

2

ध्यान दें कि "दिलचस्प लेख सुझाया गया" के लेखक ने कुछ बड़ी गलतियाँ की हैं जो यहाँ वर्णित हैं: silev.org/test/Retina-resize.html - इसलिए लेख को नमक के एक बड़े दाने के साथ लिया जाना है।

— सेबेस्टियन

147

Img टैग के लिए एक नई विशेषता है जो आपको एक रेटिना src विशेषता, अर्थात् srcset जोड़ने की अनुमति देता है। कोई जावास्क्रिप्ट या सीएसएस की जरूरत नहीं, छवियों का कोई दोहरा लोडिंग।

<img src="low-res.jpg" srcset="high-res.jpg 2x">

ब्राउज़र समर्थन: http://caniuse.com/#search=srcset

अन्य संसाधन:

WebKit रिलीज पोस्ट
Srcset के लिए W3C प्रलेखन
srcset का उपयोग क्यों और कैसे करें, इसके बारे में अच्छी व्याख्या
अधिक अच्छी जानकारी के लिए क्रिस Coyer की पोस्ट

— ebuat3989
स्रोत

— malhal

7

यह अभी वेबकिट नहीं है, एज एंड फायरफॉक्स भी इसका समर्थन करता है। caniuse.com/#search=srcset - इसलिए वर्तमान में विश्वभर में 64% उपयोगकर्ता हैं। फिर ध्यान रखें कि बहुत कम हाय-डीपीआई उपयोगकर्ता असमर्थित ब्राउज़र (आईई और पुराने एंड्रॉइड) पर होंगे, और अंतिम रूप से यह विफल-सुरक्षित है - बिना समर्थन वाले उपयोगकर्ता केवल एक सामान्य डीपीआई छवि देखते हैं। निश्चित रूप से लगता है कि यह उपयोग के लिए तैयार है।

— andrewb

1

इसके अलावा, कोई भी दोहरी लोडिंग एक बड़ा वरदान नहीं है। इसका मतलब है कि आप कभी भी किसी की बैंडविड्थ बर्बाद नहीं करेंगे।

— andbb

IE एक बार फिर से कम हो रही है। लेकिन इसके बावजूद, मैं @andrewb से सहमत हूं। उसकी टिप्पणी पर निर्माण करने के लिए, मैं x2 प्रदान कर रहा हूं srcताकि IE / ओपेरा हमेशा उच्च DPI संस्करण का अनुरोध करेगा।

— रिकी बॉयस

1

यह स्वीकृत उत्तर होना चाहिए। यह इस धागे के लिए अब तक का सबसे आसान उपाय है।

— जुलिएन ले कूपेन

14

अलग-अलग समाधान हैं, प्रत्येक अपने स्वयं के पेशेवरों और विपक्षों के साथ। आपके लिए कौन सा सबसे अच्छा है विभिन्न कारकों पर निर्भर करता है, जैसे कि आपकी वेबसाइट कैसे डिज़ाइन की गई है, आपके विशिष्ट आगंतुक किस तरह की तकनीक का उपयोग कर रहे हैं आदि। ध्यान दें कि रेटिना डिस्प्ले मैकबुक प्रो रेटिना और आने वाले आईमैक तक सीमित नहीं हैं, बल्कि इसमें शामिल हैं मोबाइल डिवाइस, जिनकी अपनी आवश्यकताएं हो सकती हैं।

समस्या सामान्य रूप से उत्तरदायी डिजाइनों में छवियों से भी निकटता से संबंधित है। वास्तव में, विशिष्ट उपकरणों के लिए डिज़ाइन करने के बजाय, जेनेरिक उत्तरदायी डिज़ाइन तकनीकों का उपयोग करना सबसे अच्छा है। आखिरकार, प्रौद्योगिकी भविष्य में भी हर समय बदलती रहेगी।

कुछ समाधान / चर्चाएँ मैंने नोट की:

सीएसएस तकनीक (ग्रेडिएंट, राउंड कॉर्नर आदि), एसवीजी और आइकन फोंट सहित जहां भी संभव हो, वैक्टर।
उच्च रिज़ॉल्यूशन ("रेटिना") छवियों की सेवा, लेकिन उन्हें और अधिक (जेपीईजी गुणवत्ता) संपीड़ित करें, जैसा कि योव वीस द्वारा सुझाया गया है , या जब पॉल बोआग द्वारा सुझाए गए (यानी जब मोबाइल) मोबाइल नेटवर्क को उन्हें संकुचित करने दें ।
अनुकूली छवियाँ , (ज्यादातर) सर्वर साइड समाधान। यह स्क्रीन रिज़ॉल्यूशन को संग्रहीत करने वाले कुकी पर आधारित है, एक वेब सर्वर जो PHP स्क्रिप्ट से छवियों की सेवा करने के लिए कॉन्फ़िगर किया गया है, और कुकी को पढ़ने और उपयुक्त छवि की सेवा करने के लिए स्क्रिप्ट का नाम दिया गया है।
स्मैशिंग मैगज़ीन पर संभावनाओं का एक गुच्छा अच्छी तरह से वर्णित और चर्चा की गई है ।
पॉल बोआग द्वारा एक वीडियो में सुझाए गए अनुसार, रेटिना को थोड़ा चिकना करने के लिए बस थोड़ा अधिक संकल्पों की सेवा करना ।
@ 1.5x तकनीक पर एक सूची के अलावा मूलतः एक ही विचार है।
निकट भविष्य में, <picture>टैग W3C कार्य समूह और यहां तक कि Apple द्वारा समर्थित समाधान बन सकता है ।
जेक आर्कबेल द्वारा प्रस्तावित एक जावास्क्रिप्ट तकनीक ।
स्मैशिंग पत्रिका पर विभिन्न तकनीकों और सामान्य रूप से समस्या पर एक व्यापक चर्चा ।

जैसा कि अन्य उत्तर दिखाते हैं, और भी तकनीकें हैं - लेकिन शायद सबसे अच्छा अभ्यास नहीं है, फिर भी।

एक बात मुझे आश्चर्य है कि इन तकनीकों में से कुछ का परीक्षण और डिबग कैसे किया जाता है, बिना संबंधित उपकरण (ओं) के उपलब्ध ...

— bhell
स्रोत

11

चूंकि किसी ने भी अभी तक स्पष्ट उल्लेख नहीं किया है, इसलिए मैं इसे वहीं बाहर भेजूंगा: जहां संभव हो, बस एसवीजी का उपयोग करें। वे बिना किसी प्रयास के सुंदर रेटिना संकल्पों में दिखाई देते हैं।

IE8 के बारे में चिंता करने के लिए मुख्य डायनासोर होने के साथ इसके लिए समर्थन अच्छा है। Gzipped फ़ाइल आकार अक्सर बिटमैप (png / jpg) प्रारूपों से बेहतर होता है और चित्र अधिक लचीले होते हैं; आप उन्हें विभिन्न प्रस्तावों पर पुन: उपयोग कर सकते हैं और यदि आवश्यक हो तो उन्हें पुनर्स्थापित कर सकते हैं, जो विकास के समय और डाउनलोड बैंडविड्थ दोनों को बचाता है।

— svachalek
स्रोत

मुझे आपका इशारा पसंद है! svgपुराने ब्राउज़र के साथ एकमात्र समस्या है।

— जान२६

15

और ऐसे मामले जिनमें आपकी तस्वीरें हैं

— बुमर

वास्तव में, वे बहुत अच्छे हैं, आपके पास उस छवि का एक वेक्टर संस्करण है जिसे आप उपयोग करना चाहते हैं, लेकिन मुझे विश्वास नहीं है कि आप सामान्य रेखापुंज छवियों को एसवीजी के रूप में सहेज सकते हैं।

— चक ले बट

उस दिशा में परिवर्तित करने का कोई "अच्छा" तरीका नहीं है, इस प्रकार "जहां संभव हो"। लेकिन फ़ोटोग्राफ़ी साइटों आदि के अपवाद के साथ, आप आमतौर पर अपनी कला संपत्ति बनाने जा रहे हैं, इसलिए मैं उन्हें वैक्टर के रूप में करने की सलाह दूंगा, जिसे आसानी से किसी भी रिज़ॉल्यूशन पर अगर आप चाहें, तो इसे रैस्टर में परिवर्तित किया जा सकता है।

— 20

एसवीजी स्क्रीन शॉट्स के लिए काम नहीं करता है (उदाहरण के लिए यूआई सुविधाओं का दस्तावेजीकरण)।

— ग्रेग ब्राउन

9

यहाँ पृष्ठभूमि चित्रों के लिए इसे प्राप्त करने के लिए कम मिक्सिन का उपयोग किया गया है। रेटिना.जेएस पृष्ठभूमि छवियों के लिए काम नहीं करता है यदि आप डॉटलेस का उपयोग कर रहे हैं, क्योंकि इसके लिए अपने स्वयं के मिश्रण की आवश्यकता होती है जो स्वयं स्क्रिप्ट मूल्यांकन का उपयोग करता है जो डॉटलेस में समर्थित नहीं है।

इस सब के साथ चाल IE8 समर्थन पाने के लिए है। यह आसानी से पृष्ठभूमि के आकार का नहीं कर सकता है इसलिए आधार केस (गैर मोबाइल मीडिया क्वेरी) को एक साधारण, गैर-स्केल आइकन होना चाहिए। मीडिया क्वेरी तब रेटिना के मामले को संभालती है और पृष्ठभूमि के आकार के वर्ग का उपयोग करने के लिए स्वतंत्र है क्योंकि रेटिना का उपयोग कभी भी IE8 पर नहीं किया जाएगा।

.retina-background-image( @path, @filename,@extension, @size )
{
     .background-size( cover );
     background-image: url( "@{path}@{filename}@{extension}" );
         @media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
                only screen and ( -moz-min-device-pixel-ratio: 2 ),
                only screen and ( -o-min-device-pixel-ratio: 2/1 ),
                only screen and ( min-device-pixel-ratio: 2 )
         {
             background-image:url( "@{path}@{filename}@x2@{extension}" );
             background-size:@size @size;
         }
}

उपयोग नमूना:

.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );

Ths के लिए आपको दो फाइलें चाहिए:

start_grey-97_12.png
start_grey-97_12@2x.png

जहां 2xरेटिना के लिए फाइल डबल रेजोल्यूशन है।

— muzzamo
स्रोत

8

बस सभी को रेटिना चित्र प्रदान करें, और छवि तत्व के अंदर अपने मूल आकार को आधा करने के लिए छवि को निचोड़ें। जैसे मान लें कि आपकी छवि 400pxचौड़ी और लंबी है - बस छवि की चौड़ाई निर्दिष्ट करें क्योंकि 200pxयह इस तरह तेज है:

<img src="img.jpg" width="200px" height="200px" />

यदि आपकी छवि फोटोग्राफिक है, तो आप संभवतः इसे खराब किए बिना JPG संपीड़न बढ़ा सकते हैं, क्योंकि छवि प्रदर्शित होने पर JPG संपीड़न कलाकृतियाँ संभवतः दिखाई नहीं देंगी 2x: http://blog.netvlies.nl/ डिजाइन interactie / रेटिना-क्रांति /

— webdev
स्रोत

1

डैन जॉब्स का सुझाव है कि फोटोग्राफिक छवियों के लिए, इसका बड़े फ़ाइल आकार में परिणाम भी नहीं होता है: ब्लॉग

— .

आदर्श रूप से आपको एक ऊंचाई निर्दिष्ट करनी चाहिए, ताकि ब्राउज़र छवि डाउनलोड होने से पहले पृष्ठ को बाहर कर सके।

— पॉल डी। वेट

8

मुझे नहीं लगता कि यह एक बड़ा विचार है यदि आवश्यक नहीं है तो एक बड़ी और भारी छवि फ़ाइल प्रदान करना ...

— jan267

1

@ PaulD.Waite पहली बात के लिए दिलचस्प है और वास्तव में पिछले के लिए! :)

— जान ६२

2

@ PaulD.Waite ध्यान दें कि लिंक किए गए लेख के लेखक ने कुछ बड़ी गलतियाँ की हैं, जिनकी चर्चा यहाँ की गई है: silev.org/test/Retina-resize.html - इसलिए लेख को नमक के एक बड़े दाने के साथ लिया जाना है। विशेष रूप से तथ्य यह है कि "दाईं ओर की अनचाही छवि" वास्तव में स्केल की गई है और इस प्रकार वास्तव में उस व्यक्ति के खिलाफ तुलना नहीं की जा सकती है जिसका संकल्प बिल्कुल दोगुना है (अपने ब्राउज़र को एक नई विंडो में सही छवियां दिखाने के लिए कहें और आप देखेंगे कि मैं क्या हूं उस अन्य लेख के लेखक का मतलब है)

— सेबस्टियन

1

अगर इसकी पृष्ठभूमि यह करने का एक सरल तरीका है:

    #image { background: url(image.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           #image { background: url(image@2x.png); background-size: 50%; }
}

इस विधि का उपयोग करने का एक और सरल तरीका है:

बस प्रतिस्थापित करें:

<img src="image.jpg" alt="" width="200" height="100" />

साथ में

<img src="image@2x.jpg" alt="" width="200" height="100" />

— SonnyP
स्रोत

1

मैंने कई रिज़ॉल्यूशन इमेज प्रदान करने के लिए यह दिलचस्प तरीका पाया है।
यह वास्तव में सीएसएस का उपयोग करता है, कुछ जिसे मैं बचना चाहता था, और केवल सफारी और क्रोम में काम करता हूं।
मैं बात कर रहा हूँ image-set।

यहाँ एक उदाहरण दिया गया है , जो Apple द्वारा दिया गया है ( यहाँ ):

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

मैं भी इन दो लिंक साझा करना चाहते हैं:

— jan267
स्रोत

1

JSF के साथ आप एक कस्टम फ़ेसलेट टैग बना सकते हैं ताकि ऐड करने के फ़िज़ को बचाया जा सकेsrcset प्रत्येक छवि में लिए ।

आपके taglib.xmlमन में कुछ इस तरह हो सकता है:

<tag>
  <tag-name>img</tag-name>
  <source>tags/img.xhtml</source>
  <attribute>
    <name>src2x</name>
    <required>true</required>
    <type>java.lang.String</type>
  </attribute>
</tag>

और आपका टैग कुछ इस तरह दिख सकता है:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <img src="#{fn:replace(src2x, '@2x', '')}"
       srcset="#{src2x} 2x"/>

</ui:composition>

जिसका उपयोग किया जा सकता है:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:myTag="http://your.com/namespace-of-taglib">
  <myTag:src2x="image@2x.jpg"/>
</html>

और प्रस्तुत करना होगा:

<img src="image.jpg"
     srcset="image@2x.jpg 2x"/>

— जैस्पर डे व्रीस
स्रोत

0

यह समस्या विशेष रूप से उत्तरदायी साइटों के साथ मुश्किल है, जहां और छवि ब्राउज़र आकार पर निर्भर अलग-अलग चौड़ाई की हो सकती है। इसके अलावा जब एक सीएमएस के साथ काम कर रहे हैं, जहां कई संपादक संभावित रूप से छवियों को अपलोड कर रहे हैं, तो यह मेरे लिए अवास्तविक लग रहा था कि मैं लोगों से विशेष रूप से संपीड़ित छवियों को अपलोड करने के लिए कहूं।

इसलिए मैंने एक स्क्रिप्ट लिखी जो इसे ध्यान में रखती है, यह पृष्ठ के नीचे और आकार बदलने पर समाप्त होती है। हर बार पिक्सेल के घनत्व और आकार को ध्यान में रखते हुए छवि पर कब्जा कर रहा है।

http://caracaldigital.com/retina-handling-code/

— कीगन gan२
स्रोत

0

यदि आप जावा-स्क्रिप्ट का उपयोग करने के डर से निराश नहीं हैं, तो यहाँ एक अच्छा लेख है http://www.highrobotics.com/articles/web/ready-for-retina.aspx । इसका बहुत ही सरल उपाय है।

और JSFiddle में उदाहरण एक हजार शब्दों के लायक है।

का उपयोग करते हुए:

<img onload="getImgSrc(this,'image_x1.png')" width="100" height="100" />

जे एस:

/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
    var srcResult = src;
    // if high-res screen then change _x1 on _x2
    if (window.devicePixelRatio > 1 && 
        src.indexOf("_x1.")>=0) {
          srcResult = src.replace("_x1.", "_x2.");
    }
    img.onload = null; //protect from second rasing
    img.src = srcResult;    
}

$(document).ready(function(){
  // fire onload trigger on IMG tags that have empty SRC attribute
  var images = $('img:not([src=""])');
    images.each(function(i) {
        $(this).trigger('onload');            
    });
});

— Artru
स्रोत