स्क्रीनशॉट्स इंग्रजी ॲप दर्शवतात. प्रीसेट नावे आणि नियंत्रणे तुमच्या ॲप भाषेत देखील उपलब्ध आहेत.

आपला प्रारंभ बिंदू

PixRinse मध्ये प्रतिसादक्षम Web वापरा, नंतर या सेटिंग्जचे आपल्या वास्तविक गंतव्यस्थानाच्या विरूद्ध पुनरावलोकन करा.

या वर्कफ्लोसाठी सेटिंग्ज
रुंदी320 / 640 / 1280 / 1920 px
आउटपुटWebP, गुणवत्ता 80
रंगsRGB
लहान स्रोतमोठे रूपे वगळले आहेत
PixRinse प्रतिसादक्षम Web प्रीसेट एकाधिक WebP आउटपुट आकार दर्शवित आहे
या वॉकथ्रूसाठी वापरलेल्या सेटिंग्ज. पूर्ण आकारात त्याची तपासणी करण्यासाठी स्क्रीनशॉट निवडा.

ते कसे करावे

  1. मूळ मालमत्तेपासून सुरुवात करा

    तुम्हाला आवश्यक असलेल्या सर्वात मोठ्या व्हेरिएंटसाठी पुरेसा रुंद स्त्रोत वापरा. प्रत्येक व्युत्पन्न वारंवार आकार बदलण्याऐवजी मूळ पासून व्युत्पन्न केले जाते.

  2. प्रतिसादक्षम Web निवडा

    चार अंगभूत रुंदी आणि फाइल नावांचे पुनरावलोकन करा. स्रोतापेक्षा विस्तीर्ण रूपे वगळली आहेत, त्यामुळे नियोजित आउटपुट संख्येची तपासणी करा.

  3. प्रतिमा संच निर्यात करा

    सर्व आउटपुटचे पुनरावलोकन करा. प्रति स्त्रोत एकाधिक आउटपुटसाठी प्रो आवश्यक आहे; एकल-आकाराच्या वर्कफ्लोची चाचणी करण्यासाठी फ्री टियरचा वापर केला जाऊ शकतो.

  4. आपल्या पृष्ठावर प्रतिमा जोडा

    srcset मध्ये रुंदीचे वर्णनक वापरा आणि वास्तविक मांडणीशी जुळण्यासाठी sizes सेट करा. इमेज घटकावर अचूक रुंदी, उंची आणि पर्यायी मजकूर समाविष्ट करा.

उदाहरण HTML · तुमच्या लेआउटशी जुळवून घ्या
<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"
>

या वॉकथ्रूमधील फाईल्स

या उदाहरणाने काय निर्माण केले

एक 3072 px-विस्तृत स्त्रोत सर्व चार प्रीसेट रुंदीसाठी पुरेसा मोठा आहे. प्रत्येक फाईल ही एक वेगळी WebP असते, जी थेट त्या स्त्रोताकडून तयार केली जाते.

गुणवत्ता
80
रंग प्रोफाइल
sRGB
एका स्त्रोताकडून आउटपुट
4
वास्तविक निर्यात केलेल्या फायली
फाईलस्वरूपपिक्सेलबाइट्स
vase-1280w.webpWebP1280 × 853३५,२१४
vase-1920w.webpWebP1920 × 1280६४,१०८
vase-320w.webpWebP320 × 213४,०१८
vase-640w.webpWebP640 × 427११,५९४
एक स्रोत, चार उपयुक्त वेब रुंदी: वास्तविक निर्यात केलेले परिणाम
या वॉकथ्रूमध्ये दर्शविलेल्या नमुना फायलींसाठी वास्तविक निर्यात परिणाम.

दर्शविलेल्या नमुना फाइल्सवर मोजले. तुमचे परिणाम तुमच्या मूळ आणि सेटिंग्जवर अवलंबून आहेत. सिरॅमिक-फुलदाणीचे छायाचित्र AI-व्युत्पन्न केलेला नमुना आहे. ॲप स्क्रीनशॉट आणि निर्यात केलेल्या फाइलचे मापन वास्तविक आहेत.

काही सामान्य प्रश्न

माझा स्रोत फक्त 1000 px रुंद असल्यास काय होईल?

टेम्पलेट 1280 आणि 1920 px रूपे वगळते. फक्त संदर्भ फायली ज्या प्रत्यक्षात व्युत्पन्न केल्या गेल्या होत्या.

ॲप HTML व्युत्पन्न करतो?

हा कार्यप्रवाह प्रतिमा तयार करतो. तुमच्या वेबसाइट कोड किंवा सामग्री प्रणालीमध्ये srcset आणि sizes जोडा.

वर्कफ्लो कामाला लावा.

PixRinse उघडा, काही प्रतिमा जोडा आणि वरील सेटिंग्जसह प्रारंभ करा.

Mac साठी डाउनलोड कराविनामूल्य: प्रति बॅच 10 पर्यंत प्रतिमा आणि प्रति स्त्रोत एक आउटपुट. या वर्कफ्लोच्या एकाधिक आउटपुटसाठी प्रो आवश्यक आहे. विनामूल्य आणि Pro तुलना करा.