Macలో srcset కోసం ప్రతిస్పందించే WebP చిత్రాలను రూపొందించండి

మీ ప్రారంభ స్థానం

PixRinseలో రెస్పాన్సివ్ Webని ఉపయోగించండి, ఆపై మీ వాస్తవ గమ్యస్థానానికి వ్యతిరేకంగా ఈ సెట్టింగ్‌లను సమీక్షించండి.

ఎలా చేయాలి

1. అసలు ఆస్తితో ప్రారంభించండి

   మీకు అవసరమైన అతిపెద్ద వేరియంట్ కోసం తగినంత వెడల్పు గల మూలాన్ని ఉపయోగించండి. ప్రతి ఉత్పన్నం పదే పదే పరిమాణాన్ని మార్చడానికి బదులుగా అసలు నుండి ఉత్పత్తి చేయబడుతుంది.

2. రెస్పాన్సివ్ Webని ఎంచుకోండి

   నాలుగు అంతర్నిర్మిత వెడల్పులు మరియు ఫైల్ పేర్లను సమీక్షించండి. మూలం కంటే విస్తృతమైన వేరియంట్లు దాటవేయబడ్డాయి, కాబట్టి ప్రణాళికాబద్ధమైన అవుట్‌పుట్ గణనను తనిఖీ చేయండి.

3. ఇమేజ్ సెట్‌ను ఎగుమతి చేయండి

   అన్ని అవుట్‌పుట్‌లను సమీక్షించండి. ప్రతి మూలానికి బహుళ అవుట్‌పుట్‌లకు ప్రో అవసరం; ఒకే-పరిమాణ వర్క్‌ఫ్లోను పరీక్షించడానికి ఉచిత టైర్ ఇప్పటికీ ఉపయోగించబడుతుంది.

4. మీ పేజీకి చిత్రాలను జోడించండి

   srcsetలో వెడల్పు వివరణలను ఉపయోగించండి మరియు వాస్తవ లేఅవుట్‌తో సరిపోలడానికి sizesని సెట్ చేయండి. చిత్రం మూలకంపై ఖచ్చితమైన వెడల్పు, ఎత్తు మరియు ప్రత్యామ్నాయ వచనాన్ని చేర్చండి.

<img
  src="vase-1280w.webp"
  srcset="vase-320w.webp 320w,
          vase-640w.webp 640w,
          vase-1280w.webp 1280w,
          vase-1920w.webp 1920w"
  sizes="(max-width: 720px) 100vw, 960px"
  width="1280" height="853"
  alt="A terracotta vase with an olive branch"
>

కొన్ని సాధారణ ప్రశ్నలు