Jenis Ukuran Kapasitas dan URL gambar Pada Postingan Blogger

· 2 min read

www.inchimediatama.org adalah Platform Blogger yang berisi Blog Edukasi yang mengulas seputar Web HTTP HTTPS, seperti Blogger, Hugo, Drupal dll

Bagi anda yang menggunakan Blogger, ada empat cara untuk mengupload file gambar pada postingan artikel anda:
  • Unggah dari komputer: Posting dari perangkat (komputer, ponsel cerdas, tablet, dll.).
  • Foto: Posting dari galeri atau album Google Foto.
  • Blogger: Posting dari Blogger (gambar yang sebelumnya diimpor ke Blogger) atau Arsip Album Google (gambar diimpor dari layanan terkait Google, termasuk Blogger).
  • URL: Masukkan URL gambar yang akan diposting

Berkas gambar Blogger dapat diunggah dalam tiga jenis format, yaitu jpg/jpeg, png, dan gif, serta berkas webp yang sangat terkompresi. Gambar yang diposting oleh subdomain blogger.googleusercontent.com yang diperkenalkan sekitar musim panas tahun 2021, akan ditampilkan sebagai URL gambar asli (tanpa parameter) dengan lebar maksimal 1600px. Namun, ukuran gambar sebenarnya yang dapat digunakan semuanya tidak terbatas (sangat besar sehingga Anda tidak dapat memeriksa ukuran gambar postingan yang disimpan oleh Blogger).

Oleh karena itu, jika Anda mengimpor gambar dengan ukuran 1600px atau lebih, ubah parameter gambar ke nilai maksimum seperti "s0". Anda dapat menampilkan gambar yang lebih besar dengan Lebar maksimum default saat mengimpor gambar yang diposting dalam "ukuran asli" berbeda antara tampilan pembuatan dan tampilan HTML, yang pertama memiliki parameter "s16000" di URL gambar dan hingga 16000px, dan yang terakhir tidak memiliki parameter dan 1600px.

Sejak sekitar musim semi tahun 2024, URL gambar lama pada prinsipnya telah ditulis ulang secara otomatis ke yang baru ( pembaruan penyimpanan gambar Blogger ), sehingga pengguna lama mungkin juga khawatir tentang URL gambar lama yang tersisa di postingan panggilan.

Opsi "Unggah dari komputer" biasanya memiliki lebar maksimum 2048 piksel jika ukurannya disetel ke "ukuran asli" (jika tinggi dan lebar gambar lebih kecil, gambar akan tetap asli, tetapi jika lebih besar dari itu, maka akan akan dikurangi menjadi dalam 2048px), kapasitasnya dikompresi.

Beberapa gambar yang diambil dengan kamera digital, seperti foto yang belum diproses, berukuran sangat besar dan memiliki kapasitas yang sangat besar, sehingga dapat diimpor tanpa diperkecil atau dikompresi. Anda harus berhati-hati saat menggunakannya untuk blog, karena kecepatan tampilannya akan turun secara signifikan.

Pada dasarnya banyak kemudahan, karena Anda dapat langsung mengimpor gambar saat memposting, dan bahkan pada lebar maksimum "ukuran asli", sangat mudah digunakan karena kualitas dan kapasitas gambar seimbang.

Opsi ``Foto'' adalah ``Pilih dari Google Foto'' atau ``Album,'' yang keduanya diimpor dari Google Foto dan bila ukurannya disetel ke ``ukuran asli,'' lebar maksimumnya tidak terbatas dan kapasitasnya dikompresi.

Lebar maksimumnya tidak terbatas, jadi jika Anda memilih "ukuran asli" Anda akan mendapatkan kualitas gambar terbaik, tetapi meskipun dikompres, ukurannya akan membesar secara signifikan dan kecepatan tampilan di blog mungkin menurun secara signifikan, jadi harus berhati-hati tidak menjadi

Opsi "Blogger" memiliki lebar maksimum "Pilih dari blog ini" bila ukurannya disetel ke "Ukuran asli", sama dengan yang diposting sebelumnya di Blogger, dan "Pilih dari arsip album Google" berarti "Foto ". ”, menjadi tidak terbatas dan terkompresi.

"Ukuran asli", yang memiliki lebar maksimum tidak terbatas, memiliki kualitas gambar terbaik, tetapi jika Anda tidak menggunakannya dengan hati-hati seperti "Foto", hal ini dapat memperlambat kecepatan tampilan di blog Anda lebih dari yang diperlukan.

Jika opsi "URL" disetel ke "ukuran asli", lebar maksimumnya tidak terbatas, namun tidak dikompresi oleh Blogger dan diimpor sebagai URL gambar.

Karena lebar maksimum tidak terbatas dan tidak dikompresi, memilih ``Ukuran Asli'' akan menampilkan blog Anda jauh lebih cepat daripada memilih ``Foto'' atau ``Pilih dari Arsip Album Google'' di Blogger, bahkan pada kualitas tertinggi Saya ingin sangat berhati-hati karena kemungkinan penurunannya besar.


1. Perkiraan kompresi untuk setiap ukuran gambar yang diposting Blogger

Jika Anda memilih metode pengeposan selain "URL" untuk gambar yang diposkan, Blogger akan mengompresnya dan membuatnya lebih ringan dari aslinya sehingga akan ditampilkan lebih cepat di blog Anda.

  • 2048px dan sekitar 700kb (ukuran asli maksimum yang diunggah dari komputer).
  • Sekitar 120kb pada 600px (ekstra besar).
  • Sekitar 50kb (besar) pada 400px.
  • 320px dan sekitar 35kb (sedang).
  • Sekitar 15kb pada 200px (kecil)
Catatan:
*Kapasitas kompresi dapat bertambah atau berkurang secara signifikan tergantung kondisi gambar.
*File webp akan diubah menjadi file jpg, dan kapasitasnya akan tetap sama atau bertambah.

Setelah memilih ukuran gambar yang diposting, Anda dapat memilih dari empat jenis: ukuran kecil, sedang, besar, ekstra besar, dan asli.

Semakin besar ukurannya, semakin baik kualitas gambarnya, namun semakin besar ukurannya, semakin rendah kecepatan tampilannya, dan tergantung pada templatnya, gambar mungkin melampaui templatnya, jadi Anda harus memastikan bahwa tidak ada ketidaknyamanan.

Gambar selain nilai tetap 2049px atau lebih dalam "ukuran asli" dari "Foto" dan "Blogger" dan 2047px atau kurang dalam "ukuran asli" termasuk "diunggah dari komputer" dalam metode pengeposan akan dikurangi bobotnya dan diperoleh. mungkin dilakukan. Secara umum terdapat kecenderungan bahwa semakin kecil ukuran gambar maka semakin tinggi kecepatan kompresi datanya, dan semakin besar ukuran gambar maka semakin rendah pula kecepatan kompresi datanya. Biasanya, saat mengurangi bobot suatu gambar, misalnya TinyJPG , semakin kecil gambarnya, semakin kecil kompresinya, dan semakin besar gambarnya, semakin besar kompresinya, dan yang terjadi adalah sebaliknya, jadi jangan bingung saat menghitung keseimbangan antara ukuran dan kapasitas.

Jika Anda tidak peduli dengan kualitas gambar yang Anda posting, atau jika Anda ingin memposting banyak gambar dalam satu halaman, akan mudah untuk menggunakan nilai tetap di bawah "Ekstra Besar".

Bila memilih ukuran tetap "Kecil", "Sedang", "Besar", dan "Ekstra Besar", jika ukuran aslinya lebih kecil maka akan diperbesar dan ditampilkan di blog, jadi Untuk menghindarinya, Anda harus memilih "asli ukuran".

Oleh karena itu, "ukuran asli" sangat berguna ketika Anda ingin menggunakan gambar yang diposting pada lebar maksimum aslinya, atau ketika Anda ingin menampilkan gambar yang relatif kecil pada ukuran aslinya.


2. Cara mengubah ukuran gambar yang diposting berdasarkan URL gambar

Ukuran gambar dari gambar yang diposting Blogger nantinya dapat diubah secara detail dengan mengedit URL gambar, sehingga tidak perlu mengimpor gambar lagi untuk mengubah ukuran gambar, dan Anda dapat menggunakan ukuran gambar selain empat yang ditentukan.

URL gambar unik Blogger, yang ukuran dan kapasitasnya dapat diedit, merupakan subdomain dari blogspot.com dan diambil saat memposting melalui "Unggah dari Komputer", "Foto", atau "Blogger". Untuk "URL", URL gambar masukan digunakan apa adanya, jadi hanya jika Anda memasukkan URL gambar khusus Blogger, URL tersebut akan sama dengan tiga jenis impor lainnya.

Mengedit kode sumber postingan Blogger, seperti URL gambar, dapat dilakukan dengan memilih "Tampilan HTML" (< >) di ujung kiri menu di atas area masukan pada layar postingan.

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZLH_eratlknOFzR1BAKJfXFnUVhalsLdlACmpQWIGAAO2WLbszCLK7S6rKLpkFd8omxqi4wcTwvYIp1HP8t-lvyLnlekDsdPNu-_jgVvYGR93jpnHEGZP2b4Wv9NW9N3Jy_tf5T5yx69g/s0/woman.jpg" style="display: block; padding: 1em 0; text-align: center; "<>img alt="" height="867" width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZLH_eratlknOFzR1BAKJfXFnUVhalsLdlACmpQWIGAAO2WLbszCLK7S6rKLpkFd8omxqi4wcTwvYIp1HP8t-lvyLnlekDsdPNu-_jgVvYGR93jpnHEGZP2b4Wv9NW9N3Jy_tf5T5yx69g/s0/woman.jpg"/></a></div>

Hingga saat ini, kode sumber untuk gambar yang diposkan sedikit berbeda tergantung pada cara gambar tersebut diposkan, namun dengan layar manajemen baru, keempat jenis gambar tersebut telah disatukan dan kini lebih mudah untuk ditangani.

Jika Anda mengatur mode posting ke "Buat tampilan" dan menggunakan "Tambahkan deskripsi", tag div di area tersebut akan diganti dengan tag tabel, tag tbody, tag tr, dan tag td di kolom tabel, dan jika Anda menambahkan "teks judul", gambar akan diganti. Atribut judul ditambahkan ke tag img, tetapi tag a untuk tautan dan tag img untuk gambar selalu disertakan di semuanya.

URL gambar Blogger digunakan di dua tempat: yang pertama nilai atribut href dari tag a adalah tautan ke gambar, dan yang terakhir nilai atribut src dari tag img adalah gambar yang akan ditampilkan di blog.

Umumnya, yang pertama adalah "ukuran asli" asli dan yang kedua adalah URL gambar dengan ukuran yang ditentukan saat mengimpor. Oleh karena itu, jika Anda memilih "ukuran asli" saat mengimpor, kedua gambar akan memiliki URL yang sama.

Hanya ketika "URL" dipilih sebagai metode posting, kedua URL gambar akan ditulis sama untuk semua ukuran. URL gambar yang memungkinkan Anda mengubah ukuran dan kapasitas gambar yang ditampilkan di blog bukanlah atribut href pada tag link a, melainkan atribut src pada tag img gambar.


Berikut ini adalah Contoh kode tag img Blogger

<img alt="" height="867" width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZLH_eratlknOFzR1BAKJfXFnUVhalsLdlACmpQWIGAAO2WLbszCLK7S6rKLpkFd8omxqi4wcTwvYIp1HP8t-lvyLnlekDsdPNu-_jgVvYGR93jpnHEGZP2b4Wv9NW9N3Jy_tf5T5yx69g/s0/woman.jpg"/>

Ukuran dan kapasitas gambar yang ditampilkan pada blog dapat dengan mudah diubah dengan mengedit URL gambar pada atribut src pada tag img gambar tersebut. Pasalnya, URL gambar dipisahkan dengan garis miring (/) setengah lebarnya (gambar asli nama file) Bagian kedua, dalam contoh, adalah "s0".

URL gambar subdomain blogger.googleusercontent.com, yang direktori keduanya adalah "a", yang digunakan dari sekitar musim panas tahun 2021 hingga sekitar musim semi tahun 2022, telah mengubah posisi parameter gambar konvensional seperti "s0 ". 

<img alt="" width="320" height="2954" width="4414" src="src="https://blogger.googleusercontent.com/img/a/AVvXsEirRJXBvqm4B9RNF-zGSwByfqGovPvGZlnfJk31V0fGyYzgbyPYcP7ZjTHlEWgRNZ3vJtMzgV8NOM7Kv1BcNQLg0Sl_TzL8KTrqjW8Q45TGThutW82CsiunQe0M8V7uOVhk6isYXDhepdt9pObQLwLxHzC4XB4JtIIEzX-u8A-7Pay2sMaFcuvG6hKM=s320"/>

Anda dapat memberi tanda sama dengan setengah lebarnya (=) di akhir URL gambar dan menambahkan sesuatu seperti "s320", tetapi ketika Anda mendapatkannya, jika itu adalah "ukuran asli", tidak ada yang ditambahkan ke URL gambar sebelumnya , dan di awal ditambahkan 1. Berbeda dengan yang ada di bp.blogspot.com yang nomornya 4 sampai 4.

URL gambar subdomain blogger.googleusercontent.com dengan direktori kedua "b" yang diperkenalkan sekitar musim semi tahun 2022 telah mengembalikan posisi parameter gambar ke posisi yang sama seperti sebelumnya.

Sejak sekitar musim semi tahun 2024, URL gambar lama secara otomatis ditulis ulang ke tipe baru "b", dan saya tidak tahu apakah itu alasannya, tetapi beberapa parameter gambar berada pada posisi yang tidak biasa, " ketik (digunakan saat mengunggah gambar header template) yang diakhiri dengan cara yang sama. Oleh karena itu, saat menyesuaikan URL gambar, Anda harus berhati-hati karena karena bertipe "b", ini mungkin gagal jika Anda berasumsi bahwa semua parameter gambar berada pada posisi yang sama.

Pola spesifikasi ukuran URL gambar Blogger:
  • nilai s: Menentukan lebar vertikal yang lebih panjang dari gambar.
  • nilai w: Menentukan lebar gambar.
  • nilai h: Menentukan lebar vertikal gambar
Untuk memasukkan ukuran gambar, masukkan salah satu dari tiga huruf: s, w, atau h, dan nilai lebar yang diinginkan. Selain ukuran default Blogger, Anda dapat mengubahnya dengan kelipatan 1 piksel. Jika Anda mengatur nilai lebar ke 0, nilai maksimum gambar yang diambil akan digunakan.

Lebar vertikal maksimum yang dapat digunakan pada atribut tinggi dan lebar horizontal maksimum yang dapat digunakan pada atribut lebar tag img gambar telah dicantumkan, sehingga Anda dapat menggunakannya sebagai referensi. Meskipun Anda menentukan nilai yang melebihi setiap nilai maksimum, nilai tersebut tidak akan dipantulkan dan gambar tidak akan diregangkan secara vertikal atau horizontal.

Jika Anda menulis "-c" setelah salah satu spesifikasi, gambar yang dipotong persegi dari tengah akan dihasilkan. Selain itu, Anda juga dapat menentukan lebar w dan tinggi h dengan menggabungkannya menggunakan tanda hubung setengah lebar (-), seperti "w320-h180".

Jika nilai masukan tidak sesuai dengan rasio aspek gambar asli, maka gambar akan diambil berdasarkan nilai yang lebih kecil dan tidak akan dipotong hingga rasio aspek yang tidak sesuai.

Jika direktori kedua yang digunakan sekitar musim panas 2021 hingga sekitar musim semi 2022 adalah URL gambar subdomain blogger.googleusercontent.com dengan "a", cara menggunakan parameter gambar seperti "s0" Walaupun sama seperti sebelumnya , posisi penambahannya telah berubah setelah tanda sama dengan setengah lebar (=) di akhir. Dan ketika Anda mendapatkan gambar yang diposting dalam "ukuran aslinya", tidak ada parameter gambar yang dilampirkan di awal, jadi Anda harus memberi tanda sama dengan setengah lebarnya (=) di akhir URL gambar sebelum memasukkannya.


3. Cara mengubah ke file WebP dengan URL gambar

WebP adalah format file gambar terkompresi tinggi yang dikembangkan oleh Google, yang menyediakan Blogger, dan dikatakan sekitar 30% lebih ringan dibandingkan jpg/jpeg konvensional.

Blogger memungkinkan Anda mengunggah gambar dalam file webp, tetapi gambar tersebut diubah menjadi file jpg. Meskipun URL gambar diakhiri dengan "webp", saat gambar yang ditampilkan diunduh, ekstensi file gambar adalah "jpg". Oleh karena itu, jika dibiarkan apa adanya, maka tidak akan ditampilkan di blog, dan kapasitas datanya akan tetap sama atau bertambah, sehingga Anda tidak bisa serta merta mengharapkan pengurangan bobot dari kompresi yang tinggi.

Namun, dengan Blogger, jika Anda mengubah sebagian URL gambar, Anda dapat mengonversi gambar yang sudah diunggah dalam dua format file, jpg/jpeg dan png, dan menampilkannya sebagai file webp. Caranya adalah dengan menentukan ukuran URL gambar Blogger lakukan hanyalah menambahkan "-rw".

Misalnya ukuran aslinya adalah "s0", jadi jika Anda menyetelnya ke "s0-rw", gambar yang diposting akan ditampilkan sebagai file webp. Akhir dari URL gambar itu sendiri, yang menunjukkan format file, tetap sama dengan ".webp" untuk file webp, dan meskipun merupakan format file yang diunggah, format tersebut telah diubah. Saat Anda mengunduh gambar yang dimaksud dari browser Anda, dipastikan gambar tersebut memiliki ekstensi "webp" untuk file webp.

Tampaknya file jpg/jpeg cocok untuk format file gambar yang diposting yang diubah menjadi WebP, dan bobotnya jauh lebih ringan. Jika menggunakan png maka beratnya akan berkurang, namun tergantung situasinya mungkin tetap sama atau bahkan bertambah besar, jadi harus berhati-hati.

Jika Anda memeriksa kompatibilitas browser WebP dengan format gambar WebP , sebagian besar browser populer kompatibel. Namun, macOS Safari tampaknya hanya kompatibel dengan Big Sur versi 11 pada November 2020, sehingga mungkin akan sulit digunakan hingga tingkat penggunaan meningkat. Pangsa Pasar Versi macOS Desktop di Seluruh Dunia adalah referensi yang baik untuk tingkat penggunaan untuk setiap versi macOS . Anda harus berhati-hati karena gambar file webp tidak akan ditampilkan di blog jika tidak didukung oleh browser lain.

Jika direktori kedua yang digunakan dari sekitar musim panas 2021 hingga sekitar musim semi 2022 adalah URL gambar dari subdomain blogger.googleusercontent.com dengan "a", hanya "=rw" yang ditambahkan di akhir URL gambar Saat ditambahkan , tampaknya lebar maksimum gambar WebP ditetapkan menjadi 512 piksel. Namun, gambar yang lebih besar juga dapat digunakan dengan WebP, dan jika lebar maksimum gambar yang diposting adalah 1600 piksel, misalnya, menentukan ukuran gambar seperti "=s1600-rw" akan menghasilkan gambar WebP yang sesuai dengan ukuran gambar.

a. Cara mengurutkan file webp dan lain-lain

Anda juga dapat menggunakan file gambar yang berbeda tergantung pada kompatibilitas browser untuk memastikan bahwa gambar yang diposting ditampilkan kepada semua pengunjung.

Di bawah ini adalah script untuk menyortir gambar yang diposting.

<div class="separator" style="clear: both;">
<a href="リンク先の画像URL" style="display: block; padding: 1em 0; text-align: center; ">
<picture>
<source srcset="Bloggerのwebpファイルの画像URL" type="image/webp">
<img height="867" width="1600" src="Bloggerの従来のファイル(jpg/jpegやpngやgifなど)の画像URL">
</picture>
</a>
</div>

Anda dapat mengurutkan URL gambar yang ingin Anda gunakan dengan tag gambar.

Pada tiap kasus yang sering dialami o;eh pemakai Blogger, tag div dan tag a secara otomatis ditambahkan ke kode sumber gambar, jadi sertakan tag img di tag gambar dan tambahkan tag sumber untuk berpindah file gambar di browser.

Ini ditampilkan berdasarkan URL gambar dari tag img (format file yang dapat ditampilkan di browser apa pun), tetapi jika browser mendukung file webp yang ditentukan sebagai "image/webp" di atribut type dari tag sumber, maka tag sumber URL gambar dari file webp (dengan "-rw" ditambahkan ke nilai ukuran gambar dari URL gambar) akan digunakan dengan prioritas.
Subscribe on LinkedIn

Silahkan Berkomentar, Kakak...! Bunda...!

Posting Komentar