ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਿਤ ਤਸਵੀਰ ਕਨਵਰਜ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ
ਹਰ ਕਨਵਰਜ਼ਨ ਪੂਰੀ ਤਰ੍ਹਾਂ JavaScript ਵਿੱਚ ਚੱਲਣ ਵਾਲੀ ਚਾਰ-ਕਦਮ ਪਾਈਪਲਾਈਨ ਹੈ। ਕੋਈ ਕੋਡੈਕ ਲਾਇਬ੍ਰੇਰੀ ਡਾਊਨਲੋਡ ਨਹੀਂ ਹੁੰਦੀ ਅਤੇ ਕੋਈ ਸਰਵਰ ਸ਼ਾਮਲ ਨਹੀਂ ਹੁੰਦਾ। ਬ੍ਰਾਊਜ਼ਰ ਦੀ Canvas API ਮੈਮੋਰੀ ਵਿੱਚ ਡੀਕੋਡ, ਆਕਾਰ ਬਦਲਣਾ ਅਤੇ ਦੁਬਾਰਾ-ਏਨਕੋਡ ਸੰਭਾਲਦੀ ਹੈ।
- ਹਰ ਅੱਪਲੋਡ ਕੀਤੀ ਫਾਈਲ ਨੂੰ Blob ਵਜੋਂ ਪੜ੍ਹੋ ਅਤੇ ਇੱਕ ਆਬਜੈਕਟ URL ਬਣਾਓ ਤਾਂ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ ਸਥਾਨਕ ਤੌਰ ਤੇ ਡੀਕੋਡ ਕਰ ਸਕੇ, ਬਾਈਟਾਂ ਨੂੰ ਸਰਵਰ ਤੇ ਕਾਪੀ ਕੀਤੇ ਜਾਂ ਡਿਸਕ ਤੇ ਜਾਰੀ ਰੱਖੇ ਬਿਨਾਂ।
- ਡੀਕੋਡ ਕੀਤੀ ਤਸਵੀਰ ਨੂੰ ਇੱਕ ਆਫਸਕ੍ਰੀਨ Canvas ਏਲੀਮੈਂਟ ਤੇ ਖਿੱਚੋ, ਅਸਲ ਆਸਪੈਕਟ ਰੇਸ਼ੋ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਦੇ ਹੋਏ ਕੋਈ ਵੀ ਆਕਾਰ ਸੀਮਾ ਲਾਗੂ ਕਰੋ। ਜੇ ਤੁਸੀਂ ਵੱਧ ਤੋਂ ਵੱਧ ਚੌੜਾਈ ਜਾਂ ਵੱਧ ਤੋਂ ਵੱਧ ਆਯਾਮ ਚੁਣਿਆ ਹੈ, ਤਾਂ ਇੱਥੇ ਹੀ ਡਾਊਨਸਕੇਲ ਹੁੰਦਾ ਹੈ।
- ਪਿਕਸਲ ਦੁਬਾਰਾ-ਏਨਕੋਡ ਕਰਨ ਲਈ
canvas.toBlob(callback, targetMimeType, quality)ਕਾਲ ਕਰੋ। PNG ਆਉਟਪੁੱਟ ਹਮੇਸ਼ਾ ਨੁਕਸਾਨ-ਰਹਿਤ ਹੈ; JPEG ਅਤੇ WebP ਗੁਣਵੱਤਾ ਸਲਾਈਡਰ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ। - ਆਉਟਪੁੱਟ ਮਾਪਾਂ ਅਤੇ ਫਾਈਲ ਆਕਾਰ ਨਾਲ ਪਹਿਲਾਂ/ਬਾਅਦ ਥੰਬਨੇਲ ਦਿਖਾਓ, ਫਿਰ ਪ੍ਰਤੀ-ਤਸਵੀਰ ਡਾਊਨਲੋਡ ਬਟਨ ਜਾਂ ਪੂਰੇ ਬੈਚ ਲਈ ਇੱਕ ZIP ਪੇਸ਼ ਕਰੋ। ZIP fflate ਵਰਤ ਕੇ ਮੈਮੋਰੀ ਵਿੱਚ ਬਣਦਾ ਹੈ, ਇੱਕ 8 KB ਲਾਇਬ੍ਰੇਰੀ ਜੋ ਪੂਰੀ ਤਰ੍ਹਾਂ ਟੈਬ ਵਿੱਚ ਚੱਲਦੀ ਹੈ।
ਤਸਵੀਰ ਫਾਰਮੈਟ ਕਿਉਂ ਬਦਲੋ?
- PNG ਤੋਂ WebP ਬਦਲਣ ਨਾਲ 0.8 ਗੁਣਵੱਤਾ ਤੇ ਕੋਈ ਦਿਸਣਯੋਗ ਗੁਣਵੱਤਾ ਨੁਕਸਾਨ ਤੋਂ ਬਿਨਾਂ ਆਮ ਤੌਰ ਤੇ ਫਾਈਲ ਆਕਾਰ 25 ਤੋਂ 35% ਘੱਟਦੇ ਹਨ, ਜੋ ਸਿੱਧੇ ਪੰਨੇ ਦਾ ਭਾਰ ਘਟਾਉਂਦਾ ਹੈ ਅਤੇ Core Web Vitals LCP ਸਕੋਰ ਸੁਧਾਰਦਾ ਹੈ।
- PNG ਪਾਰਦਰਸ਼ਤਾ ਰੱਖਦਾ ਹੈ ਜਿੱਥੇ JPEG ਇਸਨੂੰ ਰੱਦ ਕਰਦਾ ਹੈ। PNG ਤੋਂ JPEG ਜਾਣ ਨਾਲ ਪਾਰਦਰਸ਼ੀ ਪਿਕਸਲ ਚਿੱਟੇ ਪਿਛੋਕੜ ਤੇ ਰੈਂਡਰ ਹੁੰਦੇ ਹਨ, ਜੋ ਕਿ ਉਦੋਂ ਸਹੀ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਮੰਜ਼ਿਲ PNG ਸਵੀਕਾਰ ਨਹੀਂ ਕਰਦੀ।
- ਸੋਸ਼ਲ ਪਲੇਟਫਾਰਮਾਂ ਅਤੇ ਇਸ਼ਤਿਹਾਰ ਨੈੱਟਵਰਕਾਂ ਦੀਆਂ ਸਖ਼ਤ ਫਾਰਮੈਟ ਲੋੜਾਂ ਹੁੰਦੀਆਂ ਹਨ। Facebook ਅਤੇ LinkedIn ਫੋਟੋ ਅੱਪਲੋਡਾਂ ਲਈ JPEG ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹਨ, Twitter ਦੀ OG ਪ੍ਰੀਵਿਊ ਪਾਈਪਲਾਈਨ WebP ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੀ ਹੈ, ਅਤੇ ਕੁਝ ਪ੍ਰੋਗਰਾਮੈਟਿਕ ਐਡ ਸਰਵਰ ਅਜਿਹੀ ਕੋਈ ਵੀ ਚੀਜ਼ ਰੱਦ ਕਰ ਦਿੰਦੇ ਹਨ ਜੋ JPEG ਨਾ ਹੋਵੇ। ਅੱਪਲੋਡ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਤੇਜ਼ ਕਨਵਰਜ਼ਨ ਪਾਸ ਰੱਦ-ਕ੍ਰਿਏਟਿਵ ਪਿੰਗ-ਪੌਂਗ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ।
- ਮਿਸ਼ਰਿਤ-ਫਾਰਮੈਟ ਤਸਵੀਰਾਂ ਦੇ ਬੈਚ ਨੂੰ CMS ਜਾਂ DAM ਤੇ ਅੱਪਲੋਡ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਆਉਟਪੁੱਟ ਫਾਰਮੈਟ ਵਿੱਚ ਮਿਆਰੀਕਰਣ ਕਰਨਾ ਇਨਜੈਸਟ ਪਾਈਪਲਾਈਨ ਤੋਂ ਫਾਰਮੈਟ-ਸੰਭਾਲਣ ਦੀਆਂ ਸ਼ਾਖਾਵਾਂ ਹਟਾਉਂਦਾ ਹੈ।
ਆਮ ਵਰਤੋਂਆਂ
ਫਾਰਮੈਟ ਕਨਵਰਜ਼ਨ ਉਦੋਂ ਆਉਂਦੀ ਹੈ ਜਦੋਂ ਸਰੋਤ ਫਾਰਮੈਟ ਅਤੇ ਮੰਜ਼ਿਲ ਦੀਆਂ ਉਮੀਦਾਂ ਮੇਲ ਨਹੀਂ ਖਾਂਦੀਆਂ।
- Shopify ਜਾਂ WooCommerce ਸਟੋਰ ਲਈ ਉਤਪਾਦ ਫੋਟੋਆਂ ਤਿਆਰ ਕਰਨਾ। JPEG ਅਸਲ ਜਨਤਕ ਸਟੋਰਫ੍ਰੰਟ ਲਈ 0.85 ਗੁਣਵੱਤਾ ਤੇ WebP ਵਿੱਚ ਬਦਲੇ ਜਾਂਦੇ ਹਨ, ਜਦਕਿ PNG ਕਾਪੀਆਂ ਪ੍ਰਿੰਟ-ਤਿਆਰ ਨਿਰਯਾਤ ਲਈ ਰੱਖੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।
- ਡਿਜ਼ਾਈਨਰ-ਸਪਲਾਈ PNG ਨਿਰਯਾਤ ਨੂੰ React ਜਾਂ Next.js ਬਿਲਡ ਵਿੱਚ ਦਾਖਲ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ JPEG ਜਾਂ WebP ਵਿੱਚ ਬਦਲਣਾ। ਫ੍ਰੇਮਵਰਕ ਦੀ ਤਸਵੀਰ ਪਾਈਪਲਾਈਨ ਇੱਕ ਛੋਟਾ ਸਰੋਤ ਚੁੱਕਦੀ ਹੈ।
- QA ਰਨ ਤੋਂ ਸਕ੍ਰੀਨਸ਼ੌਟਾਂ ਦੇ ਫੋਲਡਰ ਦੀ ਬੈਚ-ਪ੍ਰੋਸੈਸਿੰਗ। 0.9 ਗੁਣਵੱਤਾ ਤੇ PNG ਤੋਂ JPEG ਆਮ ਤੌਰ ਤੇ 50-ਸਕ੍ਰੀਨਸ਼ੌਟ ਆਰਕਾਈਵ ਲਗਭਗ 120 MB ਤੋਂ 20 MB ਤੋਂ ਘੱਟ ਕਰਦਾ ਹੈ।
ਕੰਮ ਕੀਤੀ ਉਦਾਹਰਣ: 2 MB PNG ਤੋਂ 300 KB WebP
2400×1600 ਪਿਕਸਲ ਦਾ 2 MB PNG ਹੀਰੋ ਤਸਵੀਰ ਮਾਰਕੀਟਿੰਗ ਲੈਂਡਿੰਗ ਪੰਨਿਆਂ ਤੇ ਇੱਕ ਆਮ ਪੇਲੋਡ ਹੈ। ਇਹ ਕਨਵਰਜ਼ਨ ਅਸਲ ਪੰਨੇ ਤੇ ਕੀ ਬਚਾਉਂਦੀ ਹੈ ਇਸਦਾ ਇੱਕ ਚੰਗਾ ਮਾਪਦੰਡ ਹੈ।
PNG ਅੱਪਲੋਡ ਜ਼ੋਨ ਵਿੱਚ ਪਾਓ, WebP ਟਾਰਗੇਟ ਫਾਰਮੈਟ ਚੁਣੋ, ਗੁਣਵੱਤਾ 0.8 ਤੇ ਸੈੱਟ ਕਰੋ, ਅਤੇ ਪਿਕਸਲ ਮਾਪ ਅੱਧੇ ਕਰਨ ਲਈ ਵੱਧ ਤੋਂ ਵੱਧ ਚੌੜਾਈ 1200 ਸੈੱਟ ਕਰੋ। Canvas ਪਾਈਪਲਾਈਨ ਤਸਵੀਰ 1200×800 ਤੇ ਆਸਪੈਕਟ ਰੱਖਦੇ ਹੋਏ ਖਿੱਚਦੀ ਹੈ, ਫਿਰ WebP ਵਿੱਚ ਦੁਬਾਰਾ-ਏਨਕੋਡ ਕਰਦੀ ਹੈ। ਆਉਟਪੁੱਟ ਕਾਰਡ ਨਤੀਜਾ ਦਿਖਾਉਂਦਾ ਹੈ, ਆਮ ਤੌਰ ਤੇ 280 ਤੋਂ 320 KB ਰੇਂਜ ਵਿੱਚ — ਅਸਲ ਦੇ ਮੁਕਾਬਲੇ ਲਗਭਗ 85% ਕਮੀ। ਸਿੰਗਲ ਫਾਈਲ ਲੈਣ ਲਈ ਕਾਰਡ ਤੇ ਡਾਊਨਲੋਡ ਕਲਿੱਕ ਕਰੋ, ਜਾਂ ਕਈ ਤਸਵੀਰਾਂ ਬਦਲੀਆਂ ਹੋਣ ਤਾਂ ਡਾਊਨਲੋਡ .zip ਕਲਿੱਕ ਕਰੋ।
ਕਿਹੜੇ ਫਾਰਮੈਟ ਸਮਰਥਿਤ ਹਨ?
ਇਨਪੁੱਟ ਪਾਸੇ, ਬ੍ਰਾਊਜ਼ਰ ਜੋ ਵੀ ਡੀਕੋਡ ਕਰ ਸਕਦਾ ਹੈ ਸਵੀਕਾਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ: PNG, JPEG, WebP, GIF, ਅਤੇ BMP ਵਰਚੁਅਲ ਤੌਰ ਤੇ ਹਰ ਫਾਈਲ ਕਵਰ ਕਰਦੇ ਹਨ। ਆਉਟਪੁੱਟ ਫਾਰਮੈਟ PNG (ਹਮੇਸ਼ਾ ਨੁਕਸਾਨ-ਰਹਿਤ), JPEG, ਅਤੇ WebP ਹਨ। AVIF ਆਉਟਪੁੱਟ ਹਾਲੇ ਸਮਰਥਿਤ ਨਹੀਂ ਕਿਉਂਕਿ Canvas API ਦਾ AVIF ਏਨਕੋਡਰ ਕੇਵਲ Chrome 105 ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਮੌਜੂਦ ਹੈ।
ਕੀ ਇਹ ਮੇਰੇ ਡਿਵਾਈਸ ਤੇ ਹੁੰਦਾ ਹੈ?
ਹਾਂ, ਪੂਰੀ ਤਰ੍ਹਾਂ। ਪੰਨਾ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਮੂਲ Canvas API ਅਤੇ Web File API ਵਰਤ ਕੇ ਹਰ ਤਸਵੀਰ ਨੂੰ ਮੈਮੋਰੀ ਵਿੱਚ ਡੀਕੋਡ ਅਤੇ ਮੁੜ-ਏਨਕੋਡ ਕਰਦਾ ਹੈ। ਕੋਈ ਤਸਵੀਰ ਡੇਟਾ ਸਰਵਰ ਨੂੰ ਨਹੀਂ ਭੇਜਿਆ ਜਾਂਦਾ, ਕੋਈ ਅਸਥਾਈ ਅੱਪਲੋਡ ਨਹੀਂ, ਕੋਈ ਕਲਾਊਡ ਰਾਉਂਡ-ਟ੍ਰਿਪ ਨਹੀਂ। ਤੁਸੀਂ ਖੁਦ ਇਸਦੀ ਪੁਸ਼ਟੀ ਕਰ ਸਕਦੇ ਹੋ: DevTools ਖੋਲ੍ਹੋ, Network ਪੈਨਲ ਤੇ ਜਾਓ, ਅਤੇ ਇੱਕ ਕਨਵਰਜ਼ਨ ਚਲਾਓ। ਤੁਹਾਨੂੰ ਜੋ ਇਕੱਲੀਆਂ ਆਊਟਬਾਊਂਡ ਬੇਨਤੀਆਂ ਦਿਖਾਈ ਦੇਣਗੀਆਂ ਉਹ ਹਨ ਸ਼ੁਰੂਆਤੀ ਪੰਨਾ ਲੋਡ ਅਤੇ ਇਸ਼ਤਿਹਾਰ ਕਾਲਾਂ। ਤਸਵੀਰ-ਆਕਾਰ ਵਾਲੀ ਕੋਈ ਚੀਜ਼ ਟੈਬ ਤੋਂ ਬਾਹਰ ਨਹੀਂ ਜਾਂਦੀ।
PNG ਅਤੇ JPEG ਵਿਚਕਾਰ ਗੁਣਵੱਤਾ ਸਮਝੌਤਾ ਕੀ ਹੈ?
PNG ਇੱਕ ਨੁਕਸਾਨ-ਰਹਿਤ ਫਾਰਮੈਟ ਹੈ। ਹਰ ਪਿਕਸਲ ਏਨਕੋਡ ਚੱਕਰ ਵਿੱਚ ਬਿਲਕੁਲ ਉਸੇ ਤਰ੍ਹਾਂ ਬਚਦਾ ਹੈ, ਜੋ PNG ਨੂੰ ਸਕ੍ਰੀਨਸ਼ੌਟਾਂ, UI ਕੈਪਚਰਾਂ, ਅਤੇ ਤਿੱਖੇ ਕਿਨਾਰਿਆਂ ਜਾਂ ਵੱਡੇ ਸਮਤਲ-ਰੰਗ ਖੇਤਰਾਂ ਵਾਲੀ ਕਿਸੇ ਵੀ ਤਸਵੀਰ ਲਈ ਸਹੀ ਚੋਣ ਬਣਾਉਂਦਾ ਹੈ। JPEG DCT ਕੰਪ੍ਰੈਸ਼ਨ ਵਰਤਦਾ ਹੈ ਅਤੇ ਬਾਰੀਕ ਵੇਰਵੇ ਨੂੰ ਰੱਦ ਕਰਦਾ ਹੈ ਜੋ ਅੱਖ ਘੱਟ ਹੀ ਨੋਟ ਕਰਦੀ ਹੈ, ਜੋ ਇਸਨੂੰ ਫੋਟੋਗ੍ਰਾਫਾਂ ਲਈ ਸਹੀ ਚੋਣ ਬਣਾਉਂਦਾ ਹੈ। ਗੁਣਵੱਤਾ 0.8 ਇੱਕ ਆਮ ਮਿੱਠਾ ਸਥਾਨ ਹੈ ਜਿੱਥੇ ਅਸਲ ਤੋਂ ਦ੍ਰਿਸ਼ਟੀਗਤ ਫਰਕ ਨੂੰ ਪਛਾਣਨਾ ਔਖਾ ਹੁੰਦਾ ਹੈ ਪਰ ਫਾਈਲ PNG ਸਮਕੱਖ ਨਾਲੋਂ 4 ਤੋਂ 6 ਗੁਣਾ ਛੋਟੀ ਹੋ ਜਾਂਦੀ ਹੈ। WebP ਨੁਕਸਾਨ-ਰਹਿਤ ਅਤੇ ਨੁਕਸਾਨ-ਸਹਿਤ ਦੋਵਾਂ ਮੋਡਾਂ ਵਿੱਚ ਕੰਮ ਕਰ ਸਕਦਾ ਹੈ; ਇੱਥੇ ਗੁਣਵੱਤਾ ਸਲਾਈਡਰ ਨੁਕਸਾਨ-ਸਹਿਤ ਏਨਕੋਡਰ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ, ਅਤੇ ਗੁਣਵੱਤਾ 0.85 ਤੇ WebP ਆਮ ਤੌਰ ਤੇ ਕੁਦਰਤੀ-ਫੋਟੋ ਸਮੱਗਰੀ ਉੱਤੇ JPEG ਨੂੰ 25 ਤੋਂ 30% ਤੱਕ ਮਾਤ ਦਿੰਦਾ ਹੈ।
AVIF ਸਮਰਥਨ ਕਦੋਂ ਆਵੇਗਾ?
canvas.toBlob(…, 'image/avif') ਰਾਹੀਂ AVIF ਏਨਕੋਡਿੰਗ ਅੱਜ ਕੇਵਲ Chrome 105 ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਕੰਮ ਕਰਦੀ ਹੈ; Safari ਅਤੇ Firefox ਇਸਨੂੰ ਮੂਲ ਰੂਪ ਵਿੱਚ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ। v1.1 ਰਿਲੀਜ਼ ਇੱਕ ਹਲਕੇ WebAssembly ਏਨਕੋਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ opt-in AVIF ਮਾਰਗ ਜੋੜੇਗੀ। ਉਦੋਂ ਤੱਕ, AVIF ਵਿਕਲਪ 'ਜਲਦੀ ਆਉਂਦਾ ਹੈ' ਵਜੋਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਅਤੇ WebP ਏਨਕੋਡਰ ਤਰਜੀਹੀ ਵਿਕਲਪ ਹੈ।
ਤਸਵੀਰਾਂ ਪਾਓ, ਫਾਰਮੈਟ ਚੁਣੋ, ਬਦਲੋ। ਸਭ ਕੁਝ ਤੁਹਾਡੀ ਟੈਬ ਵਿੱਚ ਚੱਲਦਾ ਹੈ। ਕੋਈ ਅੱਪਲੋਡ, ਕੋਈ ਖਾਤਾ, ਸਰਵਰ ਕਤਾਰ ਦੀ ਕੋਈ ਉਡੀਕ ਨਹੀਂ।