§

ਤਸਵੀਰ ਪਾਓ ਜਾਂ ਚੁਣਨ ਲਈ ਕਲਿੱਕ ਕਰੋ

PNG, JPEG, GIF, WebP, SVG, BMP — 30 MB ਤੱਕ। ਇੱਕ ਵਾਰ ਇੱਕ ਤਸਵੀਰ।

ਤਸਵੀਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਡਿਵਾਈਸ ਤੇ ਹੀ ਪੜ੍ਹੀ ਅਤੇ ਏਨਕੋਡ ਕੀਤੀ ਜਾਂਦੀ ਹੈ — ਇਹ ਕਦੇ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਨਹੀਂ ਛੱਡਦੀ।

ਪੰਜਾਬ ਵਿੱਚ ਅੰਮ੍ਰਿਤਸਰ ਅਤੇ ਮੋਹਾਲੀ ਦੀਆਂ ਵੈੱਬ ਟੀਮਾਂ ਛੋਟੇ ਲੋਗੋ ਅਤੇ ਆਈਕਨ data URI ਵਜੋਂ ਇਨਲਾਈਨ ਕਰਦੀਆਂ ਹਨ ਤਾਂ ਜੋ ਪੰਨਾ ਆਪਣਾ ਪਹਿਲਾ ਫਰੇਮ ਥੋੜ੍ਹਾ ਜਲਦੀ ਖਿੱਚ ਸਕੇ। ਲੁਧਿਆਣਾ ਅਤੇ ਜਲੰਧਰ ਦੇ ਈ-ਕਾਮਰਸ ਵਪਾਰੀ ਈਮੇਲ ਨਿਊਜ਼ਲੈਟਰਾਂ ਵਿੱਚ ਬ੍ਰਾਂਡ ਲੋਗੋ ਇਨਲਾਈਨ ਰੱਖਦੇ ਹਨ, ਕਿਉਂਕਿ ਕਈ ਮੇਲ ਕਲਾਇੰਟ ਬਾਹਰੀ ਤਸਵੀਰਾਂ ਨੂੰ ਮੂਲ ਰੂਪ ਵਿੱਚ ਰੋਕਦੇ ਹਨ, ਪਰ Base64 ਇਨਲਾਈਨ ਤਸਵੀਰ ਸੁਨੇਹਾ ਖੁੱਲ੍ਹਦਿਆਂ ਹੀ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ। UPI ਅਤੇ ਫਿਨਟੈਕ ਐਪ ਬਣਾਉਣ ਵਾਲੇ ਡਿਵੈਲਪਰ ਛੋਟੇ ਚਿੰਨ੍ਹ CSS ਵਿੱਚ ਇਨਲਾਈਨ ਕਰਕੇ HTTP ਰਾਉਂਡ-ਟ੍ਰਿਪ ਘਟਾਉਂਦੇ ਹਨ। MeitY ਅਤੇ CERT-In ਦੀਆਂ ਸਾਈਬਰ ਸੁਰੱਖਿਆ ਹਦਾਇਤਾਂ ਅਧੀਨ ਕੰਮ ਕਰਨ ਵਾਲੀਆਂ ਸੰਸਥਾਵਾਂ ਅਜਿਹੇ ਸਾਧਨ ਪਸੰਦ ਕਰਦੀਆਂ ਹਨ ਜੋ ਡੇਟਾ ਬਾਹਰ ਨਹੀਂ ਭੇਜਦੇ, ਕਿਉਂਕਿ ਏਨਕੋਡਿੰਗ ਪੂਰੀ ਤਰ੍ਹਾਂ JavaScript ਵਿੱਚ ਚੱਲਦੀ ਹੈ ਅਤੇ ਅਸਲ ਤਸਵੀਰ ਕਦੇ ਸਰਵਰ ਨੂੰ ਨਹੀਂ ਛੂਹਦੀ — ਸਕ੍ਰੀਨਸ਼ੌਟ, ID ਸਕੈਨ, ਜਾਂ ਗੁਪਤ ਅੰਦਰੂਨੀ ਚਿੱਤਰਾਂ ਲਈ ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ।

ਤਸਵੀਰ-ਤੋਂ-Base64 ਕਨਵਰਜ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ

ਪੂਰੀ ਕਨਵਰਜ਼ਨ File API ਅਤੇ ਬਿਲਟ-ਇਨ btoa ਫੰਕਸ਼ਨ ਵਰਤ ਕੇ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਚੱਲਦੀ ਹੈ — ਕੋਈ ਕੋਡੈਕ ਲਾਇਬ੍ਰੇਰੀ ਡਾਊਨਲੋਡ ਨਹੀਂ ਹੁੰਦੀ ਅਤੇ ਕੋਈ ਸਰਵਰ ਤਸਵੀਰ ਨਹੀਂ ਵੇਖਦਾ। ਸ਼ੁਰੂ ਤੋਂ ਅੰਤ ਤੱਕ ਦੀ ਪਾਈਪਲਾਈਨ ਇੱਥੇ ਹੈ:

  1. ਤੁਸੀਂ ਇੱਕ ਤਸਵੀਰ ਪਾਉਂਦੇ ਜਾਂ ਚੁਣਦੇ ਹੋ। ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ ਤੁਹਾਡੀ ਸਥਾਨਕ ਡਿਸਕ ਤੋਂ Blob ਵਜੋਂ ਪੜ੍ਹਦਾ ਹੈ, ਬਾਈਟਾਂ ਨੂੰ ਕਦੇ ਸਰਵਰ ਤੇ ਕਾਪੀ ਕੀਤੇ ਬਿਨਾਂ।
  2. ਫਾਈਲ ਨੂੰ 1 MB ਟੁਕੜਿਆਂ ਵਿੱਚ ਪੜ੍ਹਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਹਰ ਟੁਕੜੇ ਦੇ ਬਾਈਟ ਇੱਕ ਬਾਈਨਰੀ ਸਤਰ ਨਾਲ ਜੋੜੇ ਜਾਂਦੇ ਹਨ। ਟੁਕੜਿਆਂ ਵਿੱਚ ਪੜ੍ਹਨ ਨਾਲ ਵੱਡੀਆਂ ਤਸਵੀਰਾਂ JavaScript ਕਾਲ ਸਟੈਕ ਨੂੰ ਓਵਰਫਲੋ ਨਹੀਂ ਕਰਦੀਆਂ।
  3. ਬਾਈਨਰੀ ਸਤਰ btoa ਨੂੰ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ, ਜੋ A–Z, a–z, 0–9, ਜੋੜ / ਵਰਣਮਾਲਾ ਵਿੱਚੋਂ ਲਏ ਚਾਰ Base64 ਅੱਖਰਾਂ ਤੇ ਹਰ ਤਿੰਨ ਬਾਈਟ ਨੂੰ ਮੈਪ ਕਰਦੀ ਹੈ।
  4. ਫਾਈਲ ਦੀ MIME ਕਿਸਮ (image/png, image/jpeg, ਆਦਿ) File ਆਬਜੈਕਟ ਤੋਂ ਪੜ੍ਹੀ ਜਾਂਦੀ ਹੈ ਅਤੇ data: ਪ੍ਰੀਫਿਕਸ ਵਜੋਂ ਅੱਗੇ ਜੋੜੀ ਜਾਂਦੀ ਹੈ, ਜੋ ਇੱਕ ਪੂਰਾ data:image/…;base64,… URI ਬਣਾਉਂਦੀ ਹੈ।
  5. ਪੰਨਾ ਉਸ URI ਤੋਂ ਚਾਰ ਆਉਟਪੁੱਟ ਜੋੜਦਾ ਹੈ — ਪੂਰਾ data URI, ਪ੍ਰੀਫਿਕਸ ਤੋਂ ਬਿਨਾਂ ਕੱਚਾ Base64, ਇੱਕ ਤਿਆਰ-ਪੇਸਟ ਟੈਗ, ਅਤੇ ਇੱਕ CSS background-image ਸਨਿੱਪਟ — ਹਰੇਕ ਆਪਣੇ ਕਾਪੀ ਬਟਨ ਨਾਲ।

ਤਸਵੀਰ ਨੂੰ data URI ਵਜੋਂ ਕਿਉਂ ਏਨਕੋਡ ਕਰੋ?

  • ਛੋਟੇ ਲੋਗੋ ਜਾਂ ਆਈਕਨ ਨੂੰ data URI ਵਜੋਂ ਇਨਲਾਈਨ ਕਰਨ ਨਾਲ ਇੱਕ ਵੱਖਰੀ ਨੈੱਟਵਰਕ ਰਾਉਂਡ-ਟ੍ਰਿਪ ਹਟ ਜਾਂਦੀ ਹੈ, ਇਸ ਲਈ ਪੰਨਾ ਜਾਂ ਈਮੇਲ ਆਪਣਾ ਪਹਿਲਾ ਫਰੇਮ ਥੋੜ੍ਹਾ ਜਲਦੀ ਖਿੱਚਦਾ ਹੈ।
  • ਜਿਸ ਪੰਨੇ ਜਾਂ ਸਟਾਈਲਸ਼ੀਟ ਦੀਆਂ ਤਸਵੀਰਾਂ ਇਨਲਾਈਨ ਹੋਣ ਉਹ ਸਵੈ-ਸੰਪੂਰਨ ਹੁੰਦੀ ਹੈ। ਇਹ ਔਫਲਾਈਨ ਕੰਮ ਕਰਦੀ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਇਸਨੂੰ ਐਸੈੱਟ-ਫੋਲਡਰ ਖਿੱਚੇ ਬਿਨਾਂ ਆਲੇ-ਦੁਆਲੇ ਕਾਪੀ ਕਰ ਸਕਦੇ ਹੋ।
  • ਕਈ ਮੇਲ ਕਲਾਇੰਟ ਲਿੰਕ ਕੀਤੀਆਂ ਬਾਹਰੀ ਤਸਵੀਰਾਂ ਨੂੰ ਮੂਲ ਰੂਪ ਵਿੱਚ ਰੋਕਦੇ ਹਨ। ਲੋਗੋ ਨੂੰ Base64 ਵਜੋਂ ਇਨਲਾਈਨ ਕਰੋ ਅਤੇ ਸੁਨੇਹਾ ਖੁੱਲ੍ਹਦਿਆਂ ਹੀ ਇਹ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਕਿਸੇ ਬਾਹਰੀ ਫੈਚ ਦੀ ਲੋੜ ਨਹੀਂ।
  • ਏਨਕੋਡਿੰਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੁੰਦੀ ਹੈ, ਇਸ ਲਈ ਸੰਵੇਦਨਸ਼ੀਲ ਤਸਵੀਰਾਂ ਕਦੇ ਕਿਸੇ ਤੀਜੀ-ਧਿਰ ਸਰਵਰ ਨੂੰ ਨਹੀਂ ਜਾਂਦੀਆਂ। ਇਸ ਵਿੱਚ ਸਕ੍ਰੀਨਸ਼ੌਟ, ID ਸਕੈਨ, ਅਤੇ ਅੰਦਰੂਨੀ ਚਿੱਤਰ ਸ਼ਾਮਲ ਹਨ।

Base64 ਤਸਵੀਰਾਂ ਦੀਆਂ ਆਮ ਵਰਤੋਂਆਂ

data URI ਉੱਥੇ ਦਿਖਦਾ ਹੈ ਜਿੱਥੇ ਤਸਵੀਰ ਇੰਨੀ ਛੋਟੀ ਹੋਵੇ ਕਿ Base64 ਦੁਆਰਾ ਜੋੜੇ ~33% ਆਕਾਰ ਵਾਧੇ ਨਾਲੋਂ ਇੱਕ ਵੱਖਰੀ ਬੇਨਤੀ ਵੱਧ ਮਹਿੰਗੀ ਪੈਂਦੀ ਹੈ। ਤਿੰਨ ਪੈਟਰਨ ਲਗਾਤਾਰ ਆਉਂਦੇ ਹਨ:

  • ਇਨਲਾਈਨ CSS ਆਈਕਨ: 1–2 KB ਸਪ੍ਰਾਈਟ ਜਾਂ ਆਈਕਨ ਨੂੰ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ background-image: url(data:…) ਵਜੋਂ ਪਾਓ ਤਾਂ ਜੋ ਨਿਯਮ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਵੈ-ਸੰਪੂਰਨ ਰਹੇ।
  • ਈਮੇਲ ਦਸਤਖ਼ਤ ਅਤੇ ਨਿਊਜ਼ਲੈਟਰ: data URI src ਵਾਲੇ ਵਜੋਂ ਏਮਬੈੱਡ ਕੀਤਾ ਲੋਗੋ ਉਦੋਂ ਵੀ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਕਲਾਇੰਟ ਬਾਹਰੀ ਤਸਵੀਰਾਂ ਰੋਕਦਾ ਹੈ।
  • ਬਿਲਡ-ਟੂਲ ਇਨਲਾਈਨਿੰਗ: Webpack ਅਤੇ Vite ਵਰਗੇ ਬੰਡਲਰ ਬਾਈਟ ਸੀਮਾ ਤੋਂ ਹੇਠਾਂ ਦੀਆਂ ਐਸੈੱਟਾਂ ਨੂੰ ਆਪਣੇ-ਆਪ ਇਨਲਾਈਨ ਕਰਦੇ ਹਨ, ਅਤੇ ਇਹ ਸਾਧਨ ਤੁਹਾਨੂੰ ਠੀਕ ਉਹ ਆਉਟਪੁੱਟ ਕਿਹੋ ਜਿਹਾ ਦਿਖਦਾ ਹੈ ਪ੍ਰੀਵਿਊ ਕਰਨ ਦਿੰਦਾ ਹੈ।

Base64 ਤਸਵੀਰ ਕਿਹੋ ਜਿਹੀ ਦਿੱਖਦੀ ਹੈ?

ਇੱਕ ਨਿੱਕੀ 1×1 ਪਾਰਦਰਸ਼ੀ PNG ਲਓ। ਇਸਦੇ ਕੱਚੇ ਬਾਈਟ ਕੇਵਲ 67 ਬਾਈਟ ਹਨ, ਪਰ ਏਨਕੋਡ ਹੋਣ ਤੇ ਇਹ ਸਤਰ iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= ਬਣ ਜਾਂਦੀ ਹੈ, ਅਤੇ ਪੂਰਾ data URI ਹੈ data:image/png;base64,iVBORw0KGgo…। ਧਿਆਨ ਦਿਓ ਕਿ ਏਨਕੋਡ ਕੀਤਾ ਰੂਪ ਮੂਲ ਨਾਲੋਂ ਲਗਭਗ ਇੱਕ-ਤਿਹਾਈ ਵੱਡਾ ਹੈ। ਬਾਈਨਰੀ ਡੇਟਾ ਨੂੰ ਸਿੱਧੇ ਟੈਕਸਟ ਵਿੱਚ ਏਮਬੈੱਡ ਕਰਨ ਨੂੰ ਸੁਰੱਖਿਅਤ ਬਣਾਉਣ ਲਈ ਇਹੀ ਸਮਝੌਤਾ ਹੈ।

ਕੀ ਮੇਰੀ ਤਸਵੀਰ ਕਿਤੇ ਅੱਪਲੋਡ ਹੁੰਦੀ ਹੈ?

ਨਹੀਂ। ਕਨਵਰਜ਼ਨ ਤਸਵੀਰ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਡਿਵਾਈਸ ਤੇ ਏਨਕੋਡ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਦੀ File API ਅਤੇ ਮੂਲ btoa ਫੰਕਸ਼ਨ ਵਰਤਦੀ ਹੈ। ਤੁਸੀਂ ਖੁਦ ਪੁਸ਼ਟੀ ਕਰ ਸਕਦੇ ਹੋ: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲ ਖੋਲ੍ਹੋ, Network ਪੈਨਲ ਤੇ ਜਾਓ, ਅਤੇ ਇੱਕ ਤਸਵੀਰ ਬਦਲੋ — ਤੁਹਾਨੂੰ ਜੋ ਇਕੱਲੀਆਂ ਬੇਨਤੀਆਂ ਦਿਖਾਈ ਦੇਣਗੀਆਂ ਉਹ ਪੰਨਾ ਲੋਡ ਅਤੇ ਕੋਈ ਇਸ਼ਤਿਹਾਰ ਹਨ। ਤਸਵੀਰ-ਆਕਾਰ ਵਾਲੀ ਕੋਈ ਚੀਜ਼ ਸਰਵਰ ਨੂੰ ਨਹੀਂ ਭੇਜੀ ਜਾਂਦੀ, ਜੋ ਇਸਨੂੰ ਸਕ੍ਰੀਨਸ਼ੌਟ, ID ਦਸਤਾਵੇਜ਼ਾਂ, ਅਤੇ ਅੰਦਰੂਨੀ ਚਿੱਤਰਾਂ ਲਈ ਸੁਰੱਖਿਅਤ ਬਣਾਉਂਦਾ ਹੈ।

Base64 ਆਉਟਪੁੱਟ ਮੇਰੀ ਮੂਲ ਤਸਵੀਰ ਨਾਲੋਂ ਵੱਡਾ ਕਿਉਂ ਹੈ?

Base64 ਬਾਈਨਰੀ ਡੇਟਾ ਦੇ ਹਰ ਤਿੰਨ ਬਾਈਟ ਨੂੰ ਚਾਰ ASCII ਅੱਖਰਾਂ ਨਾਲ ਦਰਸਾਉਂਦਾ ਹੈ, ਇਸ ਲਈ ਏਨਕੋਡ ਕੀਤਾ ਟੈਕਸਟ ਮੂਲ ਫਾਈਲ ਨਾਲੋਂ ਲਗਭਗ 33% ਵੱਡਾ ਹੁੰਦਾ ਹੈ। ਇਸ ਪੰਨੇ ਤੇ data URI ਆਕਾਰ ਰੀਡਆਊਟ ਠੀਕ ਵਧੀ ਲੰਬਾਈ ਦਿਖਾਉਂਦਾ ਹੈ। ਇਹੀ ਓਵਰਹੈੱਡ ਕਾਰਨ ਹੈ ਕਿ data URI ਕੇਵਲ ਛੋਟੀਆਂ ਤਸਵੀਰਾਂ ਲਈ ਅਰਥ ਰੱਖਦਾ ਹੈ — 2 MB ਫੋਟੋ ਇਨਲਾਈਨ ਕਰਨ ਨਾਲ ਤੁਹਾਡਾ HTML ਜਾਂ CSS ਇੱਕ ਵੱਖਰੀ ਬੇਨਤੀ ਨਾਲੋਂ ਕਿਤੇ ਵੱਧ ਫੁੱਲ ਜਾਵੇਗਾ। ਆਮ ਅਸੂਲ ਵਜੋਂ, ਲਗਭਗ 4 KB ਤੋਂ ਹੇਠਾਂ ਦੀਆਂ ਤਸਵੀਰਾਂ ਇਨਲਾਈਨ ਕਰੋ ਅਤੇ ਇਸ ਤੋਂ ਵੱਡੀ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਨੂੰ ਲਿੰਕ ਕਰੋ।

ਮੈਂ ਕਿਹੜੇ ਤਸਵੀਰ ਫਾਰਮੈਟ ਬਦਲ ਸਕਦਾ ਹਾਂ?

ਜੋ ਵੀ ਫਾਰਮੈਟ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਤਸਵੀਰ ਵਜੋਂ ਪਛਾਣਦਾ ਹੈ ਉਹ ਕੰਮ ਕਰਦਾ ਹੈ, ਕਿਉਂਕਿ ਸਾਧਨ ਤਸਵੀਰ ਨੂੰ ਡੀਕੋਡ ਕਰਨ ਦੀ ਥਾਂ ਕੱਚੇ ਬਾਈਟ ਪੜ੍ਹਦਾ ਹੈ। ਇਸ ਵਿੱਚ PNG, JPEG, GIF, WebP, SVG, ਅਤੇ BMP ਸ਼ਾਮਲ ਹਨ। MIME ਕਿਸਮ ਸਿੱਧੇ ਫਾਈਲ ਤੋਂ ਪੜ੍ਹੀ ਜਾਂਦੀ ਹੈ, ਇਸ ਲਈ data: ਪ੍ਰੀਫਿਕਸ ਹਮੇਸ਼ਾ ਅਸਲ ਫਾਰਮੈਟ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ — JPEG data:image/jpeg ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ SVG data:image/svg+xml ਬਣਾਉਂਦਾ ਹੈ। SVG ਖਾਸ ਧਿਆਨ ਦੇ ਯੋਗ ਹੈ: ਇਹ ਪਹਿਲਾਂ ਹੀ ਟੈਕਸਟ ਹੈ, ਇਸ ਲਈ SVG ਲਈ URL-ਏਨਕੋਡ ਕੀਤਾ data URI ਅਕਸਰ Base64 ਸੰਸਕਰਣ ਨਾਲੋਂ ਛੋਟਾ ਹੁੰਦਾ ਹੈ, ਹਾਲਾਂਕਿ ਇਹ ਸਾਧਨ ਇਕਸਾਰਤਾ ਲਈ Base64 ਰੂਪ ਦਿੰਦਾ ਹੈ।

ਇੱਕ ਤਸਵੀਰ ਪਾਓ, ਤੁਹਾਨੂੰ ਲੋੜੀਂਦਾ data URI ਜਾਂ ਸਨਿੱਪਟ ਕਾਪੀ ਕਰੋ, ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ HTML, CSS, ਜਾਂ ਈਮੇਲ ਟੈਂਪਲੇਟ ਵਿੱਚ ਪੇਸਟ ਕਰੋ। ਹਰ ਬਾਈਟ ਤੁਹਾਡੇ ਡਿਵਾਈਸ ਤੇ ਹੀ ਰਹਿੰਦਾ ਹੈ। ਕੋਈ ਅੱਪਲੋਡ ਨਹੀਂ, ਕੋਈ ਖਾਤਾ ਨਹੀਂ, ਕੋਈ ਸਰਵਰ ਰਾਉਂਡ-ਟ੍ਰਿਪ ਨਹੀਂ।