ਸਕਰੀਨਸ਼ਾਟ ਅੰਗਰੇਜ਼ੀ ਐਪ ਦਿਖਾਉਂਦੇ ਹਨ। ਪ੍ਰੀਸੈਟ ਨਾਮ ਅਤੇ ਨਿਯੰਤਰਣ ਤੁਹਾਡੀ ਐਪ ਭਾਸ਼ਾ ਵਿੱਚ ਵੀ ਉਪਲਬਧ ਹਨ।

ਤੁਹਾਡਾ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ

PixRinse ਵਿੱਚ ਰਿਸਪਾਂਸਿਵ ਵੈੱਬ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਫਿਰ ਆਪਣੀ ਅਸਲ ਮੰਜ਼ਿਲ ਦੇ ਵਿਰੁੱਧ ਇਹਨਾਂ ਸੈਟਿੰਗਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰੋ।

ਇਸ ਵਰਕਫਲੋ ਲਈ ਸੈਟਿੰਗਾਂ
ਚੌੜਾਈ320 / 640 / 1280 / 1920 px
ਆਉਟਪੁੱਟWebP, ਗੁਣਵੱਤਾ 80
ਰੰਗsRGB
ਛੋਟੇ ਸਰੋਤਵੱਡੇ ਰੂਪ ਛੱਡ ਦਿੱਤੇ ਗਏ ਹਨ
PixRinse ਰਿਸਪਾਂਸਿਵ ਵੈੱਬ ਪ੍ਰੀਸੈਟ ਕਈ WebP ਆਉਟਪੁੱਟ ਆਕਾਰ ਦਿਖਾ ਰਿਹਾ ਹੈ
ਇਸ ਵਾਕਥਰੂ ਲਈ ਵਰਤੀਆਂ ਗਈਆਂ ਸੈਟਿੰਗਾਂ। ਪੂਰੇ ਆਕਾਰ 'ਤੇ ਇਸ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਸਕ੍ਰੀਨਸ਼ੌਟ ਦੀ ਚੋਣ ਕਰੋ।

ਇਹ ਕਿਵੇਂ ਕਰਨਾ ਹੈ

  1. ਅਸਲ ਸੰਪਤੀ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ

    ਤੁਹਾਨੂੰ ਲੋੜੀਂਦੇ ਸਭ ਤੋਂ ਵੱਡੇ ਰੂਪ ਲਈ ਕਾਫ਼ੀ ਚੌੜਾ ਸਰੋਤ ਵਰਤੋ। ਹਰ ਡੈਰੀਵੇਟਿਵ ਨੂੰ ਵਾਰ-ਵਾਰ ਮੁੜ ਆਕਾਰ ਦੇਣ ਦੀ ਬਜਾਏ ਮੂਲ ਤੋਂ ਤਿਆਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

  2. ਰਿਸਪਾਂਸਿਵ ਵੈੱਬ ਚੁਣੋ

    ਚਾਰ ਬਿਲਟ-ਇਨ ਚੌੜਾਈ ਅਤੇ ਫਾਈਲ ਨਾਮਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰੋ। ਸਰੋਤ ਤੋਂ ਚੌੜੇ ਰੂਪਾਂ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਇਸਲਈ ਯੋਜਨਾਬੱਧ ਆਉਟਪੁੱਟ ਗਿਣਤੀ ਦੀ ਜਾਂਚ ਕਰੋ।

  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 × 85335,214
vase-1920w.webpWebP1920 × 128064,108
vase-320w.webpWebP320 × 2134,018
vase-640w.webpWebP640 × 42711,594
ਇੱਕ ਸਰੋਤ, ਚਾਰ ਉਪਯੋਗੀ ਵੈੱਬ ਚੌੜਾਈ: ਅਸਲ ਨਿਰਯਾਤ ਨਤੀਜੇ
ਇਸ ਵਾਕਥਰੂ ਵਿੱਚ ਦਿਖਾਈਆਂ ਗਈਆਂ ਨਮੂਨਾ ਫਾਈਲਾਂ ਲਈ ਅਸਲ ਨਿਰਯਾਤ ਨਤੀਜੇ।

ਦਿਖਾਈਆਂ ਗਈਆਂ ਨਮੂਨਾ ਫਾਈਲਾਂ 'ਤੇ ਮਾਪਿਆ ਗਿਆ। ਤੁਹਾਡੇ ਨਤੀਜੇ ਤੁਹਾਡੇ ਮੂਲ ਅਤੇ ਸੈਟਿੰਗਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਵਸਰਾਵਿਕ ਫੁੱਲਦਾਨ ਦੀ ਫੋਟੋ ਇੱਕ AI ਦੁਆਰਾ ਤਿਆਰ ਕੀਤਾ ਨਮੂਨਾ ਹੈ। ਐਪ ਸਕਰੀਨਸ਼ਾਟ ਅਤੇ ਨਿਰਯਾਤ ਫਾਇਲ ਮਾਪ ਅਸਲੀ ਹਨ.

ਆਮ ਸਵਾਲ ਦੇ ਇੱਕ ਜੋੜੇ ਨੂੰ

ਕੀ ਹੁੰਦਾ ਹੈ ਜੇਕਰ ਮੇਰਾ ਸਰੋਤ ਕੇਵਲ 1000 px ਚੌੜਾ ਹੈ?

ਟੈਮਪਲੇਟ 1280 ਅਤੇ 1920 px ਰੂਪਾਂ ਨੂੰ ਛੱਡ ਦਿੰਦਾ ਹੈ। ਸਿਰਫ਼ ਸੰਦਰਭ ਫਾਈਲਾਂ ਜੋ ਅਸਲ ਵਿੱਚ ਤਿਆਰ ਕੀਤੀਆਂ ਗਈਆਂ ਸਨ।

ਕੀ ਐਪ HTML ਬਣਾਉਂਦਾ ਹੈ?

ਇਹ ਵਰਕਫਲੋ ਚਿੱਤਰ ਬਣਾਉਂਦਾ ਹੈ। ਆਪਣੇ ਵੈੱਬਸਾਈਟ ਕੋਡ ਜਾਂ ਸਮੱਗਰੀ ਸਿਸਟਮ ਵਿੱਚ srcset ਅਤੇ sizes ਸ਼ਾਮਲ ਕਰੋ।

ਵਰਕਫਲੋ ਨੂੰ ਕੰਮ 'ਤੇ ਲਗਾਓ।

PixRinse ਖੋਲ੍ਹੋ, ਕੁਝ ਚਿੱਤਰ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਉਪਰੋਕਤ ਸੈਟਿੰਗਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ।

Mac ਲਈ ਡਾਊਨਲੋਡਮੁਫ਼ਤ: ਪ੍ਰਤੀ ਬੈਚ ਤੱਕ 10 ਚਿੱਤਰ ਅਤੇ ਪ੍ਰਤੀ ਸਰੋਤ ਇੱਕ ਆਉਟਪੁੱਟ। ਇਸ ਵਰਕਫਲੋ ਦੇ ਮਲਟੀਪਲ ਆਉਟਪੁੱਟ ਲਈ ਪ੍ਰੋ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਮੁਫ਼ਤ ਅਤੇ ਪ੍ਰੋ ਦੀ ਤੁਲਨਾ ਕਰੋ।