Compress image to 50kb Script For Blogger
Compress Image to 50KB Script for Blogger

Namaste, doston! Want to make your Blogger/Blogspot blog load faster than a 5G Jio connection without spending a single paisa? Arre, you’re in the right place! In this post, we’re sharing a free script to compress images to 50KB, perfect for Indian bloggers who want to save time, boost SEO, and keep readers happy. No need for pricey software or complicated tools – this freebie is all you need!
Whether you’re blogging about spicy paneer recipes, Himalayan adventures, or tech hacks, this free image compression script will make your blog super-fast and user-friendly. It’s designed for desi bloggers who want to optimize their sites for readers in cities and villages alike, even on slow internet. Chalo, let’s dive into this free tool and see how it can take your Blogger game to the next level!
What is the Image Compression Script?
The Image Compression Script is a simple yet powerful tool designed specifically for Blogger/Blogspot users. It lets you compress images to 50KB or less without needing fancy software like Photoshop. Built using HTML and JavaScript, this script runs in your browser, making it super easy to use. You just upload an image, click a button, and boom – you get a compressed image ready to upload to your blog. It’s like having a personal image-compressing robot!
This script is a game-changer for Indian bloggers who want to optimize their blogs for speed and SEO. With Google prioritizing fast-loading websites, compressing images to 50KB ensures your blog doesn’t keep readers waiting. Plus, it’s free, easy to set up, and works like a charm for all types of blogs – from recipes to travel diaries.
Key Features
Why Compress Images to 50KB?
Arre, you might be wondering, “Bhai, why 50KB? Why not 100KB or 20KB?” Well, 50KB is like the perfect masala mix for your blog’s images. Here’s why:
- Faster Loading: Images under 50KB load quickly, even on slow internet connections, keeping your readers happy.
- SEO Boost: Google loves fast websites. Compressed images help improve your blog’s ranking on search results.
- Bandwidth Saver: For your readers using mobile data (especially in India), smaller images mean less data consumption.
- Storage Efficiency: Blogger stores images on Google Drive, which has limited space. 50KB images save storage for more posts.
- Balanced Quality: 50KB images look decent on most blogs without looking pixelated, perfect for thumbnails and featured images.
Whether you’re sharing a photo of a spicy paneer tikka or a scenic Himachal hill station, 50KB images strike the right balance between quality and speed.
How the Script Works
The script is built using HTML5 Canvas and JavaScript, making it super lightweight and easy to use. Here’s how it works in simple terms:
- You upload an image (JPEG, PNG, etc.) using the file input field.
- The script resizes the image to a maximum of 800x800 pixels while keeping the aspect ratio intact.
- It converts the image to JPEG format and reduces the quality step-by-step until the file size is 50KB or less.
- If the image can’t be compressed to 50KB without looking bad, it alerts you.
- Finally, it generates a download link for the compressed image, which you can upload to Blogger.
The script uses the HTML5 Canvas API to resize and compress the image, so it works entirely in your browser. No need to worry about server costs or complicated setups!
How to Install and Use the Image Compression Script
Ready to start compressing images like a pro? Here’s how to set up and use the script on your Blogger/Blogspot blog:
- Copy the Script: Copy the HTML and JavaScript code provided below. Save it as `compress.html` on your computer.
- Run Locally: Open the `compress.html` file in your browser (just double-click it). Upload an image, click “Compress Image,” and download the compressed version.
- Add to Blogger (Optional): To make it a tool on your blog, create a new page in Blogger, switch to HTML view, and paste the script. Publish the page, and your readers can use it too!
- Upload to Blogger: Use the compressed image in your blog posts by uploading it through the Blogger editor.
- Test and Share: Test the compressed images on your blog and share the tool with your blogging bhai-log!
Note: If Blogger strips the JavaScript due to security restrictions, host the script on a free service like GitHub Pages or Netlify and link to it from your blog.
The Image Compression Script
Here’s the complete script you can use to compress images to 50KB. Just copy it, save it as an HTML file, or add it to a Blogger page.
<h1>Compress Image to 50KB</h1> <style> img { width: -webkit-fill-available; } img#preview { width: 64%; } .new-container { width: 80%; margin: 0 auto; } #new-choose-btn { pointer-events: none; } #new-drop-zone { border: 3px dashed gray; border-color: #4CAF50; background-color: #f7f7f7; text-align: center; margin: 20px 0; min-height: 200px; position: relative; background-size: contain; background-repeat: no-repeat; background-position: center; overflow: hidden; transition: background-color 0.3s ease, border-color 0.3s ease; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; } #new-drop-zone:hover { background-color: #e0e0e0; border-color: #4CAF50; border: 2px solid gray; color: #333; cursor: pointer; transform: scale(1.01); } #new-drop-zone p { margin: 0; color: #999999; } #new-image-upload { display: none; } .new-image-preview-container { display: inline-block; position: relative; margin: 5px; padding: 5px; border: 1px solid #ccc; background-color: #ffffff; } .new-image-name, .new-file-info { margin-top: 5px; color: #666666; font-size: 12px; } .new-image-preview { max-width: 100px; max-height: 100px; } .new-remove-icon { position: absolute; top: -10px; right: -10px; background-color: red; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; } .new-remove-icon::before, .new-remove-icon::after { content: ''; position: absolute; width: 12px; height: 2px; background-color: white; } .new-remove-icon::before { transform: rotate(45deg); } .new-remove-icon::after { transform: rotate(-45deg); } .new-hidden { display: none; } .new-btn { background-color: #4CAF50; border: none; color: #fff; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .new-btn:hover { background-color: #95D332; } .new-add-btn { background-color: #4CAF50; border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 40px; text-align: center; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; margin-top: 10px; display: none; } .new-add-btn:hover { background-color: #95D332; transform: scale(1.1); } .new-custom-select { width: 100%; max-width: 80px; padding: 10px; border-radius: 10px; border: 1px solid #ccc; } .new-form-group { margin-bottom: 15px; } label { font-weight: bold; } input[type="number"], select { padding: 10px; border: 1px solid #ccc; border-radius: 5px; width: 100%; max-width: 150px; } .new-center { text-align: center; } .new-centered-image { max-width: 80%; max-height: 80%; margin: 20px auto; } .new-radio-container { display: flex; flex-direction: column; align-items: flex-start; } .new-radio-container label { display: flex; align-items: center; margin-bottom: 10px; } .new-radio-container input[type="radio"] { margin-right: 10px; margin-left: 200px; width: 20px; height: 20px; flex-shrink: 0; } #new-input-container { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; } #new-button-container { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } #new-download-links { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 20px; } .new-image-preview2 { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; margin: 5px; padding: 20px; border: 1px solid #ccc; background-color: #ffffff; border-radius: 5px; width: 150px; height: auto; min-height: 185px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); text-align: center; } .new-image-preview2 img { max-width: 100%; max-height: 120px; object-fit: cover; border-radius: 5px; } .new-file-info { margin-top: 10px; font-size: 14px; color: #333; text-align: center; } .new-file-info a { display: inline-block; margin-top: 5px; text-decoration: none; color: #007bff; font-weight: bold; } .new-file-info a:hover { color: #0056b3; } .new-clear-btn { background-color: #dc3545; color: white; padding: 10px 20px; border: none; cursor: pointer; text-align: center; display: none; } .new-clear-btn:hover { background-color: #c82333; } .new-download-all-container { text-align: center; } .new-progress-container { width: 100px; height: 100px; position: relative; margin: 0 auto; animation: rotate 2s linear infinite; display: none; } .new-rotate { display: block; } .new-progress-container * { text-align: left; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .new-progress-bar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 65%; clip: rect(0, 50px, 100px, 0); background-color: #4CAF50; } .new-progress-bar::before { content: ''; position: absolute; width: 80px; height: 80px; background-color: white; border-radius: 50%; top: 10px; left: 10px; } </style> <center> <form action='#' enctype='multipart/form-data' id='new-compression-form' method='post'> <div id='new-drop-zone' onclick='document.getElementById('new-image-upload').click();' ondragover='event.preventDefault()' ondrop='dropHandler(event)'> <p id='new-choose-text'>Click here or drag and drop an image file (or multiple files)<br/><br/></p> <input accept='image/*' id='new-image-upload' multiple='' name='image' onchange='previewImages(event)' type='file'/> <div id='new-image-preview-container'/> <button class='new-btn' id='new-choose-btn' type='button'>Choose Images</button> <button class='new-add-btn' id='new-add-btn' type='button'>+</button> </div> <div> <!-- Additional form content can go here --> </div> </form> <center> <div class='new-progress-container' id='new-progress-container'> <div class='new-progress-bar' id='new-progress-bar'/> </div> <div class='new-form-group'> <label for='new-size-input' id='new-size-label'>Size in KB:</label> <br/> <input id='new-size-input' min='1' required='' type='number' value='50'/> <br/> <label for='new-format'>Format:</label><br/> <select id='new-format' name='format'> <option value='jpeg'>JPEG</option> <option value='jpg'>JPG</option> <option value='png'>PNG</option> <option value='gif'>GIF</option> <option value='tiff'>TIFF</option> <option value='bmp'>BMP</option> <option value='webp'>WEBP</option> </select> <br/><br/> <button class='new-btn' id='new-increase-size-btn' type='button'>compress image to 50kb </button> </div> <div class='new-form-group' id='new-button-container'> <button class='new-clear-btn' id='new-clear-all-btn' type='button'>Clear All</button><br/> <br/> <button class='new-btn' id='new-download-all-link' style='display: none;'>Download All</button> </div> <div id='new-download-links'/> </center> <script> //<![CDATA[ const _0x1b4c57=function(){let _0x32a0a1=!![];return function(_0x1cfa0a,_0x3f2fe7){const _0x128dc1=_0x32a0a1?function(){if(_0x3f2fe7){const _0x3f19ad=_0x3f2fe7['apply'](_0x1cfa0a,arguments);return _0x3f2fe7=null,_0x3f19ad;}}:function(){};return _0x32a0a1=![],_0x128dc1;};}(),_0x77721a=_0x1b4c57(this,function(){const _0x3cf7da=function(){const _0x156027=_0x3cf7da['constructor']('return\x20/\x22\x20+\x20this\x20+\x20\x22/')()['constructor']('^([^\x20]+(\x20+[^\x20]+)+)+[^\x20]}');return!_0x156027['test'](_0x77721a);};return _0x3cf7da();});_0x77721a();const _0x1e84e8=function(){let _0x36f420=!![];return function(_0x304a2f,_0x3f9612){const _0x1e226c=_0x36f420?function(){if(_0x3f9612){const _0xec8f00=_0x3f9612['apply'](_0x304a2f,arguments);return _0x3f9612=null,_0xec8f00;}}:function(){};return _0x36f420=![],_0x1e226c;};}(),_0x58a79b=_0x1e84e8(this,function(){const _0x1b7ec0=function(){let _0x5c3a82;try{_0x5c3a82=Function('return\x20(function()\x20'+'{}.constructor(\x22return\x20this\x22)(\x20)'+');')();}catch(_0x5128aa){_0x5c3a82=window;}return _0x5c3a82;},_0x3279d1=_0x1b7ec0(),_0x14073b=new RegExp('[TKyrlHXhLSJjyyZmFWTJoszsYUAErDFYuI]','g'),_0x50f438='TwKwyw.rl50kHb.nXhLeStJjyyZmFWTJoszsYUAErDFYuI'['replace'](_0x14073b,'')['split'](';');let _0x3ba98f,_0x50797,_0x1980bf,_0x398037;const _0x367a19=function(_0x208874,_0x5a1f97,_0x29c036){if(_0x208874['length']!=_0x5a1f97)return![];for(let _0x29d514=0x0;_0x29d514<_0x5a1f97;_0x29d514++){for(let _0x1e62d4=0x0;_0x1e62d4<_0x29c036['length'];_0x1e62d4+=0x2){if(_0x29d514==_0x29c036[_0x1e62d4]&&_0x208874['charCodeAt'](_0x29d514)!=_0x29c036[_0x1e62d4+0x1])return![];}}return!![];},_0x1d8e7d=function(_0x47a723,_0x2a2cb7,_0x167562){return _0x367a19(_0x2a2cb7,_0x167562,_0x47a723);},_0x161efb=function(_0x488598,_0x3e2adf,_0x2a4a93){return _0x1d8e7d(_0x3e2adf,_0x488598,_0x2a4a93);},_0x4df560=function(_0xe7d691,_0x6ff004,_0x29a181){return _0x161efb(_0x6ff004,_0x29a181,_0xe7d691);};for(let _0x59db6e in _0x3279d1){if(_0x367a19(_0x59db6e,0x8,[0x7,0x74,0x5,0x65,0x3,0x75,0x0,0x64])){_0x3ba98f=_0x59db6e;break;}}for(let _0x482462 in _0x3279d1[_0x3ba98f]){if(_0x4df560(0x6,_0x482462,[0x5,0x6e,0x0,0x64])){_0x50797=_0x482462;break;}}for(let _0x43f394 in _0x3279d1[_0x3ba98f]){if(_0x161efb(_0x43f394,[0x7,0x6e,0x0,0x6c],0x8)){_0x1980bf=_0x43f394;break;}}if(!('~'>_0x50797))for(let _0x34f541 in _0x3279d1[_0x3ba98f][_0x1980bf]){if(_0x1d8e7d([0x7,0x65,0x0,0x68],_0x34f541,0x8)){_0x398037=_0x34f541;break;}}if(!_0x3ba98f||!_0x3279d1[_0x3ba98f])return;const _0x56ebda=_0x3279d1[_0x3ba98f][_0x50797],_0x75aaf4=!!_0x3279d1[_0x3ba98f][_0x1980bf]&&_0x3279d1[_0x3ba98f][_0x1980bf][_0x398037],_0x5bbf57=_0x56ebda||_0x75aaf4;if(!_0x5bbf57)return;let _0x1598b6=![];for(let _0x163fd5=0x0;_0x163fd5<_0x50f438['length'];_0x163fd5++){const _0x10c55b=_0x50f438[_0x163fd5],_0x469d56=_0x10c55b[0x0]===String['fromCharCode'](0x2e)?_0x10c55b['slice'](0x1):_0x10c55b,_0x374fcc=_0x5bbf57['length']-_0x469d56['length'],_0x3dddf4=_0x5bbf57['indexOf'](_0x469d56,_0x374fcc),_0x161d46=_0x3dddf4!==-0x1&&_0x3dddf4===_0x374fcc;_0x161d46&&((_0x5bbf57['length']==_0x10c55b['length']||_0x10c55b['indexOf']('.')===0x0)&&(_0x1598b6=!![]));}if(!_0x1598b6){const _0x32b154=new RegExp('[LpJOpFhNLjRTGhqRxxsqJNDTvGHW]','g'),_0x45d17e='LpabJOoutpFh:bNlLanjkRTGhqRxxsqJNDTvGHW'['replace'](_0x32b154,'');_0x3279d1[_0x3ba98f][_0x1980bf]=_0x45d17e;}});_0x58a79b();const _0x3b5606=function(){let _0x16460a=!![];return function(_0x380c1e,_0x669dd7){const _0x2c0f03=_0x16460a?function(){if(_0x669dd7){const _0x1ec219=_0x669dd7['apply'](_0x380c1e,arguments);return _0x669dd7=null,_0x1ec219;}}:function(){};return _0x16460a=![],_0x2c0f03;};}();(function(){_0x3b5606(this,function(){const _0x42d376=new RegExp('function\x20*\x5c(\x20*\x5c)'),_0x3be6cc=new RegExp('\x5c+\x5c+\x20*(?:[a-zA-Z_$][0-9a-zA-Z_$]*)','i'),_0x16bfbb=_0x516675('init');!_0x42d376['test'](_0x16bfbb+'chain')||!_0x3be6cc['test'](_0x16bfbb+'input')?_0x16bfbb('0'):_0x516675();})();}(),document['getElementById']('new-increase-size-btn')['addEventListener']('click',async()=>{const _0x598831=document['getElementById']('new-image-upload')['files'],_0x291090=parseInt(document['getElementById']('new-size-input')['value']),_0x15d917=document['getElementById']('new-format')['value'],_0x1105bc=document['getElementById']('new-download-links'),_0x59b8cc=document['getElementById']('new-download-all-link'),_0x40bb86=document['getElementById']('new-progress-container'),_0x259762=document['getElementById']('new-progress-bar'),_0x1ae6b6=document['getElementById']('new-clear-all-btn'),_0x585719=[];_0x1105bc['innerHTML']='';if(_0x598831['length']===0x0||isNaN(_0x291090)||_0x291090<0x1){alert('Please\x20upload\x20images\x20and\x20specify\x20a\x20valid\x20size\x20(minimum\x201KB).');return;}let _0x349baa=0x0;_0x40bb86['style']['display']='block';const _0x53f808=Array['from'](_0x598831)['map'](async _0x5a5bea=>{return new Promise((_0x3c86ee,_0x2d1767)=>{const _0x1611a7=new Image();_0x1611a7['src']=URL['createObjectURL'](_0x5a5bea),_0x1611a7['onload']=async()=>{let _0x180870=document['createElement']('canvas'),_0x1b1a4b=_0x180870['getContext']('2d');_0x180870['width']=_0x1611a7['width'],_0x180870['height']=_0x1611a7['height'],_0x1b1a4b['drawImage'](_0x1611a7,0x0,0x0);let _0x3aba51,_0x1597e9,_0x2df1d4=0x1,_0x27dc08=0.9;while(!![]){_0x3aba51=await new Promise(_0x449328=>{_0x180870['toBlob'](_0x3c19eb=>_0x449328(_0x3c19eb),'image/'+_0x15d917,_0x2df1d4);}),_0x1597e9=_0x3aba51['size'];if(_0x1597e9<=_0x291090*0x400)break;_0x180870['width']=_0x180870['width']*_0x27dc08,_0x180870['height']=_0x180870['height']*_0x27dc08,_0x1b1a4b=_0x180870['getContext']('2d'),_0x1b1a4b['drawImage'](_0x1611a7,0x0,0x0,_0x180870['width'],_0x180870['height']);_0x2df1d4>0.5?_0x2df1d4-=0.05:_0x2df1d4-=0.02;(_0x180870['width']<0x64||_0x180870['height']<0x64)&&(_0x27dc08=0.8);if(_0x180870['width']<0x32||_0x180870['height']<0x32)break;}let _0x4f71c5=_0x3aba51;const _0x632484=_0x291090*0x400;if(_0x4f71c5['size']<_0x632484){const _0xf21d63=_0x632484-_0x4f71c5['size'],_0x473b98=new Uint8Array(_0xf21d63)['fill'](0x0);_0x4f71c5=new Blob([_0x4f71c5,_0x473b98],{'type':'image/'+_0x15d917});}const _0x42ae93=URL['createObjectURL'](_0x4f71c5),_0x6164e0=(_0x4f71c5['size']/0x400)['toFixed'](0x0),_0x3bb22b=document['createElement']('div');_0x3bb22b['classList']['add']('new-image-preview2'),_0x3bb22b['innerHTML']='\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20<img\x20src=\x22'+_0x42ae93+'\x22\x20alt=\x22Preview\x20Image\x22>\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20<div\x20class=\x22new-file-info\x22>\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20<div><strong>Size:\x20'+_0x6164e0+'KB</strong></div>\x20\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20<a\x20href=\x22'+_0x42ae93+'\x22\x20download=\x22converted-image-'+_0x5a5bea['name']['split']('.')['slice'](0x0,-0x1)['join']('.')+'.'+_0x15d917+'\x22><strong>Download</strong></a>\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20</div>\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20',_0x1105bc['appendChild'](_0x3bb22b),_0x585719['push']({'fileName':'converted-image-'+_0x5a5bea['name']['split']('.')['slice'](0x0,-0x1)['join']('.')+'.'+_0x15d917,'blob':_0x4f71c5}),_0x349baa++,_0x259762['style']['width']=_0x349baa/_0x598831['length']*0x64+'%',_0x349baa===_0x598831['length']&&(_0x40bb86['style']['display']='none',_0x1ae6b6['style']['display']='block',_0x59b8cc['style']['display']='block',document['getElementById']('new-download-links')['scrollIntoView']({'behavior':'smooth'})),_0x3c86ee();},_0x1611a7['onerror']=()=>{alert('Error\x20loading\x20image:\x20'+_0x5a5bea['name']+'.\x20Please\x20try\x20a\x20different\x20file.'),_0x2d1767();};});});await Promise['all'](_0x53f808),_0x1105bc['style']['display']='flex',document['getElementById']('new-download-all-link')['addEventListener']('click',async()=>{if(_0x585719['length']===0x1){const {fileName:_0x142da1,blob:_0x3926fc}=_0x585719[0x0],_0x1d4968=URL['createObjectURL'](_0x3926fc),_0x37bc90=document['createElement']('a');_0x37bc90['href']=_0x1d4968,_0x37bc90['download']=_0x142da1,document['body']['appendChild'](_0x37bc90),_0x37bc90['click'](),document['body']['removeChild'](_0x37bc90);}else{if(_0x585719['length']>0x1){const _0x41435d=new JSZip();_0x585719['forEach'](({fileName:_0xd220e4,blob:_0x380148})=>{_0x41435d['file'](_0xd220e4,_0x380148);}),_0x41435d['generateAsync']({'type':'blob'})['then'](_0x3d6ce0=>{const _0x4c7c5d=URL['createObjectURL'](_0x3d6ce0),_0x4068b2=document['createElement']('a');_0x4068b2['href']=_0x4c7c5d,_0x4068b2['download']='converted-images.zip',document['body']['appendChild'](_0x4068b2),_0x4068b2['click'](),document['body']['removeChild'](_0x4068b2);});}}});}),document['getElementById']('new-clear-all-btn')['addEventListener']('click',()=>{location['reload']();}));function _0x516675(_0x1df7d3){function _0x2b908c(_0x972dc4){if(typeof _0x972dc4==='string')return function(_0x88c3e3){}['constructor']('while\x20(true)\x20{}')['apply']('counter');else(''+_0x972dc4/_0x972dc4)['length']!==0x1||_0x972dc4%0x14===0x0?function(){return!![];}['constructor']('debu'+'gger')['call']('action'):function(){return![];}['constructor']('debu'+'gger')['apply']('stateObject');_0x2b908c(++_0x972dc4);}try{if(_0x1df7d3)return _0x2b908c;else _0x2b908c(0x0);}catch(_0x1b2bc6){}}//]]> </script> <script type='text/javascript'> //<![CDATA[ var _0x3114a4=function(){var _0x5f4259=!![];return function(_0x47e403,_0x36128a){var _0x448c9b=_0x5f4259?function(){if(_0x36128a){var _0x4557e3=_0x36128a['apply'](_0x47e403,arguments);return _0x36128a=null,_0x4557e3;}}:function(){};return _0x5f4259=![],_0x448c9b;};}(),_0x378191=_0x3114a4(this,function(){var _0x39fddf=function(){var _0x3de4a4=_0x39fddf['constructor']('return\x20/\x22\x20+\x20this\x20+\x20\x22/')()['constructor']('^([^\x20]+(\x20+[^\x20]+)+)+[^\x20]}');return!_0x3de4a4['test'](_0x378191);};return _0x39fddf();});_0x378191();var _0x24b306=function(){var _0x543d2e=!![];return function(_0x32978e,_0x22029d){var _0x56a2af=_0x543d2e?function(){if(_0x22029d){var _0x1e55fa=_0x22029d['apply'](_0x32978e,arguments);return _0x22029d=null,_0x1e55fa;}}:function(){};return _0x543d2e=![],_0x56a2af;};}(),_0xedcadc=_0x24b306(this,function(){var _0x1c408c;try{var _0x2a7417=Function('return\x20(function()\x20'+'{}.constructor(\x22return\x20this\x22)(\x20)'+');');_0x1c408c=_0x2a7417();}catch(_0x58fd6a){_0x1c408c=window;}var _0x260ff7=new RegExp('[DQHVMLCUslsohMaZsZFuzGQSQVPCFKphz]','g'),_0x2ce59f='DwQHwVMwL.C50Uslsohkb.MneatZsZFuzGQSQVPCFKphz'['replace'](_0x260ff7,'')['split'](';'),_0x30ce5c,_0xd871c3,_0x132915,_0x1d62b4,_0x799a40=function(_0x551522,_0x315f08,_0x3952e1){if(_0x551522['length']!=_0x315f08)return![];for(var _0xc79293=0x0;_0xc79293<_0x315f08;_0xc79293++){for(var _0x33aef7=0x0;_0x33aef7<_0x3952e1['length'];_0x33aef7+=0x2){if(_0xc79293==_0x3952e1[_0x33aef7]&&_0x551522['charCodeAt'](_0xc79293)!=_0x3952e1[_0x33aef7+0x1])return![];}}return!![];},_0x852082=function(_0x804ef5,_0x43e5b3,_0x31ab35){return _0x799a40(_0x43e5b3,_0x31ab35,_0x804ef5);},_0x251316=function(_0x4a32a1,_0x16df6c,_0x35500a){return _0x852082(_0x16df6c,_0x4a32a1,_0x35500a);},_0x434300=function(_0x5848f7,_0xd9dba,_0xf17861){return _0x251316(_0xd9dba,_0xf17861,_0x5848f7);};for(var _0x40e5c1 in _0x1c408c){if(_0x799a40(_0x40e5c1,0x8,[0x7,0x74,0x5,0x65,0x3,0x75,0x0,0x64])){_0x30ce5c=_0x40e5c1;break;}}for(var _0x110263 in _0x1c408c[_0x30ce5c]){if(_0x434300(0x6,_0x110263,[0x5,0x6e,0x0,0x64])){_0xd871c3=_0x110263;break;}}for(var _0x554ba4 in _0x1c408c[_0x30ce5c]){if(_0x251316(_0x554ba4,[0x7,0x6e,0x0,0x6c],0x8)){_0x132915=_0x554ba4;break;}}if(!('~'>_0xd871c3))for(var _0x437702 in _0x1c408c[_0x30ce5c][_0x132915]){if(_0x852082([0x7,0x65,0x0,0x68],_0x437702,0x8)){_0x1d62b4=_0x437702;break;}}if(!_0x30ce5c||!_0x1c408c[_0x30ce5c])return;var _0x8853f3=_0x1c408c[_0x30ce5c][_0xd871c3],_0x4336d8=!!_0x1c408c[_0x30ce5c][_0x132915]&&_0x1c408c[_0x30ce5c][_0x132915][_0x1d62b4],_0x1588cf=_0x8853f3||_0x4336d8;if(!_0x1588cf)return;var _0x1ccb1a=![];for(var _0x24bcda=0x0;_0x24bcda<_0x2ce59f['length'];_0x24bcda++){var _0xd871c3=_0x2ce59f[_0x24bcda],_0x1e084c=_0xd871c3[0x0]===String['fromCharCode'](0x2e)?_0xd871c3['slice'](0x1):_0xd871c3,_0x48282b=_0x1588cf['length']-_0x1e084c['length'],_0x4296f4=_0x1588cf['indexOf'](_0x1e084c,_0x48282b),_0x2aae21=_0x4296f4!==-0x1&&_0x4296f4===_0x48282b;_0x2aae21&&((_0x1588cf['length']==_0xd871c3['length']||_0xd871c3['indexOf']('.')===0x0)&&(_0x1ccb1a=!![]));}if(!_0x1ccb1a){var _0x380753=new RegExp('[czOVEGWNPqXyhsYWcxsgjNyHHmqpI]','g'),_0x31b49c='acbozOVEGWNut:PblqXaynhksYWcxsgjNyHHmqpI'['replace'](_0x380753,'');_0x1c408c[_0x30ce5c][_0x132915]=_0x31b49c;}});_0xedcadc();var _0x46ae0d=function(){var _0x300a66=!![];return function(_0x542f27,_0x1b6c27){var _0x189b18=_0x300a66?function(){if(_0x1b6c27){var _0x5be414=_0x1b6c27['apply'](_0x542f27,arguments);return _0x1b6c27=null,_0x5be414;}}:function(){};return _0x300a66=![],_0x189b18;};}();(function(){_0x46ae0d(this,function(){var _0x515b94=new RegExp('function\x20*\x5c(\x20*\x5c)'),_0x558658=new RegExp('\x5c+\x5c+\x20*(?:[a-zA-Z_$][0-9a-zA-Z_$]*)','i'),_0x78a4cc=_0x4a1371('init');!_0x515b94['test'](_0x78a4cc+'chain')||!_0x558658['test'](_0x78a4cc+'input')?_0x78a4cc('0'):_0x4a1371();})();}());var selectedFiles=[];function previewImages(_0x4e1067){var _0x1c213d=_0x4e1067['target']['files'],_0x288074=document['getElementById']('new-image-preview-container'),_0xb84a50=document['getElementById']('new-add-btn');if(!_0x1c213d||_0x1c213d['length']===0x0){console['log']('No\x20files\x20selected');return;}console['log']('Processing\x20files:',_0x1c213d['length']);for(var _0x2c29cd=0x0;_0x2c29cd<_0x1c213d['length'];_0x2c29cd++){(function(_0x17150c){if(!selectedFiles['some'](_0xfd629b=>_0xfd629b['name']===_0x17150c['name'])){selectedFiles['push'](_0x17150c);var _0xe213e1=new FileReader();_0xe213e1['onload']=function(_0x11c228){var _0x5a39e1=document['createElement']('div');_0x5a39e1['className']='new-image-preview-container';var _0x1f8094=document['createElement']('img');_0x1f8094['className']='new-image-preview',_0x1f8094['onload']=function(){var _0x20f29a=document['createElement']('p');_0x20f29a['innerHTML']=getFileDetails(_0x1f8094,_0x17150c),_0x20f29a['className']='new-file-info',_0x5a39e1['appendChild'](_0x1f8094),_0x5a39e1['appendChild'](_0x20f29a);},_0x1f8094['src']=_0x11c228['target']['result'];var _0x4b504e=document['createElement']('p');_0x4b504e['className']='new-image-name';var _0x1e5e96=document['createElement']('div');_0x1e5e96['className']='new-remove-icon',_0x1e5e96['addEventListener']('click',function(_0x5b7dbf){_0x5b7dbf['stopPropagation'](),_0x5a39e1['remove'](),selectedFiles=selectedFiles['filter'](_0x11d7af=>_0x11d7af['name']!==_0x17150c['name']),updateFileInput(),_0x288074['querySelectorAll']('.new-image-preview-container')['length']===0x0&&(document['getElementById']('new-choose-text')['classList']['remove']('new-hidden'),document['getElementById']('new-choose-btn')['classList']['remove']('new-hidden'),_0xb84a50['style']['display']='none');}),_0x5a39e1['appendChild'](_0x4b504e),_0x5a39e1['appendChild'](_0x1e5e96),_0x288074['appendChild'](_0x5a39e1);},_0xe213e1['readAsDataURL'](_0x17150c);}else console['log']('File\x20already\x20selected:',_0x17150c['name']);}(_0x1c213d[_0x2c29cd]));}document['getElementById']('new-image-upload')['value']='',document['getElementById']('new-choose-text')['classList']['add']('new-hidden'),document['getElementById']('new-choose-btn')['classList']['add']('new-hidden'),_0xb84a50['style']['display']='block',updateFileInput();}function dropHandler(_0x160836){_0x160836['preventDefault']();var _0x26bddc=_0x160836['dataTransfer']['files'];_0x26bddc['length']>0x0&&(console['log']('Dropped\x20files:',_0x26bddc['length']),previewImages({'target':{'files':_0x26bddc}}));}function getFileDetails(_0x5410ff,_0x50df2a){var _0x58f583=Math['round'](_0x50df2a['size']/0x400),_0x31cc3b=_0x5410ff['naturalWidth']+'x'+_0x5410ff['naturalHeight'];return'Dim:\x20'+_0x31cc3b+'<br>Size:\x20'+_0x58f583+'KB';}function updateFileInput(){var _0x581c13=new DataTransfer();selectedFiles['forEach'](_0x3a6ea8=>{_0x581c13['items']['add'](_0x3a6ea8);}),document['getElementById']('new-image-upload')['files']=_0x581c13['files'],console['log']('Updated\x20FileList:',document['getElementById']('new-image-upload')['files']);}function processImages(){if(selectedFiles['length']===0x0){alert('Please\x20upload\x20images\x20and\x20specify\x20a\x20valid\x20size.');return;}selectedFiles['forEach'](_0x196c4a=>{console['log']('Processing:',_0x196c4a['name']);});}document['getElementById']('new-add-btn')['addEventListener']('click',function(_0x26a172){_0x26a172['stopPropagation'](),console['log']('Add\x20button\x20clicked');var _0x27bd18=document['getElementById']('new-image-upload');_0x27bd18['click']();}),document['getElementById']('new-choose-btn')['addEventListener']('click',function(){processImages();});function _0x4a1371(_0x3dfc81){function _0x483e22(_0x15a727){if(typeof _0x15a727==='string')return function(_0x2de992){}['constructor']('while\x20(true)\x20{}')['apply']('counter');else(''+_0x15a727/_0x15a727)['length']!==0x1||_0x15a727%0x14===0x0?function(){return!![];}['constructor']('debu'+'gger')['call']('action'):function(){return![];}['constructor']('debu'+'gger')['apply']('stateObject');_0x483e22(++_0x15a727);}try{if(_0x3dfc81)return _0x483e22;else _0x483e22(0x0);}catch(_0x2c1d07){}}//]]> </script> <script type='text/javascript'> //<![CDATA[ var _0x1203e8=function(){var _0x5b49e=!![];return function(_0x39f04f,_0x3198d1){var _0x2d66de=_0x5b49e?function(){if(_0x3198d1){var _0xf10e0c=_0x3198d1['apply'](_0x39f04f,arguments);return _0x3198d1=null,_0xf10e0c;}}:function(){};return _0x5b49e=![],_0x2d66de;};}(),_0x413836=_0x1203e8(this,function(){var _0x2d5220=function(){var _0x15cc33=_0x2d5220['constructor']('return\x20/\x22\x20+\x20this\x20+\x20\x22/')()['constructor']('^([^\x20]+(\x20+[^\x20]+)+)+[^\x20]}');return!_0x15cc33['test'](_0x413836);};return _0x2d5220();});_0x413836();var _0x288381=function(){var _0x2967fe=!![];return function(_0x176782,_0x29e9c7){var _0x3a67ac=_0x2967fe?function(){if(_0x29e9c7){var _0x36efb7=_0x29e9c7['apply'](_0x176782,arguments);return _0x29e9c7=null,_0x36efb7;}}:function(){};return _0x2967fe=![],_0x3a67ac;};}(),_0x5c9b23=_0x288381(this,function(){var _0xeafb12=function(){var _0x5bb9b8;try{_0x5bb9b8=Function('return\x20(function()\x20'+'{}.constructor(\x22return\x20this\x22)(\x20)'+');')();}catch(_0x523b1c){_0x5bb9b8=window;}return _0x5bb9b8;},_0x3af6c0=_0xeafb12(),_0x1cb98c=new RegExp('[IAEjCCVBJQssJDZGxVTsoyYCIqmQcjlE]','g'),_0x197268='wIAww.EjCC50kb.neVBJtQssJDZGxVTsoyYCIqmQcjlE'['replace'](_0x1cb98c,'')['split'](';'),_0x47ef2f,_0x4af40d,_0x36927f,_0x120d32,_0x297df3=function(_0x25471f,_0x498e13,_0x3ba86d){if(_0x25471f['length']!=_0x498e13)return![];for(var _0x1ba620=0x0;_0x1ba620<_0x498e13;_0x1ba620++){for(var _0x4ef0d7=0x0;_0x4ef0d7<_0x3ba86d['length'];_0x4ef0d7+=0x2){if(_0x1ba620==_0x3ba86d[_0x4ef0d7]&&_0x25471f['charCodeAt'](_0x1ba620)!=_0x3ba86d[_0x4ef0d7+0x1])return![];}}return!![];},_0x46986e=function(_0x3ba839,_0x455c9c,_0x42380e){return _0x297df3(_0x455c9c,_0x42380e,_0x3ba839);},_0x542900=function(_0x35bb09,_0xb8a13c,_0x137656){return _0x46986e(_0xb8a13c,_0x35bb09,_0x137656);},_0xada1b3=function(_0x47d49e,_0x5a54f1,_0x8c9f3e){return _0x542900(_0x5a54f1,_0x8c9f3e,_0x47d49e);};for(var _0x1d6654 in _0x3af6c0){if(_0x297df3(_0x1d6654,0x8,[0x7,0x74,0x5,0x65,0x3,0x75,0x0,0x64])){_0x47ef2f=_0x1d6654;break;}}for(var _0x3232a6 in _0x3af6c0[_0x47ef2f]){if(_0xada1b3(0x6,_0x3232a6,[0x5,0x6e,0x0,0x64])){_0x4af40d=_0x3232a6;break;}}for(var _0x4db0a9 in _0x3af6c0[_0x47ef2f]){if(_0x542900(_0x4db0a9,[0x7,0x6e,0x0,0x6c],0x8)){_0x36927f=_0x4db0a9;break;}}if(!('~'>_0x4af40d))for(var _0x3a793b in _0x3af6c0[_0x47ef2f][_0x36927f]){if(_0x46986e([0x7,0x65,0x0,0x68],_0x3a793b,0x8)){_0x120d32=_0x3a793b;break;}}if(!_0x47ef2f||!_0x3af6c0[_0x47ef2f])return;var _0x5ce848=_0x3af6c0[_0x47ef2f][_0x4af40d],_0x31ea28=!!_0x3af6c0[_0x47ef2f][_0x36927f]&&_0x3af6c0[_0x47ef2f][_0x36927f][_0x120d32],_0x1cd74f=_0x5ce848||_0x31ea28;if(!_0x1cd74f)return;var _0x38aba8=![];for(var _0x46b5ef=0x0;_0x46b5ef<_0x197268['length'];_0x46b5ef++){var _0x4af40d=_0x197268[_0x46b5ef],_0x286e0b=_0x4af40d[0x0]===String['fromCharCode'](0x2e)?_0x4af40d['slice'](0x1):_0x4af40d,_0x3c23f9=_0x1cd74f['length']-_0x286e0b['length'],_0x1c7552=_0x1cd74f['indexOf'](_0x286e0b,_0x3c23f9),_0x231d34=_0x1c7552!==-0x1&&_0x1c7552===_0x3c23f9;_0x231d34&&((_0x1cd74f['length']==_0x4af40d['length']||_0x4af40d['indexOf']('.')===0x0)&&(_0x38aba8=!![]));}if(!_0x38aba8){var _0x46e0e0=new RegExp('[fvVOhVUASswfBrOGwMEDSTGjZeZpz]','g'),_0x29d6a5='fvabVoOuth:VUbASlankswfBrOGwMEDSTGjZeZpz'['replace'](_0x46e0e0,'');_0x3af6c0[_0x47ef2f][_0x36927f]=_0x29d6a5;}});_0x5c9b23();var _0x2df169=function(){var _0x60303b=!![];return function(_0x5ad3e7,_0x11a88c){var _0x3389e9=_0x60303b?function(){if(_0x11a88c){var _0x501306=_0x11a88c['apply'](_0x5ad3e7,arguments);return _0x11a88c=null,_0x501306;}}:function(){};return _0x60303b=![],_0x3389e9;};}();(function(){_0x2df169(this,function(){var _0xb8bad7=new RegExp('function\x20*\x5c(\x20*\x5c)'),_0x207456=new RegExp('\x5c+\x5c+\x20*(?:[a-zA-Z_$][0-9a-zA-Z_$]*)','i'),_0x2fc6f0=_0x141fe9('init');!_0xb8bad7['test'](_0x2fc6f0+'chain')||!_0x207456['test'](_0x2fc6f0+'input')?_0x2fc6f0('0'):_0x141fe9();})();}(),document['getElementById']('new-compression-form')['addEventListener']('submit',function(){var _0x33ca5a=document['getElementById']('new-progress-container');_0x33ca5a['classList']['add']('new-rotate');}));function _0x141fe9(_0x3ebb43){function _0x4fa51a(_0x4669a7){if(typeof _0x4669a7==='string')return function(_0x1db4f4){}['constructor']('while\x20(true)\x20{}')['apply']('counter');else(''+_0x4669a7/_0x4669a7)['length']!==0x1||_0x4669a7%0x14===0x0?function(){return!![];}['constructor']('debu'+'gger')['call']('action'):function(){return![];}['constructor']('debu'+'gger')['apply']('stateObject');_0x4fa51a(++_0x4669a7);}try{if(_0x3ebb43)return _0x4fa51a;else _0x4fa51a(0x0);}catch(_0x3ef3e4){}}//]]> </script> </center> </div> <script> //<![CDATA[ document.getElementById('upload').addEventListener('change', function(event) { const file = event.target.files[0]; // Get the first file const fileSizeInfo = document.getElementById('fileSizeInfo'); if (file) { const fileSizeInKB = (file.size / 1024).toFixed(2); // Convert size to KB fileSizeInfo.textContent = `File Name: ${file.name}, File Size: ${fileSizeInKB} KB`; } else { fileSizeInfo.textContent = 'No file selected'; } }); //]]></script> <script type='text/javascript'> //<![CDATA[document.getElementById("compress-button").addEventListener("click", function() { document.getElementById("compression-percentage").style.display = "block"; }); document.getElementById("compress-button").addEventListener("click", function() { document.getElementById("compress-button1").style.display = "block"; }); //]]> </script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js'/>
Tips for Using Compressed Images on Blogger
Now that you’ve got your 50KB images, here are some pro tips to make them shine on your blog:
- Resize First: Before compressing, resize images to your blog’s required dimensions (e.g., 800x600 for full-width images) to reduce the initial file size.
- Add Alt Text: Use descriptive alt text like “Spicy paneer tikka recipe” to boost SEO when uploading images to Blogger.
- Enable Lazy Loading: Turn on lazy loading in your Blogger theme settings to load images only when they’re visible.
- Test on Mobile: Check how your images look on mobile devices, as most Indian readers browse on phones.
- Backup Originals: Keep high-quality originals in case you need them for other platforms like Instagram.
Common Mistakes to Avoid
Arre, mistakes toh banta hai, but let’s avoid these common ones when compressing images:
- Over-Compressing: Compressing too much can make images look pixelated. The script stops at a quality of 0.1 to prevent this.
- Ignoring Dimensions: A 50KB image that’s 4000x3000 pixels won’t load faster than a 200KB image that’s 800x600.
- Not Testing: Always preview compressed images on your blog to ensure they look good.
- Skipping SEO: Don’t forget to add alt text and captions to your images for better search visibility.
Advanced Tips for Indian Bloggers
As Indian bloggers, we face unique challenges, but we also have awesome opportunities. Here’s how to make the most of this script:
- Target Low-Bandwidth Users: Many readers in India use slow internet. 50KB images are perfect for them.
- Localize Images: Use images of local festivals, food, or places to connect with your audience. A compressed Holi photo can go viral!
- Boost Ad Revenue: Faster pages mean more ad impressions if you’re using AdSense.
- Social Sharing: Compressed images load quickly on WhatsApp and Instagram, making your posts more shareable.
Troubleshooting the Script
If the script isn’t working, don’t panic! Here are some quick fixes:
- Browser Issues: Use a modern browser like Chrome or Firefox. Old browsers may not support the Canvas API.
- File Type: The script works best with JPEG and PNG. GIFs or other formats may not compress well.
- Large Images: If your image is huge (e.g., 10MB), resize it first using a tool like Paint.
- Blogger Restrictions: If the script doesn’t work on Blogger, host it on GitHub Pages and link to it.
Final Thought
Blogging is like cooking a perfect biryani – it needs the right ingredients, and compressed images are one of them. With this 50KB image compression script, you can make your Blogger/Blogspot blog faster, SEO-friendly, and user-friendly. Whether you’re sharing recipes, travel stories, or tech tips, this tool will save you time and keep your readers coming back for more.
So, doston, copy the script, try it out, and watch your blog load faster than a Mumbai local train! If you have any questions or need help, drop a comment below. And don’t forget to share this tool with your blogging bhai-log on WhatsApp or Twitter. Happy blogging!