{"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":"mengubah-ukuran-gambar-online","status":"publish","type":"page","link":"https:\/\/universomotero.com\/id\/mengubah-ukuran-gambar-online\/","title":{"rendered":"Ubah Ukuran Gambar Online"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Ubah Ukuran Gambar Online<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><strong>Alat pengubah ukuran gambar online kami membantu mengubah ukuran gambar dan juga mengonversinya ke format lain.<\/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=\"Gambar yang ukurannya telah diubah\">\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\">Pilih berkas<\/label>\n   <\/div>\n\n   <div class=\"width-box\">\n   <label for=\"width\">Lebar:<\/label>\n   <input type=\"number\" id=\"width\" name=\"width\">\n   <\/div>\n   <div class=\"height-box\">\n   <label for=\"height\">Tinggi:<\/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()\">Ubah Ukuran Gambar<\/button>\n   <a id=\"downloadBtn\" download=\"online-image-resize.jpg\" href=\"\"><button class=\"download-button\">Unduh<\/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\">Apa itu pengubahan ukuran gambar?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mengubah ukuran gambar adalah proses mengubah ukuran, dimensi, atau resolusi gambar, biasanya dilakukan agar sesuai dengan media keluaran yang berbeda atau mengurangi ukuran file. Sangat penting untuk berhati-hati saat mengubah ukuran gambar karena dapat memengaruhi kualitas dan kejernihannya.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu pengubah ukuran gambar?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Alat daring untuk mengubah ukuran gambar disebut pengubah ukuran gambar (image resizer). Gambar apa pun, termasuk file JPG, PNG, dan WebP, dapat diubah ukurannya dengan aplikasi ini. Aplikasi ini beroperasi secara instan di browser apa pun yang mendukung JavaScript dan sepenuhnya berbasis web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bagaimana Cara Mengubah Ukuran Gambar Secara Online?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mengubah ukuran gambar secara online sangat mudah menggunakan alat kami. Berikut langkah-langkah untuk mengubah ukuran gambar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buka aplikasi tersebut dan pilih gambar dari ponsel atau komputer Anda.<\/li>\n\n\n\n<li>Masukkan tinggi dan lebar gambar baru yang Anda inginkan.<\/li>\n\n\n\n<li>Pilih format gambar yang Anda butuhkan untuk gambar baru.<\/li>\n\n\n\n<li>Klik tombol ubah ukuran dan lihat pratinjau gambar yang ukurannya telah diubah.<\/li>\n\n\n\n<li>Klik tombol unduh dan simpan di perangkat Anda.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Dari langkah-langkah di atas, gambar yang telah diubah ukurannya akan tersimpan di perangkat Anda. Sekarang Anda dapat menggunakannya di mana saja.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Berapa Banyak Format Gambar yang Didukungnya?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Saat ini, kami mendukung tiga format gambar paling populer yaitu JPEG, PNG, dan WebP yang banyak digunakan.<\/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 [&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\/id\/wp-json\/wp\/v2\/pages\/1529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/comments?post=1529"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/pages\/1529\/revisions"}],"predecessor-version":[{"id":2327,"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/pages\/1529\/revisions\/2327"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/media?parent=1529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}