{"id":1531,"date":"2023-03-20T21:49:08","date_gmt":"2023-03-20T21:49:08","guid":{"rendered":"https:\/\/universomotero.com\/?page_id=1531"},"modified":"2025-12-06T06:00:07","modified_gmt":"2025-12-06T06:00:07","slug":"online-jpeg-image-resize-and-compress","status":"publish","type":"page","link":"https:\/\/universomotero.com\/he\/online-jpeg-image-resize-and-compress\/","title":{"rendered":"Online JPEG Image Resize And Compress"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-text-align-center\">Online JPEG Image Resize And Compress<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Compress any JPEG image online for free. You also can resize images online instantly<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<tool-body>\n<div id=\"tool-body\" style=\"text-align: center;\" class=\"wrapper\">\n<div class=\"upload-box\">\n   <input type=\"file\" accept=\"image\/*\" hidden=\"\">\n   <img decoding=\"async\" src=\"http:\/\/universomotero.com\/wp-content\/uploads\/2023\/03\/upload-icon.webp\" alt=\"upload icon\">\n   <p>Browse File to Upload<\/p>\n   <\/div>\n   <div style=\"text-align: center;\" class=\"content\">\n   <div class=\"row sizes\">\n   <div class=\"column width\">\n   <label>Width<\/label>\n   <input type=\"number\">\n   <\/div>\n   <div class=\"column height\">\n   <label>Height<\/label>\n   <input type=\"number\">\n   <\/div>\n   <\/div>\n   <div class=\"row checkboxes\">\n   <div class=\"column ratio\">\n   <input type=\"checkbox\" id=\"ratio\" checked=\"\">\n   <label for=\"ratio\">Lock aspect ratio<\/label>\n   <\/div>\n   <div class=\"column quality\">\n   <input type=\"checkbox\" id=\"quality\">\n   <label for=\"quality\">Reduce quality<\/label>\n   <\/div>\n   <\/div>\n   <button class=\"download-btn\">Download Image<\/button>\n   <\/div>\n   <\/div>\n<\/tool-body>\n\n\n\n<style>\ntool-body{\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nmin-height: 50%;\n}\n\n.wrapper{\n\/* width: 50%; *\/\nheight: 288px;\npadding: 30px;\nbackground: #fff;\nborder-radius: 9px;\ntransition: height 0.2s ease;\n}\n\n.wrapper.active{\nheight: 537px;\n}\n\n.wrapper .upload-box{\nheight: 225px;\ndisplay: flex;\ncursor: pointer;\nalign-items: center;\njustify-content: center;\nflex-direction: column;\nborder-radius: 5px;\nborder: 2px dashed #afafaf;\n}\n\n.wrapper.active .upload-box{\nborder: none;\n}\n\n.upload-box p{\nfont-size: 1.06rem;\nmargin-top: 20px;\n}\n\n.wrapper.active .upload-box p{\ndisplay: none;\n}\n\n.wrapper.active .upload-box img{\nwidth: 100%;\nheight: 100%;\nobject-fit: cover;\nborder-radius: 5px;\n}\n\n.wrapper .content{\nopacity: 0;\nmargin-top: 28px;\npointer-events: none;\n}\n\n.wrapper.active .content{\nopacity: 1;\npointer-events: auto;\ntransition: opacity 0.5s 0.05s ease;\n}\n\n.content .row{\ndisplay: flex;\njustify-content: space-between;\n}\n\n.content .row .column{\nwidth: calc(100% \/ 2 - 15px);\n}\n\n.row .column label{\nfont-size: 1.06rem;\n}\n\n.sizes .column input{\nwidth: 100%;\nheight: 49px;\noutline: none;\nmargin-top: 7px;\npadding: 0 15px;\nfont-size: 1.06rem;\nborder-radius: 4px;\nborder: 1px solid #aaa;\n}\n\n.sizes .column input:focus{\npadding: 0 14px;\nborder: 2px solid #927DFC;\n}\n\n.content .checkboxes{\nmargin-top: 20px;\n}\n\n.checkboxes .column{\ndisplay: flex;\nalign-items: center;\n}\n\n.checkboxes .column input{\nwidth: 17px;\nheight: 17px;\nmargin-right: 9px;\naccent-color: #927DFC;\n}\n\n.content .download-btn{\nwidth: 100%;\ncolor: #fff;\noutline: none;\nborder: none;\ncursor: pointer;\nfont-size: 1.06rem;\nborder-radius: 5px;\npadding: 15px 0;\nmargin: 30px 0 10px;\nbackground: #927DFC;\ntext-transform: uppercase;\n}\n<\/style>\n\n\n\n<script type=\"text\/javascript\">\nconst uploadBox = document.querySelector(\".upload-box\"),\npreviewImg = uploadBox.querySelector(\"img\"),\nfileInput = uploadBox.querySelector(\"input\"),\nwidthInput = document.querySelector(\".width input\"),\nheightInput = document.querySelector(\".height input\"),\nratioInput = document.querySelector(\".ratio input\"),\nqualityInput = document.querySelector(\".quality input\"),\ndownloadBtn = document.querySelector(\".download-btn\");\n\nlet ogImageRatio;\nconst loadFile = (e) => {\nconst file = e.target.files[0]; \/\/ getting first user selected file\nif(!file) return; \/\/ return if user hasn't selected any file\npreviewImg.src = URL.createObjectURL(file); \/\/ passing selected file url to preview img src\npreviewImg.addEventListener(\"load\", () => { \/\/ once img loaded\nwidthInput.value = previewImg.naturalWidth;\nheightInput.value = previewImg.naturalHeight;\nogImageRatio = previewImg.naturalWidth \/ previewImg.naturalHeight;\ndocument.querySelector(\".wrapper\").classList.add(\"active\");\n});\n}\n\nwidthInput.addEventListener(\"keyup\", () => {\n\/\/ getting height according to the ratio checkbox status\nconst height = ratioInput.checked ? widthInput.value \/ ogImageRatio : heightInput.value;\nheightInput.value = Math.floor(height);\n});\n\nheightInput.addEventListener(\"keyup\", () => {\n\/\/ getting width according to the ratio checkbox status\nconst width = ratioInput.checked ? heightInput.value * ogImageRatio : widthInput.value;\nwidthInput.value = Math.floor(width);\n});\n\nconst resizeAndDownload = () => {\nconst canvas = document.createElement(\"canvas\");\nconst a = document.createElement(\"a\");\nconst ctx = canvas.getContext(\"2d\");\n\n\/\/ if quality checkbox is checked, pass 0.5 to imgQuality else pass 1.0\n\/\/ 1.0 is 100% quality where 0.5 is 50% of total. you can pass from 0.1 - 1.0\nconst imgQuality = qualityInput.checked ? 0.5 : 1.0;\n\n\/\/ setting canvas height & width according to the input values\ncanvas.width = widthInput.value;\ncanvas.height = heightInput.value;\n\n\/\/ drawing user selected image onto the canvas\nctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);\n\n\/\/ passing canvas data url as href value of <a> element\na.href = canvas.toDataURL(\"image\/jpeg\", imgQuality);\na.download = new Date().getTime(); \/\/ passing current time as download value\na.click(); \/\/ clicking <a> element so the file download\n}\n\ndownloadBtn.addEventListener(\"click\", resizeAndDownload);\nfileInput.addEventListener(\"change\", loadFile);\nuploadBox.addEventListener(\"click\", () => fileInput.click());\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">How Does It Work?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Using this Online JPEG Image Resize And Compress tool, you can resize and compress a large JPEG file into a smaller one. This online tool will apply a combination of lossy &amp; progressive compression techniques to reduce the size of the image by maintaining its quality of the image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It removes unnecessary metadata, reduces the color depth, removes redundant data, and uses compression algorithms. Our goal is to maintain the quality of the image and make it more suitable for web usage. We also follow the <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/OptimizeImages\" target=\"_blank\" rel=\"noreferrer noopener\">image compression guidelines<\/a> set by Google.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How To Compress A JPEG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can use our Online JPEG Image Resize And Compress tool to resize and compress a large JPEG file into a smaller file or even your desired dimensions. You do not need to download, install or sign up for any kind of service. So how can you do that? Here\u2019s how you can do it in three steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Upload Your Photo:<\/strong>&nbsp;Choose a JPEG image you want to compress or resize. Drop the image into the Tool.<\/li>\n\n\n\n<li><strong>Customize The Settings:<\/strong>&nbsp;After uploading the image, you can see the options of width and height of the image. Choose the width and height of the image as your desire or need. Also, you can choose the option of Reduce Quality and Lock aspect ratio. By selecting &#8220;Reduce Quality&#8221; you can change a large image file into a smaller file size. &#8220;Lock aspect ratio&#8221; will ensure that the image&#8217;s ratio remains the same as before when resizing.<\/li>\n\n\n\n<li><strong>Save Your Photo:<\/strong>&nbsp;Preview the customize to ensure it looks as you intended and hit the Download image.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why Should I Compress JPEG Files?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By Compressing JPEG images, you can save valuable storage space on your device or server without sacrificing the quality of your images. You can also share and upload images very quickly. Sometimes large image files can slow down your website loading time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By reducing JPEG image file size, you can allow them to load faster on your website, which will help improve your website&#8217;s SEO. We all know that websites with faster loading times are higher in search results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Is It Safe To Compress JPEG Files?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Generally, Yes, but you must be careful about Compress JPEG Files. JPEG compression tool is mainly used for reducing image file size, which is beneficial for many purposes, such as it will help you fasten your website or application. You can mail or share images faster when they are Compressed. If the compression of an image is done aggressively or multiple times, it can damage its quality.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So it&#8217;s essential to use the &#8220;Lock aspect ratio&#8221; to balance file size and image quality when compressing JPEG files. Once you compress a JPEG file, there may not be any recovery of the original file. Therefore, we always recommend keeping a backup of the original uncompressed file.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Online JPEG Image Resize And Compress Compress any JPEG image online for free. You also can resize images online instantly Browse File to Upload Width Height Lock aspect ratio Reduce quality Download Image How Does It Work? Using this Online JPEG Image Resize And Compress tool, you can resize and compress a large JPEG file [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1531","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/universomotero.com\/he\/wp-json\/wp\/v2\/pages\/1531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/he\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/he\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/he\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/he\/wp-json\/wp\/v2\/comments?post=1531"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/he\/wp-json\/wp\/v2\/pages\/1531\/revisions"}],"predecessor-version":[{"id":2328,"href":"https:\/\/universomotero.com\/he\/wp-json\/wp\/v2\/pages\/1531\/revisions\/2328"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/he\/wp-json\/wp\/v2\/media?parent=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}