त्यहाँ वेब पृष्ठहरूमा प्रयोग हुन सक्ने छवि ढाँचाहरू छन्। केही सामान्य उदाहरणहरू GIF , JPG , र PNG हुन् । SVG फाइलहरू सामान्यतया आज वेबसाइटहरूमा प्रयोग गरिन्छ, वेब डिजाइनरहरू अझै अनलाइन छविको लागि अर्को विकल्प दिन्छन्।
GIF छविहरू
तस्बिरहरूको लागि GIF फाइलहरू प्रयोग गर्नुहोस् जुन सानो, निश्चित निश्चित संख्याहरू। GIF फाइलहरू सँधै 256 भन्दा बढी रङहरू भन्दा कममा कम हुन्छन्। GIF फाईलहरूका लागि कम्प्रेसन एल्गोरिथ्म JPG फाईलहरूको भन्दा कम जटिल छ, तर जब फ्ल्याट रङ छविहरू र पाठमा प्रयोग गरिन्छ यसले यसलाई सानो फाइलको आकार दिन्छ ।
GIF ढाँचा फोटोग्राफिक तस्वीरहरूका लागि वा ढाँचा रंगहरूसँग छविहरू उपयुक्त छैन। किनभने GIF ढाँचामा सीमित संख्याहरू रंग, ग्रेडियन्टहरू र फोटोहरू गाईडिङ र पिक्सलेशनको साथ समाप्त हुनेछन् जब GIF फाइलको रूपमा बचत गरियो।
संक्षेपमा, तपाईं केवल साधारण छविहरूको लागि केवल केहि रंगहरूसँग GIF हरू प्रयोग गर्नुहुनेछ, तर तपाईँले यसको लागि पनि PNG हरु प्रयोग गर्न सक्नुहुनेछ (त्यो छिट्टै थप)।
JPG छविहरू
तस्बिरहरू र अन्य तस्विरहरूको लागि जुन लाखौं रङहरू छन् को लागि JPG छविहरू प्रयोग गर्नुहोस्। यसले एक जटिल सङ्कुचन एल्गोरिदम प्रयोग गर्दछ जुन तपाईंलाई छविको गुणस्तर गुमाएर सानो ग्राफिक्स सिर्जना गर्न अनुमति दिन्छ। यसलाई "हानिकारक" सङ्कुचन भनिन्छ किनकी छवि संकुचित हुँदा छवि जानकारी केहि हराएको छ।
JPG ढाँचा पाठ, पाठको ठूलो ब्लकहरू र कुरकुरा किनारहरूसँग सरल आकारमा छविहरूसँग उपयुक्त छैन। यो कारणले गर्दा छवि संकुचित हुँदा, पाठ, रङहरू वा रेखाहरू छविको परिणाममा धब्बा हुन सक्छ जुन तीव्र रूपमा होइन किनकि यो अर्को ढाँचामा सुरक्षित हुनेछ।
जेपीपी छविहरू तस्बिरहरू र तस्बिरहरूका लागि सबै भन्दा राम्रो प्रयोग गरिन्छ जुन धेरैसँग र धेरै प्राकृतिक रंगहरू छन्।
PNG छविहरू
PNG ढाँचा GIF ढाँचाको लागि प्रतिस्थापनको रूपमा विकास गरिएको थियो जब देखा पर्यो कि GIF तस्बिरहरू रोयल्टी शुल्कको अधीन हुनेछ। PNG ग्राफिक्ससँग GIF छविहरू भन्दा राम्रो सङ्कुचन दर रहेको छ जुन एउटै फाइल भन्दा सानो छविहरू GIF को रूपमा बचत गरिएको छ। PNG फाइलहरूले अल्फा पारदर्शिता प्रदान गर्दछ, अर्थमा तपाइँसँग तपाईंको छविहरूको क्षेत्रहरू छन् जुन सबै पुरा तरिकाले पारदर्शी छन् वा अल्फा पारदर्शिता पनि प्रयोग गर्दछ। उदाहरणका लागि, एक ड्रप छाया पारदर्शिता प्रभावहरूको दायरा प्रयोग गर्दछ र PNG को लागि उपयुक्त हुनेछ (वा तपाइँ यसको सट्टामा सट्टा CSS छाडेर प्रयोग गरेर हामीलाई अन्त्य गर्न सक्नुहुनेछ)।
PNG तस्बिरहरू, जस्तै GIFs, तस्बिरहरूसँग राम्रोसँग उपयुक्त छैन। ब्यान्डिंग समस्याको वरिपरि प्राप्त गर्न सम्भव छ जुन वास्तविक रंगहरू प्रयोग गरेर GIF फाईलहरू को रूपमा बचत गरिएका फोटोग्राफहरूलाई प्रभाव पार्छ, तर यसले परिणामहरू धेरै ठूला चित्रहरूमा पार्न सक्छ। पीएनजी छविहरू पुरानो सेल फोन र फीचर फोनहरू द्वारा पनि राम्रोसँग समर्थित छैनन्।
हामी कुनै पनि फाइलको लागि PNG प्रयोग गर्दछ जुन पारदर्शिता चाहिन्छ। हामी PNG-8 लाई पनि कुनै पनि फाईलका लागि प्रयोग गर्दछ जुन GIF को रूपमा उपयुक्त हुनेछ, यसको सट्टा यो PNG ढाँचा प्रयोग गरी।
SVG छविहरू
SVG स्केलेबल वेक्टर ग्राफिकको लागि खडा छ। JPG, GIF, र PNG मा फेला परेका ढाँचाहरूको विपरीत, यी फाईलहरूले धेरै सानो फाईलहरू सिर्जना गर्नका लागि प्रयोग गर्दछ जुन कुनै साइजमा प्रदान गर्न सकिन्छ जुन फाइल साइजमा गुणस्तरको हानिकारक हुँदैन। तिनीहरू चित्रहरू र पनि लोगो जस्ता दृष्टान्तहरूको लागि सिर्जना गरिन्छन्।
वेब डिलिवरीका लागि छविहरू तयारी गर्दै
जुनसुकै छवि ढाँचा तपाइँले प्रयोग गर्नुभएमा, र तपाईंको वेबसाइटले सबै पृष्ठहरूमा विभिन्न ढाँचाहरू प्रयोग गर्न निश्चित छ, तपाइँलाई निश्चित गर्न आवश्यक छ कि वेब डिलिवरीको लागि त्यो साइटमा सबै छविहरू तैयार छन्। अति ठूलो छविहरूले साइटलाई ढिलो रूपमा चलाउन र समग्र प्रदर्शनमा असर गर्न सक्छ। यो लड्नको लागि, ती छविहरू उच्च स्तरको बीचमा र निम्न स्तरको साइजमा स्तरको स्तरमा सम्भव ब्यालेन्स पाउन अनुकूलित हुनुपर्छ ।
दाहिने छवि ढाँचा चयन गर्दै युद्धको अंश हो, तर तपाईले तिनीहरूका फाइलहरू तयार पारेका छन् यो महत्त्वपूर्ण वेब डिलिवरी प्रक्रियाको अर्को चरण हो।
जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी Girard द्वारा संपादित।