मेरे पास एक मोबाइल वेबसाइट है जो jQuery मोबाइल का लाभ ले रही है, हालांकि छवियां, स्पष्ट रूप से, आईफोन 4/4 एस पर बकवास की तरह दिखती हैं। मुझे लगता है कि यह इस सप्ताह के अंत में उपलब्ध होने पर "नया आईपैड" के लिए भी जाएगा।हाई-रेज डिस्प्ले (मुख्य रूप से आईओएस रेटिना डिस्प्ले) के लिए हाय-रेज वेब छवियों को संभालने का सही तरीका क्या है?
मैं जानता हूँ कि इस पिक्सेल अनुपात और/या छवि डीपीआई के साथ कुछ (या पीपीआई या जो भी आप इसे कॉल करना चाहते हैं ... चलो कि के बारे में चर्चा में नहीं)। मैं बस यह जानना चाहता हूं कि इन आईओएस रेटिना डिस्प्ले के लिए हाय-रेज़ोल्यूशन वेब छवियों की सेवा करने के लिए सबसे अच्छी विधि क्या है।
सबसे पहले, मैं छवि डीपीआई (Photoshop में) समस्या का समाधान होगा बदलते सोचा। मैंने कुछ नमूना छवियां ली और उन्हें 1 9 0 पीएक्स की चौड़ाई तक घटा दिया। मैंने 72 डीपीआई पर एक छवि और दूसरा 200 डीपीआई बचाया। इसका कोई प्रभाव नहीं पड़ा। अपने लिए देखें (एक आईफोन 4/4 एस पर): http://haxway.com/restest/1.html प्रत्येक की निचली छवि 200 डीपीआई है।
फिर, 200 डीपीआई पर हाय-रेज छवि को सहेजने के बजाय, मैंने इसे 72 डीपीआई पर फिर से सहेजा लेकिन इस बार मैंने चौड़ाई (528 पीएक्स) बढ़ा दी ताकि जब 1 9 0 पीएक्स की चौड़ाई तक स्केल हो जाए तो यह होगा ~ 200 डीपीआई। यह चाल चल रहा था: http://haxway.com/restest/2.html यदि आप स्रोत देखते हैं, तो आप देख सकते हैं कि मैं छवि टैग (<img src="w4.jpg" alt="" width="190" height="143">) पर चौड़ाई/ऊंचाई को मजबूर कर रहा हूं।
हालांकि, मुझे विश्वास है यह सबसे अच्छा समाधान है नहीं कर रहा हूँ। छवि प्रभाव प्रतिपादन प्रदर्शन को स्केल करने के लिए चौड़ाई/ऊंचाई विशेषताओं का उपयोग नहीं करता है क्योंकि डिवाइस को इसे लोड करने के बजाय छवि को स्केल करना पड़ता है (और इसे और भी स्पर्श नहीं किया जाता है)?
कुछ शोध के बाद, ऐसा लगता है कि -webkit-min-device-pixel-ratio [1] जैसे कुछ सीएसएस मीडिया प्रश्न हैं जहां आप हाय-रेज डिस्प्ले के लिए अलग-अलग सीएसएस का उपयोग कर सकते हैं और इसलिए सीएसएस में उच्च-रेज छवियां लोड कर सकते हैं। लेकिन मुझे HTML <img> टैग को लक्षित करने की आवश्यकता है। एक और आलेख जिसे मैंने पढ़ा (माफ करना लिंक खो गया) ने जावास्क्रिप्ट का उपयोग करके "नियमित" छवियों को हाय-रेज वाले लोगों को स्वैप करने का सुझाव दिया। वह सिर्फ पागल लगता है!
वहाँ इस बारे में जाने का एक बेहतर तरीका है? मुझे एहसास है कि राय "अलग" तरीका के बारे में भिन्न हो सकती है। यदि प्रत्येक विधि के पेशेवरों/विपक्ष को समझाया जा सकता है, तो यह बहुत अच्छा होगा! मेरा लक्ष्य सबसे तेज़ी से प्रस्तुत करने वाली विधि का उपयोग करना है (उम्मीद है कि कुछ हैकी जावास्क्रिप्ट का उपयोग किए बिना)।
धन्यवाद!
[1] http://aralbalkan.com/3331
आपका नमूना थोड़ा सा फिश हालांकि है। ब्राउज़र क्या करता है, पिक्सेल द्वारा चित्र पिक्सेल दिखाता है। इस तरह देखा, आपकी छवियां समान हैं। 200 डीपीआई छवियों के प्रिंट आकार सिर्फ छोटे हैं। यदि आप एक ही संकल्प को एक उच्च रिज़ॉल्यूशन में अपलोड करना चाहते हैं - जिसमें अधिक पिक्सल हैं - आप देखेंगे कि ब्राउज़र छवियों को 3 गुना बड़ा दिखाते हैं। जो भी आप चाहते हैं वह भी नहीं है। – commonpike
... बिल्कुल। यही वह नहीं है जो मैं चाहता हूं। तो यह वर्तमान दृष्टिकोण "मछलीदार" कैसे है? (हमला करने का मतलब नहीं है ... बस उत्सुक है।) –
क्षमा करें अगर यह अपमानजनक लगता है। यह मुझे भ्रमित कर रहा था: जो आप चाहते हैं, मुझे लगता है, एक उच्च आकार में एक ही आकार की छवि है। लेकिन आपने इसके बजाय उच्च रिज़ॉल्यूशन में एक छोटी छवि अपलोड की है। यदि ब्राउजर * डीपीआई का सम्मान करेंगे, तो आपके द्वारा अपलोड की गई 200 डीपीआई छवियां बहुत छोटी होंगी। (किसी भी मामले में, परीक्षण छवियों के लिए धन्यवाद - आपने मेरी मदद की)। – commonpike