🛠️

Whiz Tools

Build • Create • Innovate

ਬੇਸ64 ਚਿੱਤਰ ਡਿਕੋਡਰ ਅਤੇ ਵੇਖਣ ਵਾਲਾ | ਬੇਸ64 ਨੂੰ ਚਿੱਤਰਾਂ ਵਿੱਚ ਬਦਲੋ

ਬੇਸ64-ਕੋਡਿਤ ਚਿੱਤਰ ਸਤਰਾਂ ਨੂੰ ਤੁਰੰਤ ਡਿਕੋਡ ਅਤੇ ਪ੍ਰੀਵਿਊ ਕਰੋ। ਗਲਤ ਇਨਪੁੱਟ ਲਈ ਗਲਤੀ ਸੰਭਾਲਣ ਦੇ ਨਾਲ JPEG, PNG, GIF ਅਤੇ ਹੋਰ ਆਮ ਫਾਰਮੈਟਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ।

ਬੇਸ64 ਚਿੱਤਰ ਡਿਕੋਡਰ ਅਤੇ ਦੇਖਣ ਵਾਲਾ

ਇੱਕ ਬੇਸ64 ਕੋਡਿਤ ਚਿੱਤਰ ਸਤਰ ਪੇਸਟ ਕਰੋ ਅਤੇ ਚਿੱਤਰ ਦੇਖਣ ਲਈ ਇਸਨੂੰ ਡਿਕੋਡ ਕਰੋ।

ਚਿੱਤਰ ਪ੍ਰੀਵਿਊ

ਦਿਖਾਉਣ ਲਈ ਕੋਈ ਚਿੱਤਰ ਨਹੀਂ। ਇਸਨੂੰ ਡਿਕੋਡ ਕਰਨ ਲਈ ਇੱਕ ਬੇਸ64 ਸਤਰ ਪੇਸਟ ਕਰੋ।

JPEG, PNG, GIF ਅਤੇ ਹੋਰ ਆਮ ਚਿੱਤਰ ਫਾਰਮੈਟਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ।

ਹਦਾਇਤਾਂ

1. ਉੱਪਰ ਦਿੱਤੇ ਗਏ ਟੈਕਸਟ ਖੇਤਰ ਵਿੱਚ ਇੱਕ ਬੇਸ64 ਕੋਡਿਤ ਚਿੱਤਰ ਸਤਰ ਪੇਸਟ ਕਰੋ।

2. ਜਦੋਂ ਤੁਸੀਂ ਟਾਈਪ ਕਰਦੇ ਹੋ, ਚਿੱਤਰ ਆਪਣੇ ਆਪ ਡਿਕੋਡ ਹੋ ਜਾਵੇਗਾ, ਜਾਂ 'ਚਿੱਤਰ ਡਿਕੋਡ ਕਰੋ' ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ।

3. ਡਿਕੋਡ ਕੀਤਾ ਗਿਆ ਚਿੱਤਰ ਹੇਠਾਂ ਦੇ ਪ੍ਰੀਵਿਊ ਖੇਤਰ ਵਿੱਚ ਦਿਖਾਈ ਦੇਵੇਗਾ।

ਨੋਟ: ਸਭ ਤੋਂ ਵਧੀਆ ਨਤੀਜਿਆਂ ਲਈ, ਸਤਰ ਦਾ ਸ਼ੁਰੂ 'data:image/' ਨਾਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਪਰ ਇਹ ਟੂਲ ਇਸ ਪੂਰਵਪਦ ਦੇ ਬਿਨਾਂ ਸਤਰਾਂ ਨੂੰ ਵੀ ਡਿਕੋਡ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੇਗਾ।

📚

ਦਸਤਾਵੇਜ਼

Base64 ਚਿੱਤਰ ਡਿਕੋਡਰ ਅਤੇ ਦੇਖਣ ਵਾਲਾ

ਪਰਿਚਯ

Base64 ਇੱਕ ਬਾਇਨਰੀ-ਟੂ-ਟੈਕਸਟ ਐਨਕੋਡਿੰਗ ਸਕੀਮ ਹੈ ਜੋ ਬਾਇਨਰੀ ਡਾਟਾ ਨੂੰ ਇੱਕ ASCII ਸਤਰ ਫਾਰਮੈਟ ਵਿੱਚ ਦਰਸਾਉਂਦੀ ਹੈ। ਇਹ ਆਮ ਤੌਰ 'ਤੇ HTML, CSS, JavaScript, JSON ਅਤੇ ਹੋਰ ਟੈਕਸਟ-ਅਧਾਰਿਤ ਫਾਰਮੈਟਾਂ ਵਿੱਚ ਚਿੱਤਰ ਡਾਟਾ ਨੂੰ ਸਿੱਧਾ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ ਜਿੱਥੇ ਬਾਇਨਰੀ ਡਾਟਾ ਸਿੱਧਾ ਸ਼ਾਮਲ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ। ਇਹ ਸੰਦ ਤੁਹਾਨੂੰ base64-ਐਨਕੋਡ ਕੀਤੇ ਚਿੱਤਰ ਸਤਰਾਂ ਨੂੰ ਡਿਕੋਡ ਕਰਨ ਅਤੇ ਨਤੀਜੇ ਵਾਲੇ ਚਿੱਤਰਾਂ ਨੂੰ ਸਿੱਧਾ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਦੇਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

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

ਸਾਡਾ Base64 ਚਿੱਤਰ ਡਿਕੋਡਰ ਸੰਦ ਇੱਕ ਸਧਾਰਣ ਇੰਟਰਫੇਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ base64-ਐਨਕੋਡ ਕੀਤੇ ਚਿੱਤਰ ਸਤਰ ਨੂੰ ਪੇਸਟ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਤੁਰੰਤ ਡਿਕੋਡ ਕੀਤੇ ਚਿੱਤਰ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ। ਇਹ ਸਾਰੇ ਆਮ ਚਿੱਤਰ ਫਾਰਮੈਟਾਂ ਨੂੰ ਸਮਰਥਨ ਦਿੰਦਾ ਹੈ ਜਿਵੇਂ JPEG, PNG, GIF, WebP, ਅਤੇ SVG, ਅਤੇ ਇਹ ਦੋਹਾਂ ਡਾਟਾ URL ਫਾਰਮੈਟ (ਜਿਸ ਵਿੱਚ data:image/... ਪ੍ਰੀਫਿਕਸ ਹੁੰਦਾ ਹੈ) ਅਤੇ ਕੱਚੇ base64 ਸਤਰਾਂ ਨੂੰ ਸੰਭਾਲ ਸਕਦਾ ਹੈ।

ਤਕਨੀਕੀ ਵੇਰਵੇ

Base64 ਐਨਕੋਡਿੰਗ ਫਾਰਮੈਟ

Base64 ਐਨਕੋਡਿੰਗ ਬਾਇਨਰੀ ਡਾਟਾ ਨੂੰ 64 ASCII ਅੱਖਰਾਂ (A-Z, a-z, 0-9, +, ਅਤੇ /) ਦੇ ਸੈਟ ਵਿੱਚ ਬਦਲਦੀ ਹੈ, ਜਿਸ ਵਿੱਚ = ਪੈਡਿੰਗ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਵੈੱਬ 'ਤੇ ਚਿੱਤਰਾਂ ਲਈ, base64 ਡਾਟਾ ਆਮ ਤੌਰ 'ਤੇ ਡਾਟਾ URL ਦੇ ਰੂਪ ਵਿੱਚ ਫਾਰਮੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਿਸ ਦੀ ਹੇਠਾਂ ਦਿੱਤੀ ਰਚਨਾ ਹੁੰਦੀ ਹੈ:

1data:[<media type>][;base64],<data>
2

ਉਦਾਹਰਨ ਲਈ, ਇੱਕ base64-ਐਨਕੋਡ ਕੀਤੀ PNG ਚਿੱਤਰ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇ ਸਕਦੀ ਹੈ:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

ਇਸ ਫਾਰਮੈਟ ਦੇ ਅੰਗ ਹਨ:

  • data: - URL ਸਕੀਮ
  • image/png - ਡਾਟਾ ਦੀ MIME ਕਿਸਮ
  • ;base64 - ਐਨਕੋਡਿੰਗ ਪদ্ধਤੀ
  • , - ਹੈਡਰ ਅਤੇ ਡਾਟਾ ਵਿਚਕਾਰ ਇੱਕ ਡਿਲਿਮਟਰ
  • ਅਸਲ base64-ਐਨਕੋਡ ਕੀਤਾ ਡਾਟਾ

ਡਿਕੋਡਿੰਗ ਪ੍ਰਕਿਰਿਆ

ਜਦੋਂ base64 ਚਿੱਤਰ ਸਤਰ ਨੂੰ ਡਿਕੋਡ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਹੇਠਾਂ ਦਿੱਤੇ ਕਦਮ ਹੁੰਦੇ ਹਨ:

  1. ਸਤਰ ਨੂੰ ਪਾਰਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ ਇਹ ਪਤਾ ਲੱਗ ਸਕੇ ਕਿ ਕੀ ਇਸ ਵਿੱਚ ਕੋਈ ਡਾਟਾ URL ਪ੍ਰੀਫਿਕਸ ਹੈ
  2. ਜੇਕਰ ਕੋਈ ਪ੍ਰੀਫਿਕਸ ਮੌਜੂਦ ਹੈ, ਤਾਂ ਚਿੱਤਰ ਫਾਰਮੈਟ ਦਾ ਨਿਰਧਾਰਨ ਕਰਨ ਲਈ MIME ਕਿਸਮ ਨੂੰ ਕੱਢਿਆ ਜਾਂਦਾ ਹੈ
  3. base64 ਡਾਟਾ ਹਿੱਸਾ ਅਲੱਗ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਬਾਇਨਰੀ ਡਾਟਾ ਵਿੱਚ ਡਿਕੋਡ ਕੀਤਾ ਜਾਂਦਾ ਹੈ
  4. ਬਾਇਨਰੀ ਡਾਟਾ ਨੂੰ ਇੱਕ Blob ਜਾਂ ਇੱਕ ਪਦਾਰਥ URL ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਚਿੱਤਰ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ

ਜੇਕਰ ਇਨਪੁਟ ਵਿੱਚ ਕੋਈ ਡਾਟਾ URL ਪ੍ਰੀਫਿਕਸ ਨਹੀਂ ਹੈ, ਤਾਂ ਡਿਕੋਡਰ ਇਸਨੂੰ ਕੱਚੇ base64 ਡਾਟਾ ਵਜੋਂ ਸਮਝਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਅਤੇ ਡਿਕੋਡ ਕੀਤੇ ਬਾਇਨਰੀ ਹੈਡਰ ਤੋਂ ਚਿੱਤਰ ਕਿਸਮ ਦਾ ਅਨੁਮਾਨ ਲਗਾਉਂਦਾ ਹੈ ਜਾਂ PNG 'ਤੇ ਡਿਫਾਲਟ ਕਰਦਾ ਹੈ।

ਸਮਰਥਿਤ ਚਿੱਤਰ ਫਾਰਮੈਟ

ਇਹ ਸੰਦ ਸਾਰੇ ਆਮ ਵੈੱਬ ਚਿੱਤਰ ਫਾਰਮੈਟਾਂ ਨੂੰ ਸਮਰਥਨ ਦਿੰਦਾ ਹੈ:

ਫਾਰਮੈਟMIME ਕਿਸਮਆਮ ਵਰਤੋਂ ਦੇ ਕੇਸ
JPEGimage/jpegਫੋਟੋਜ਼, ਬਹੁਤ ਸਾਰੀਆਂ ਰੰਗਾਂ ਵਾਲੀਆਂ ਜਟਿਲ ਚਿੱਤਰਾਂ
PNGimage/pngਪਾਰਦਰਸ਼ਤਾ ਦੀ ਲੋੜ ਵਾਲੇ ਚਿੱਤਰ, ਸਕ੍ਰੀਨਸ਼ਾਟ, ਗ੍ਰਾਫਿਕਸ
GIFimage/gifਸਧਾਰਣ ਐਨੀਮੇਸ਼ਨ, ਸੀਮਿਤ ਰੰਗਾਂ ਵਾਲੇ ਚਿੱਤਰ
WebPimage/webpJPEG/PNG ਨਾਲੋਂ ਬਿਹਤਰ ਸੰਕੋਚਨ ਵਾਲਾ ਆਧੁਨਿਕ ਫਾਰਮੈਟ
SVGimage/svg+xmlਵੈਕਟਰ ਗ੍ਰਾਫਿਕਸ, ਸਕੇਲ ਕਰਨ ਯੋਗ ਆਈਕਾਨ ਅਤੇ ਚਿੱਤਰ

ਵਰਤੋਂ ਦੇ ਕੇਸ

Base64-ਐਨਕੋਡ ਕੀਤੇ ਚਿੱਤਰਾਂ ਦੇ ਕਈ ਪ੍ਰਯੋਗਸ਼ਾਲਾ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਲਾਗੂ ਕਰਨ ਦੀਆਂ ਸੰਭਾਵਨਾਵਾਂ ਹਨ:

  1. HTML/CSS/JS ਵਿੱਚ ਚਿੱਤਰ ਸ਼ਾਮਲ ਕਰਨਾ: ਛੋਟੇ ਚਿੱਤਰਾਂ ਨੂੰ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਸਿੱਧਾ ਸ਼ਾਮਲ ਕਰਕੇ HTTP ਬੇਨਤੀ ਘਟਾਉਂਦਾ ਹੈ, ਜੋ ਛੋਟੇ ਚਿੱਤਰਾਂ ਲਈ ਪੇਜ਼ ਲੋਡ ਸਮੇਂ ਨੂੰ ਸੁਧਾਰ ਸਕਦਾ ਹੈ।

  2. ਈਮੇਲ ਟੈਂਪਲੇਟ: ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਚਿੱਤਰ ਉਹਨਾਂ ਈਮੇਲ ਗ੍ਰਾਹਕਾਂ ਵਿੱਚ ਸਹੀ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਂਦੇ ਹਨ ਜੋ ਬਾਹਰੀ ਚਿੱਤਰਾਂ ਨੂੰ ਡਿਫਾਲਟ ਵਜੋਂ ਰੋਕਦੇ ਹਨ।

  3. ਇੱਕ ਫਾਈਲ ਐਪਲੀਕੇਸ਼ਨ: ਇੱਕ ਸਿੰਗਲ ਫਾਈਲ ਵਿੱਚ ਸਾਰੇ ਸਰੋਤਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਕੇ ਖੁਦ-ਸੰਕਲਿਤ HTML ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦਾ ਹੈ।

  4. API ਜਵਾਬ: ਚਿੱਤਰ ਡਾਟਾ ਨੂੰ ਸਿੱਧਾ JSON ਜਵਾਬਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਬਿਨਾਂ ਵੱਖਰੇ ਚਿੱਤਰ ਅੰਤ ਬਿੰਦੂ ਦੀ ਲੋੜ।

  5. CSS ਵਿੱਚ ਡਾਟਾ URIs: ਛੋਟੇ ਆਈਕਾਨਾਂ ਅਤੇ ਪਿਛੋਕੜ ਚਿੱਤਰਾਂ ਨੂੰ ਸਿੱਧਾ CSS ਫਾਈਲਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ।

  6. ਕੈਨਵਾਸ ਮੈਨਿਪੂਲੇਸ਼ਨ: ਕੈਨਵਾਸ ਚਿੱਤਰ ਡਾਟਾ ਨੂੰ ਸੁਰੱਖਿਅਤ ਅਤੇ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ।

  7. ਆਫਲਾਈਨ ਐਪਲੀਕੇਸ਼ਨ: ਚਿੱਤਰਾਂ ਨੂੰ localStorage ਜਾਂ IndexedDB ਵਿੱਚ ਟੈਕਸਟ ਸਤਰਾਂ ਵਜੋਂ ਸਟੋਰ ਕਰਦਾ ਹੈ।

ਕਾਰਗੁਜ਼ਾਰੀ ਦੇ ਵਿਚਾਰ

ਜਦੋਂ ਕਿ base64 ਐਨਕੋਡਿੰਗ ਸੁਵਿਧਾ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ, ਇਹ ਕੁਝ ਵਪਾਰਾਂ ਨਾਲ ਆਉਂਦੀ ਹੈ:

  • ਫਾਈਲ ਆਕਾਰ ਵਧਣਾ: Base64 ਐਨਕੋਡਿੰਗ ਡਾਟਾ ਆਕਾਰ ਨੂੰ ਲਗਭਗ 33% ਵਧਾਉਂਦੀ ਹੈ।
  • ਬ੍ਰਾਊਜ਼ਰ ਕੈਸ਼ਿੰਗ ਨਹੀਂ: ਸ਼ਾਮਲ ਕੀਤੇ ਚਿੱਤਰਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਕੈਸ਼ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਜਿਵੇਂ ਬਾਹਰੀ ਚਿੱਤਰ ਫਾਈਲਾਂ।
  • ਪਾਰਸਿੰਗ ਓਵਰਹੈੱਡ: ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਡਿਕੋਡਿੰਗ ਤੋਂ ਪਹਿਲਾਂ base64 ਸਤਰ ਨੂੰ ਡਿਕੋਡ ਕਰਨਾ ਪੈਂਦਾ ਹੈ।
  • ਰਖਰਖਾਵ ਦੀਆਂ ਚੁਣੌਤੀਆਂ: ਸ਼ਾਮਲ ਕੀਤੇ ਚਿੱਤਰਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨਾ ਵੱਖਰੇ ਫਾਈਲਾਂ ਦੇ ਮੁਕਾਬਲੇ ਵਿੱਚ ਮੁਸ਼ਕਲ ਹੁੰਦਾ ਹੈ।

ਉਤਕ੍ਰਿਸ਼ਟ ਕਾਰਗੁਜ਼ਾਰੀ ਲਈ, base64 ਐਨਕੋਡਿੰਗ ਆਮ ਤੌਰ 'ਤੇ ਛੋਟੇ ਚਿੱਤਰਾਂ (10KB ਤੋਂ ਘੱਟ) ਲਈ ਹੀ ਸੁਝਾਈ ਜਾਂਦੀ ਹੈ। ਵੱਡੇ ਚਿੱਤਰਾਂ ਨੂੰ ਆਮ ਤੌਰ 'ਤੇ ਵੱਖਰੇ ਫਾਈਲਾਂ ਵਜੋਂ ਸੇਵਾ ਦੇਣ ਲਈ ਬਿਹਤਰ ਹੁੰਦਾ ਹੈ ਜੋ ਸਹੀ ਤੌਰ 'ਤੇ ਕੈਸ਼ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।

ਵਿਕਲਪ

ਕਈ ਵਿਕਲਪ base64 ਐਨਕੋਡਿੰਗ ਦੇ ਵੱਖ-ਵੱਖ ਵਰਤੋਂ ਦੇ ਕੇਸਾਂ ਲਈ ਮੌਜੂਦ ਹਨ:

  1. SVG ਇਨਲਾਈਨ ਐਮਬੈੱਡਿੰਗ: ਵੈਕਟਰ ਗ੍ਰਾਫਿਕਸ ਲਈ, ਇਨਲਾਈਨ SVG ਬਹੁਤ ਸਾਰੇ base64-ਐਨਕੋਡ ਕੀਤੇ SVG ਨਾਲੋਂ ਬਿਹਤਰ ਕਾਰਗੁਜ਼ਾਰੀ ਅਤੇ ਲਚਕਦਾਰਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

  2. WebP ਅਤੇ ਆਧੁਨਿਕ ਚਿੱਤਰ ਫਾਰਮੈਟ: ਇਹ JPEG/PNG ਨਾਲੋਂ ਬਿਹਤਰ ਸੰਕੋਚਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।

  3. ਚਿੱਤਰ ਸਪ੍ਰਾਈਟ: ਕਈ ਛੋਟੇ ਚਿੱਤਰਾਂ ਨੂੰ ਇੱਕ ਹੀ ਫਾਈਲ ਵਿੱਚ ਜੋੜਨਾ ਅਤੇ CSS ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ।

  4. CDN (ਕੰਟੈਂਟ ਡਿਲਿਵਰੀ ਨੈਟਵਰਕ): ਉਤਪਾਦਨ ਸਾਈਟਾਂ ਲਈ, ਇੱਕ CDN ਤੋਂ ਅਨੁਕੂਲਿਤ ਚਿੱਤਰਾਂ ਨੂੰ ਸੇਵਾ ਦੇਣਾ ਅਕਸਰ ਵੱਧ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੁੰਦਾ ਹੈ।

  5. ਡਾਟਾ ਸੰਕੋਚਨ: ਵੱਡੇ ਬਾਇਨਰੀ ਡਾਟਾ ਦੇ ਪ੍ਰਸਾਰਣ ਲਈ, ਵਿਸ਼ੇਸ਼ ਸੰਕੋਚਨ ਅਲਗੋਰਿਦਮ ਜਿਵੇਂ gzip ਜਾਂ Brotli base64 ਨਾਲੋਂ ਵੱਧ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੁੰਦੇ ਹਨ।

ਕੋਡ ਉਦਾਹਰਣ

ਇੱਥੇ ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ base64-ਐਨਕੋਡ ਕੀਤੇ ਚਿੱਤਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਦੇ ਉਦਾਹਰਣ ਹਨ:

1// ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਚਿੱਤਰ ਨੂੰ base64 ਵਿੱਚ ਬਦਲਣਾ (ਬ੍ਰਾਊਜ਼ਰ)
2function imageToBase64(imgElement) {
3  const canvas = document.createElement('canvas');
4  canvas.width = imgElement.width;
5  canvas.height = imgElement.height;
6  
7  const ctx = canvas.getContext('2d');
8  ctx.drawImage(imgElement, 0, 0);
9  
10  // ਡਾਟਾ URL (base64 ਸਤਰ) ਦੇ ਤੌਰ 'ਤੇ ਪ੍ਰਾਪਤ ਕਰੋ
11  return canvas.toDataURL('image/png');
12}
13
14// ਇੱਕ base64 ਚਿੱਤਰ ਦਿਖਾਉਣਾ
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // ਡਾਟਾ URL ਪ੍ਰੀਫਿਕਸ ਨਾ ਹੋਣ ਵਾਲੇ ਸਤਰਾਂ ਨੂੰ ਸੰਭਾਲੋ
19  if (!base64String.startsWith('data:')) {
20    base64String = `data:image/png;base64,${base64String}`;
21  }
22  
23  img.src = base64String;
24  document.body.appendChild(img);
25}
26

HTML ਕਾਰਜਨਵਿਤਾ

ਇੱਥੇ base64 ਚਿੱਤਰ ਨੂੰ ਸਿੱਧਾ HTML ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦਾ ਤਰੀਕਾ ਹੈ:

1<!-- HTML ਵਿੱਚ ਸਿੱਧਾ base64 ਚਿੱਤਰ ਸ਼ਾਮਲ ਕਰਨਾ -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 encoded image">
3
4<!-- CSS ਵਿੱਚ base64 ਪਿਛੋਕੜ ਚਿੱਤਰ ਦੀ ਵਰਤੋਂ -->
5<style>
6.base64-bg {
7  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8  width: 100px;
9  height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13

ਇਤਿਹਾਸ

Base64 ਐਨਕੋਡਿੰਗ ਦੀਆਂ ਜੜਾਂ 1970 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਇਲੈਕਟ੍ਰਾਨਿਕ ਡਾਕ ਸਿਸਟਮਾਂ ਦੇ ਵਿਕਾਸ ਵਿੱਚ ਹਨ। ਇਹ ਬਾਇਨਰੀ ਡਾਟਾ ਨੂੰ ਸਿਰਫ ASCII ਟੈਕਸਟ ਦੇ ਰਾਹੀਂ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਦੇ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਬਣਾਈ ਗਈ ਸੀ।

ਐਨਕੋਡਿੰਗ ਸਕੀਮ ਨੂੰ 1987 ਵਿੱਚ RFC 989 ਦੇ ਪ੍ਰਕਾਸ਼ਨ ਨਾਲ ਫਾਰਮਲਾਈਜ਼ ਕੀਤਾ ਗਿਆ, ਜਿਸ ਨੇ ਪ੍ਰਾਈਵੇਸੀ ਐਨਹਾਂਸਡ ਮੇਲ (PEM) ਮਿਆਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ। ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ RFC 1421 ਅਤੇ ਹੋਰ ਸੰਬੰਧਿਤ ਮਿਆਰਾਂ ਵਿੱਚ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ। "base64" ਸ਼ਬਦ ਦਾ ਮਤਲਬ ਇਸ ਤੋਂ ਹੈ ਕਿ ਐਨਕੋਡਿੰਗ 64 ਵੱਖ-ਵੱਖ ASCII ਅੱਖਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ ਜੋ ਬਾਇਨਰੀ ਡਾਟਾ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ।

ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਸੰਦਰਭ ਵਿੱਚ, ਚਿੱਤਰਾਂ ਲਈ base64 ਐਨਕੋਡਿੰਗ 1998 ਵਿੱਚ ਡਾਟਾ URIs ਦੇ ਆਗਮਨ ਨਾਲ ਪ੍ਰਸਿੱਧ ਹੋਈ, ਜਿਸ ਨੇ HTML, CSS ਅਤੇ ਹੋਰ ਵੈੱਬ ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਸਿੱਧਾ ਬਾਇਨਰੀ ਡਾਟਾ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੱਤੀ।

2000 ਦੇ ਦਰਮਿਆਨ, ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ base64-ਐਨਕੋਡ ਕੀਤੇ ਚਿੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਵਧ ਗਈ ਜਦੋਂ ਵਿਕਾਸਕਾਰਾਂ ਨੇ HTTP ਬੇਨਤੀਆਂ ਨੂੰ ਘਟਾਉਣ ਅਤੇ ਛੋਟੇ ਚਿੱਤਰਾਂ ਲਈ ਪੇਜ਼ ਲੋਡ ਸਮੇਂ ਨੂੰ ਸੁਧਾਰਨ ਦੇ ਤਰੀਕੇ ਲੱਭੇ। ਇਹ ਤਕਨੀਕ ਖਾਸ ਤੌਰ 'ਤੇ ਮੋਬਾਈਲ ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਦੌਰਾਨ ਕਬੂਲ ਕੀਤੀ ਗਈ, ਜਿੱਥੇ ਹੌਲੀ ਮੋਬਾਈਲ ਕਨੈਕਸ਼ਨਾਂ 'ਤੇ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਬੇਨਤੀ ਘਟਾਉਣਾ ਮਹੱਤਵਪੂਰਨ ਸੀ।

ਅੱਜ, base64 ਐਨਕੋਡਿੰਗ ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਸੰਦ ਰਹਿੰਦੀ ਹੈ, ਹਾਲਾਂਕਿ ਇਸ ਦੀ ਵਰਤੋਂ ਹੁਣ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਛੋਟੇ, ਨਿਰਧਾਰਿਤ ਚਿੱਤਰਾਂ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਕਿ ਵੱਡੇ ਸਰੋਤਾਂ ਲਈ ਹੋਰ ਕੁਸ਼ਲ ਡਿਲਿਵਰੀ ਤਰੀਕੇ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।

ਹਵਾਲੇ

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN Web Docs: data URIs
  4. CSS-Tricks: Data URIs
  5. Base64 Image Encoder
  6. Can I Use: Data URIs
  7. Web Performance: When to Base64 Encode Images (and When Not To)
🔗

ਸੰਬੰਧਿਤ ਟੂਲ

ਹੋਰ ਟੂਲਾਂ ਦੀ ਖੋਜ ਕਰੋ ਜੋ ਤੁਹਾਡੇ ਕੰਮ ਦੇ ਪ੍ਰਵਾਹ ਲਈ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦੀਆਂ ਹਨ