यह प्रश्न वास्तव में कोडिंग के बारे में नहीं है बल्कि किसी कार्य के लिए सही विधि चुन रहा है। मुझे नहीं पता कि यह एसओ के नियमों के खिलाफ है लेकिन यहां आप जाते हैं ..उत्तरदायी छवियां: आकार बदलें या गतिशील रूप से फसल?
मैंने एक बार स्थानीय समाचार पत्र के लिए एक छोटा सीएमएस बनाया जिसने उन्हें एक फोटो के साथ अपनी पोस्ट जोड़ने की कार्यक्षमता दी। तस्वीर के बारे में, वे एक सिंगल फोटो अपलोड करते थे और मैंने उस टेम्पलेट के विभिन्न संस्करणों को सहेजने के लिए अलग-अलग टेम्पलेट्स (टेम्प्लेट्स और स्क्रीन आकार नहीं!)
अब, मुझे इस पुराने को नवीनीकृत करने के लिए कहा गया है प्रणाली और मुझे प्रतिक्रिया/अनुकूलता की दुविधा का सामना करना पड़ रहा है।
जहां तक मेरे निष्कर्ष ऑनलाइन हैं, अगली बड़ी बात <picture> तत्व है। मुझे कई संसाधन मिल गए हैं और बस जब मैंने इसके लिए जाने का फैसला किया, तो मैं this वेबसाइट पर आया। यदि आप किसी भी छवि के स्रोत को देखते हैं, तो आपको पता चलेगा कि इसमें width=940&height=320&mode=crop&scale=both&meta=panoramic जैसे क्वेरीस्ट्रिंग है जब मैं विंडो का आकार बदलता हूं तो यह width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter जैसा कुछ बन जाता है मेरा मानना है कि यह वेबसाइट Image Resizer का उपयोग कर रही है और स्क्रीन आकार के आधार पर, एक ही तस्वीर हो रही है नई छवि को आउटपुट करने के लिए सर्वर द्वारा फ्लाई पर संसाधित किया गया।
क्या मुझे समझ नहीं आता जो इन तरीकों में से वास्तव में बेहतर है, क्योंकि picture तत्व अभी भी सर्वर जबकि imageresizer केवल एक की जरूरत पर अपलोड कई छवियों की जरूरत है और यह एक स्क्रीन आकार के लिए उपयुक्त फसलों-आकार बदलता है, है। लेकिन दूसरी तरफ, picture तत्व के साथ सर्वर छवियों का आकार बदलने के अनुरोधों के साथ बमबारी नहीं करता है लेकिन प्रसंस्करण और समय से मौजूदा तस्वीरों की बचत करता है?
तस्वीर अभी तक सभी ब्राउज़रों द्वारा समर्थित नहीं है http://caniuse.com/#search=picture लेकिन यह स्पष्ट रूप से सबसे अच्छा है यदि आप इसे अपने संदर्भ में उपयोग कर सकते हैं और यह आपकी आवश्यकता को पूरा करता है। यह भी ध्यान दें कि छवि पुनर्विक्रेता जैसे सर्वर पाठ्यक्रम की भारी छवि गणना से बचने के लिए सामग्री को कैश कर सकते हैं। –