{"id":1529,"date":"2023-03-20T21:45:21","date_gmt":"2023-03-20T21:45:21","guid":{"rendered":"https:\/\/universomotero.com\/?page_id=1529"},"modified":"2025-12-06T06:00:06","modified_gmt":"2025-12-06T06:00:06","slug":"online-image-resize","status":"publish","type":"page","link":"https:\/\/universomotero.com\/ja\/online-image-resize\/","title":{"rendered":"Online Image Resize"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Online Image Resize<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><strong>Our online image resize tool helps to resize images and also convert them to other formats<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"text-align: center;\" class=\"layout\">\n<div class=\"container\">\n<div class=\"image-container\">\n<div class=\"image-preview\">\n<img decoding=\"async\" id=\"myImage\" src=\"http:\/\/universomotero.com\/wp-content\/uploads\/2023\/03\/back.png\" alt=\"Resized image\">\n   <p id=\"originalInfo\"><\/p>\n   <\/div>\n   <div class=\"file\">\n   <input style=\"display:none;\" class=\"upload-btn\" data-text=\"Select your file!\" type=\"file\" id=\"uploadImage\" accept=\"image\/*\" onchange=\"showOriginalInfo()\">\n   <label class=\"upload-image-button upload-btn\" for=\"uploadImage\">Choose files<\/label>\n   <\/div>\n\n   <div class=\"width-box\">\n   <label for=\"width\">Width:<\/label>\n   <input type=\"number\" id=\"width\" name=\"width\">\n   <\/div>\n   <div class=\"height-box\">\n   <label for=\"height\">Height:<\/label>\n   <input type=\"number\" id=\"height\" name=\"height\">\n   <\/div>\n   <label for=\"format\">Format:<\/label>\n   <div>\n   <select id=\"format\" name=\"format\">\n   <option value=\"jpg\">JPG<\/option>\n   <option value=\"png\">PNG<\/option>\n   <option value=\"webp\">WebP<\/option>\n   <\/select>\n   <\/div>\n\n   <br>\n   <div class=\"width-box\">\n   <button id=\"resizeBtn\" onclick=\"resizeImage()\">Resize Image<\/button>\n   <a id=\"downloadBtn\" download=\"online-image-resize.jpg\" href=\"\"><button class=\"download-button\">Download<\/button><\/a>\n   <p id=\"resizedInfo\"><\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<style>\nbody {\nfont-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\nhtml,\nbody,\n.container {\nheight: 100%;\nwidth: 100%;\n}\n\n.container {\ndisplay: flex;\nflex-wrap: wrap;\njustify-content: center;\n}\n\n.width-box, .height-box{\npadding:5px;\n}\n\n.image-container {\nwidth: 100%;\nmax-width: 600px;\n\/*margin: 20px;*\/\npadding: 20px;\nborder: 1px solid #ccc;\nborder-radius: 10px;\nbox-shadow: 0px 0px 10px #ccc;\n}\n\n.image-preview {\nwidth: 100%;\nmax-width: 600px;\n}\n\nimg {\ndisplay: unset!important;\nmax-width: 100%;\nheight: auto;\nmax-width: 90%!important;\nmax-height: 220px!important;\n}\n\ninput[type=\"file\"] {\nmargin-bottom: 10px;\n}\n\nbutton {\nbackground-color: #4CAF50;\nborder: none;\ncolor: white;\npadding: 10px 20px;\ntext-align: center;\ntext-decoration: none;\ndisplay: inline-block;\nfont-size: 16px;\nmargin-bottom: 10px;\nborder-radius: 5px;\ncursor: pointer;\n}\n\n.download-button{\nbackground-color:#1289dd;\n}\n\n[type=\"file\"] + label {\nbackground: hsl(214deg 62% 46%);\nborder: none;\nborder-radius: 5px;\ncolor: #fff;\ncursor: pointer;\ndisplay: inline-block;\nfont-family: 'Rubik', sans-serif;\nfont-size: inherit;\nfont-weight: 500;\nmargin-bottom: 1rem;\noutline: none;\nposition: relative;\ntransition: all 0.3s;\nvertical-align: middle;\n}\n\n.upload-btn:hover {\nbox-shadow: 0 4px darken(#f8eae3, 10%);\ntop: 2px;\nbackground: #545b62!important;\n}\n\n.upload-image-button {\ncolor: #878787;\n}\n\n.upload-image-button {\ncolor: #fff;\ncursor: pointer;\noutline: none;\npadding: 10px 25px;\ntext-transform: uppercase;\ntransition: all 1s ease;\nmargin: 10px 0px 10px 0px;\n}\n\n.row {\ndisplay: flex;\njustify-content: space-between;\n}\n\n#originalInfo {\nfont-size:16px;\ncolor: #ec0000;\n}\n\n#resizedInfo {\nfont-size:16px;\ncolor: #008000;\n}\n\n@media screen and (max-width: 768px) {\n.container {\nflex-direction: column\n}\n<\/style>\n\n\n\n<script>\nconst img = document.getElementById(\"myImage\");\nconst upload = document.getElementById(\"uploadImage\");\nconst widthInput = document.getElementById(\"width\");\nconst heightInput = document.getElementById(\"height\");\nconst formatSelect = document.getElementById(\"format\");\nconst downloadBtn = document.getElementById(\"downloadBtn\");\nconst originalInfo = document.getElementById(\"originalInfo\");\nconst resizedInfo = document.getElementById(\"resizedInfo\");\n\nfunction showOriginalInfo() {\nconst file = upload.files[0];\nconst fileSize = Math.round(file.size \/ 1024);\nconst fileType = file.type.split(\"\/\")[1].toUpperCase();\nconst img = new Image();\nimg.src = URL.createObjectURL(file);\nimg.onload = function() {\nconst width = this.width;\nconst height = this.height;\noriginalInfo.innerHTML = `Original size: ${width} x ${height} - ${fileSize} KB (${fileType})`;\n};\n}\n\nfunction resizeImage() {\nconst currentWidth = img.clientWidth;\nconst currentHeight = img.clientHeight;\nconst desiredWidth = widthInput.value || currentWidth;\nconst desiredHeight = heightInput.value || currentHeight;\nconst format = formatSelect.value;\n\nimg.style.width = desiredWidth + \"px\";\nimg.style.height = desiredHeight + \"px\";\n\nconst canvas = document.createElement(\"canvas\");\ncanvas.width = desiredWidth;\ncanvas.height = desiredHeight;\n\nconst ctx = canvas.getContext(\"2d\");\nctx.drawImage(img, 0, 0, desiredWidth, desiredHeight);\n\nconst dataUrl = canvas.toDataURL(\"image\/\" + format);\ndownloadBtn.href = dataUrl;\ndownloadBtn.download = \"online-image-resize.\" + format;\n\ncanvas.toBlob((blob) => {\nconst url = URL.createObjectURL(blob);\nimg.src = url;\ndownloadBtn.href = url;\ndownloadBtn.download = `online-image-resize.${format}`;\nconst resizedFileSize = Math.round(blob.size \/ 1024);\nconst resizedFileType = blob.type;\nresizedInfo.innerHTML = `Resized size: ${desiredWidth} x ${desiredHeight} - ${resizedFileSize} KB`;\n}, `image\/${format}`, 1);\n}\n\nupload.addEventListener(\"change\", function() {\nconst file = upload.files[0];\nconst reader = new FileReader();\n\nreader.addEventListener(\"load\", function() {\nimg.src = reader.result;\n}, false);\n\nif (file) {\nreader.readAsDataURL(file);\n}\n});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">What Is Image Resizing?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Image resizing is the process of changing an image&#8217;s size, dimensions, or resolution, typically done to fit it into different output mediums or reduce file size. It is essential to be careful when resizing images as it can affect their quality and clarity.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Is An Image Resizer?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An online tool for resizing images is called image resizer. Any image, including JPG, PNG, and WebP files, can be resized with this application. It operates instantly in any JavaScript-enabled browser and is entirely web-based.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How To Resize An Image Online?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Resizing images online is a very simple task using our tool. Here are the steps to resize an image:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the tool and choose an image from your phone or computer.<\/li>\n\n\n\n<li>Enter the height and width of the new image you want.<\/li>\n\n\n\n<li>Select the image format you need for the new image.<\/li>\n\n\n\n<li>Click on resize button and preview the newly resized image.<\/li>\n\n\n\n<li>Click the download button and save it on your device.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">From the above, the newly resized image will be saved on your device. Now you can use it anywhere.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Many Image Formats It Supports?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Currently, we supports the three most popular image formats JPEG, PNG and WebP which are widely used.<\/p>","protected":false},"excerpt":{"rendered":"<p>Online Image Resize Our online image resize tool helps to resize images and also convert them to other formats Choose files Width: Height: Format: JPGPNGWebP Resize Image Download What Is Image Resizing? Image resizing is the process of changing an image&#8217;s size, dimensions, or resolution, typically done to fit it into different output mediums or reduce file size. It is essential to be careful when resizing images as it can affect their quality and clarity. What Is An Image Resizer? An online tool for resizing images is called image resizer. Any image, including JPG, PNG, and WebP files, can be resized with this application. It operates instantly in any JavaScript-enabled [&hellip;]<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1529","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/universomotero.com\/ja\/wp-json\/wp\/v2\/pages\/1529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/ja\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/ja\/wp-json\/wp\/v2\/comments?post=1529"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/ja\/wp-json\/wp\/v2\/pages\/1529\/revisions"}],"predecessor-version":[{"id":2327,"href":"https:\/\/universomotero.com\/ja\/wp-json\/wp\/v2\/pages\/1529\/revisions\/2327"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/ja\/wp-json\/wp\/v2\/media?parent=1529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}