वेब परियोजनाओं में आधुनिक ग्राफिक प्रारूपों का उपयोग

आधुनिक ग्राफिक प्रारूपों का सामान्य अवलोकन

• JPEG 2000 एक प्रारूप है जो नियमित JPG का उन्नत संस्करण है। यह प्रारूप 1997 में विकसित किया गया था, मुख्य रूप से सिनेमा और चिकित्सा में उपयोग के लिए। यह आपको JPEG की तुलना में मजबूत छवियों को संपीड़ित करने की अनुमति देता है, लेकिन कम कलाकृतियों के साथ।
• JPEG XR JPEG 2000 से संबंधित एक प्रारूप है। इसे 2009 में Microsoft द्वारा विकसित किया गया था।
• WebP वेब के लिए 2010 में बनाया गया एक प्रारूप है। इसके विकास का मुख्य लक्ष्य फ़ाइल आकारों को कम करने के लिए छवियों के अनुकूलन के लिए उन्नत तरीकों का उपयोग करना था। वेबपी पारदर्शिता और यहां तक ​​कि एनीमेशन का समर्थन करता है।

आप वैकल्पिक ग्राफिक प्रारूपों का उपयोग करके कितना जीत सकते हैं?

ब्राउज़र संगतता

बचाव के लिए चित्र तत्व

<picture>
  <source srcset="/images/cereal-box.webp" type="image/webp" />
  <source srcset="/images/cereal-box.jp2" type="image/jp2" />
  <img src="/images/cereal-box.jxr" type="image/vnd.ms-photo" />
</picture>

<picture>
  <img src="/images/cereal-box.webp" />
</picture>

सरलीकृत विकल्प

<picture>
  <source srcset="/images/cereal-box.webp" />
  <img src="/images/cereal-box.jpg" />
</picture>

समाधान के स्वास्थ्य की जाँच करना

छवि फ़ाइलों को वेबपी प्रारूप में बदलें

brew install webp

cwebp -q 80 cereal.png -o cereal.webp

• ध्वज -q 80आपको छवि गुणवत्ता सेट करने की अनुमति देता है। इसका मान 1 (सबसे खराब गुणवत्ता) से लेकर 100 (सबसे अच्छा) तक होता है। आप विभिन्न मूल्यों के साथ प्रयोग कर सकते हैं। मुझे पता चला कि 70-80 के क्षेत्र में कुछ पूछना सबसे अच्छा है।
• फ़ाइल का नाम cereal.jpgमूल छवि है जिसे वेबप में बदलने की आवश्यकता है।
• निर्माण -o cereal.webpआउटपुट फ़ाइल के लिए पथ सेट करता है।

प्रतिक्रिया अनुप्रयोगों में आधुनिक छवि प्रारूपों का उपयोग करना

const ImgWithFallback = ({
  src,
  fallback,
  type = 'image/webp',
  ...delegated
}) => {
  return (
    <picture>
      <source srcSet={src} type={type} />
      <img src={fallback} {...delegated} />
    </picture>
  );
};

<ImgWithFallback
  src="/images/cereal.webp"
  fallback="/images/cereal.png"
  alt="A photo showing the expiration date on a box of Lucky Charms"
/>

शैलीगत घटकों के साथ आधुनिक ग्राफिक प्रारूपों का उपयोग

const FancyImg = styled.img`
  whatever: stuff;
`

const FancyImg = styled(ImgWithFallback)`
  whatever: stuff;
`

<ImgWithFallback className="sc-some-generated-thing" />

गैट्सबी-इमेज पैकेज का उपयोग करना

वेब की विपक्ष

सारांश