Cara Mengoptimalkan Gambar untuk Situs Web Anda dan Membuatnya Bekerja di Semua Perangkat (Gambar Responsif untuk Seluler, Desktop, Tablet)

Mengapa repot-repot mengoptimalkan gambar? Izinkan saya bertanya kepada Anda; kapan terakhir kali Anda melihat situs web tanpa gambar di dalamnya? "Tidak pernah" akan menjadi jawaban yang tepat. ��‍♂️ Gambar terlalu esensial. Dan ini bahkan bukan tentang foto stok yang ngeri itu untuk Anda ikuti "10 tips pemasaran online" pos. Gambar berguna untuk berbagai tujuan. Pikirkan tata letak, elemen desain, logo, gambar profil dan, ya, gambar blog juga.


Terus terang, Anda tidak dapat memiliki situs web pada tahun 2020 tanpa menggunakan setidaknya beberapa gambar di dalamnya. Yang sedang berkata, gambar tidak mudah untuk mencari tahu untuk pemilik situs web. Bahkan mengesampingkan tantangan gambar apa yang digunakan dan di mana, ada juga masalah menampilkan gambar-gambar itu dari sudut pandang teknis murni:

  • Cara mengirim gambar responsif di beberapa perangkat?
  • Cara membuatnya tampak hebat di semua perangkat itu?
  • Dan, yang paling penting, bagaimana memastikan mereka memuat dalam waktu yang layak?

Ini adalah pertanyaan yang kami jawab hari ini. Inilah panduan utama Anda cara mengoptimalkan gambar untuk situs web Anda dan membuatnya tampak hebat di semua perangkat:

Cara Mengoptimalkan Gambar untuk Situs Web Anda dan Membuatnya Bekerja di Semua Perangkat

�� Mengapa mendengarkan kami?

Gambar telah menjadi topik penting bagi kami akhir-akhir ini, dan itu karena salah satu alat baru dalam keluarga kami – Optimole.

Optimole adalah layanan optimisasi gambar set-it-and-forget-it & alat. Kami menganggapnya sebagai solusi terbaik di web, dan kami dapat membuktikannya! Tapi itu pembicaraan untuk lain waktu. Bagaimanapun, selama bertahun-tahun, kami telah belajar banyak tentang cara mengoptimalkan gambar dengan benar. Kami ingin berbagi pengetahuan itu dengan Anda hari ini.

�� Mengapa Anda harus mengoptimalkan gambar di situs Anda

Gambar, selain tampak hebat, juga memakan banyak ruang disk dan bandwidth. Lebih khusus lagi, gambar mewakili apa saja mulai dari 30% -85% dari ukuran halaman web standar.

tes kecepatan

Itu sangat besar – dan tidak suka menghapus gambar adalah sebuah opsi – jadi hal terbaik yang bisa kita lakukan adalah belajar bagaimana mengoptimalkan gambar dengan cara yang hanya menghabiskan sedikit ruang disk.

Keuntungannya bisa sangat besar, dan terutama ketika berhadapan dengan gambar berulang – gambar yang perlu dimuat pada setiap halaman web individu. Itu adalah hal-hal seperti latar belakang, elemen desain, logo, ikon, dll. Kadang-kadang mengoptimalkan hanya satu gambar latar belakang dapat mengakibatkan pemotongan ukuran halaman Anda hingga 70%+.

Lihat contoh ini:

perbandingan ukuran halaman sebelum dan sesudah Anda mengoptimalkan gambar

Tapi tunggu dulu, itu semakin buruk! Jika kinerja gambar secara umum tidak cukup berjuang, ada juga ranah seluler ��, dan itu membawa tantangan baru:

Pertama, Anda mungkin tidak boleh menampilkan rangkaian gambar yang sama untuk pengunjung desktop dan pengunjung seluler Anda. Konteksnya sangat berbeda – ini termasuk ukuran layar, orientasi (biasanya dalam potret) dan bahkan pola pikir orang yang membaca.

Bahkan, data menunjukkan bahwa desain seluler dengan gambar lebih sedikit cenderung berkinerja lebih baik dalam hal konversi.

Ketika semuanya disatukan, ada beberapa hal yang perlu kita perhatikan saat mengirimkan gambar responsif di beberapa perangkat:

  • pertama, optimalkan gambar untuk perangkat spesifik itu
  • pastikan gambar dikompres ke tingkat maksimum yang dapat diterima untuk menjamin waktu pemuatan tercepat
  • menampilkan jumlah gambar optimal mengingat perangkat dan layar

��‍♂️ Cara mengoptimalkan gambar dan mengirimkannya di semua jenis perangkat

Membuat gambar Anda diproses secara optimal dan kemudian dikirimkan kepada pengunjung secepat mungkin memiliki beberapa komponen untuk itu. Dalam panduan ini, kita akan membahas semuanya:

�� Pilih format yang benar

Mari kita mulai dengan pertanyaan kuno: PNG atau JPG?

Kebanyakan orang bilang "JPG sepanjang waktu!" Tapi itu tidak sepenuhnya benar:

PNG vs JPG

Ya, sebagian besar waktu, atau setidaknya dalam skenario paling umum untuk apa yang kita butuhkan gambar, JPG mengambil lebih sedikit ruang disk dan karenanya bandwidth juga lebih sedikit.

Tetapi kata kunci di sini adalah "skenario paling umum." Bahkan, jika yang Anda miliki adalah gambar yang kompleks dengan banyak warna dan transisi warna (alias. Banyak "informasi warna"), maka JPG memang akan menjadi lebih baik. Pikirkan foto standar. Itu bekerja lebih baik sebagai JPG.

Namun, jika Anda memiliki gambar yang sedikit lebih sederhana, PNG akan menang setiap saat.

Perhatikan contoh berikut. Berikut ini empat gambar:

gambar-1-aimage 1-a: JPG

gambar-1-bgambar 1-b: PNG

gambar-2-aimage 2-a: JPG

gambar-2-bgambar 2-b: PNG

  • gambar 1-a adalah 312 KB
  • gambar 2-a adalah 196 KB

Coba tebak ukuran dua gambar lainnya …

Jawaban Anda:

Salah!

  • gambar 1-b adalah 1,3 MB (ini yang mungkin Anda tebak)
  • image 2-b adalah 106 KB (tunggu, apa ?!)

Seperti yang Anda lihat, PNG menang untuk gambar sederhana, info warna rendah.

Pikirkan hal-hal seperti tangkapan layar antarmuka, ilustrasi sederhana, dll.

�� Pelajaran 1:

Jangan selalu menggunakan JPG. Memprediksi seberapa besar gambar akan didasarkan pada isinya, dan kemudian menggunakan tipe gambar yang benar.

Sekarang untuk pertanyaan yang lebih tepat waktu: SVG? WebP?

SVG dan WebP

SVG dan WebP adalah jenis gambar yang agak kurang umum di web, tetapi keduanya bagus selama Anda menggunakannya karena harus digunakan. Izinkan saya mengklarifikasi:

  • SVG adalah format gambar vektor berbasis XML. Isi gambar dapat didefinisikan dalam file XML sederhana – file XML yang sama yang Anda gunakan untuk keperluan pemrosesan data dasar lainnya. Ini membuat SVG format yang baik, asalkan Anda berurusan dengan gambar vektor sederhana.
  • WebP adalah format baru oleh Google. Mereka menyombongkan bahwa WebP berukuran 25-34% lebih kecil dari JPEG yang sebanding, dan 26% lebih kecil dari PNG yang sebanding..

Jadi, apa tangkapannya? Dapatkah Anda mengoptimalkan gambar dengan mengubah semuanya menjadi SVG dan WebP?

Pertama, SVG. Pada dasarnya, gunakan SVG hanya jika (Sebuah) gambar dapat disimpan sebagai SVG secara efisien, dan (b) jika Anda tidak keberatan orang mengambil SVG itu dan memodifikasinya.

Seperti yang saya katakan, SVG berbasis XML, yang berarti memodifikasi grafis SVG sangat mudah dilakukan. Ini tidak selalu sesuatu yang Anda inginkan – terutama ketika berhadapan dengan logo merek Anda atau gambar penting lainnya.

Dalam sebagian besar skenario, SVG bukanlah format yang akan sering Anda gunakan.

Sekarang, ke WebP. Formatnya bagus, dan dalam banyak kasus, memang menghemat banyak ruang disk seperti yang dijanjikan. Lihat dua contoh gambar ini:

contoh gambar jpg

contoh gambar webp

  • versi JPG asli adalah 204 KB
  • WebP adalah 58 KB

Caranya adalah tidak semua browser mendukung WebP. Bahkan, Anda bahkan mungkin tidak melihat gambar WebP yang saya gunakan di atas. Pada saat penulisan, WebP bekerja di Google Chrome, Firefox, Edge, dan Opera. Tentu saja, versi yang lebih lama tidak mendukung format.

Apa artinya ini dalam praktik adalah bahwa menambahkan gambar WebP tidak semudah menambahkan JPG atau PNG.

Maksud saya, Anda secara teknis dapat menggunakan sepotong kode seperti ini:

… tetapi jika browser pengguna tidak mendukung format, mereka akan melihat ikon gambar rusak yang sudah dikenal.

Untuk menggunakan WebP secara efektif, Anda harus memberikan gambar mundur. Sebagai contoh:

Ini berarti lebih banyak pekerjaan. Bayangkan harus membuat tag seperti itu setiap kali Anda ingin menambahkan gambar WebP ke posting atau halaman blog. Dan biarkan saya menghentikan Anda di sana, tidak, WordPress tidak mendukung WebP secara asli, jadi Anda memang harus melakukannya dengan tangan.

Tetap saja, saya merekomendasikan untuk menggunakan rute WebP manual yang rumit ini setiap kali Anda berurusan dengan gambar yang muncul di beberapa halaman di situs Anda, atau gambar yang berukuran sangat besar dan Anda membutuhkan setiap alat yang Anda miliki untuk mengurangi ukuran itu dengan cara apa pun.

Anda dapat menyimpan gambar sebagai WebP di Photoshop, atau menggunakan alat seperti XnConvert (Gratis).

�� Pelajaran 2:

Jangan repot-repot menggunakan SVG sama sekali jika Anda ingin mengoptimalkan gambar dengan cepat. Waktu yang Anda buang untuk membuat mereka tidak akan menghasilkan (meskipun merasa bebas untuk tidak setuju; ini bagus alternatif mengambil). PNG akan lebih cepat digunakan dan tidak jauh lebih buruk dalam hal konsumsi ruang disk.

Gunakan WebP saat berurusan dengan gambar yang muncul di beberapa halaman atau gambar yang cukup besar. Itu kecuali Anda dapat menangani pemrosesan WebP secara otomatis, yang dapat dilakukan dengan beberapa alat tambahan. Dalam kasus seperti itu, gunakan WebP di mana-mana. Kami akan membicarakannya dalam beberapa detik.

��️ Kompres gambar

Kompresi gambar seperti sulap. Mari ku tunjukkan:

Ini adalah gambar JPG yang sama, hanya disimpan pada level kompresi yang berbeda (sering disebut sebagai level kualitas):

coon-100%Kualitas 100%

coon-95%Kualitas 95%

coon-85%85% berkualitas

coon-50%Kualitas 50%

Jika Anda menyukai kebanyakan orang, maka tiga yang pertama terlihat sama untuk Anda. Yang keempat mulai mencari "sedikit lebih buruk." (Klik kanan dan "Buka gambar di tab baru")

Inilah jumlah ruang disk yang dibutuhkan masing-masing gambar ini:

  • Kualitas 100%: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

Besar kan ?! Anda dapat beralih dari ~ 1 MB ke ~ 500 KB tanpa kehilangan kualitas yang nyata sama sekali, hanya dengan mengubah kompresi dari 100% menjadi 95%.

Kompresi JPG ini dapat ditangani secara otomatis oleh berbagai alat, yang merupakan berita bagus. Namun, tidak semua gambar dibuat sama, jadi kadang-kadang Anda mungkin mendapatkan gambar yang tampak baik-baik saja di sebelah gambar yang tampak buruk meskipun mereka mengalami proses kompresi yang sama.

Secara keseluruhan, Anda dapat melakukan lompatan di sini dan menurunkan kualitas JPG Anda dengan cukup berat. Sebenarnya masalahnya adalah bahwa pengunjung situs Anda tidak peduli untuk gambar yang tajam di mana-mana.

Oke, saya harus mengklarifikasi; ya, ketika Anda ingin menunjukkan sesuatu kepada mereka – seperti gambar yang menjadi kunci konten, mis., gambar produk, foto kamar hotel – maka tentu saja, gambar itu harus jernih.

Tetapi di area lain, Anda bisa sedikit lebih santai. Misalnya, latar belakang tidak perlu renyah 100%. Secara umum, semua gambar yang pengunjung tidak terlibat secara langsung dengan kualitas dapat lebih rendah.

Dua alat favorit saya yang dapat membantu Anda di sini adalah:

ImageOptim untuk kompresi desktop di Mac. Anda bisa mengambil gambar dari desktop, seret dan jatuhkan ke ImageOptim, lalu alat melakukan keajaibannya dan menimpa gambar sumber setelah selesai.

Kemudian, Anda bisa mendapatkan gambar itu dan mengunggahnya ke situs Anda secara normal.

ImageOptim - alat hebat untuk mengoptimalkan gambar di desktop Anda

Alat kedua adalah Optimole. Alat ini cukup banyak mendefinisikan ulang bagaimana penanganan gambar dilakukan di situs web. Untuk tujuan diskusi ini, katakan saja itu sangat efektif ketika Anda ingin mengoptimalkan gambar yang ada di perpustakaan media Anda.

optimole - alat yang hebat untuk mengoptimalkan gambar di cloud

Sekarang ke PNG. Sama seperti JPG, PNG dapat dikompresi juga. Tapi kali ini, tidak ada kerugian dalam hal penurunan kualitas. PNG dapat dikompres secara efektif menggunakan algoritma lossless.

Dengan kata lain, kompres PNG Anda, selalu!

Lihat tiga gambar ini:

kwf-1
KWF-2

kwf-3

Mereka terlihat sama, tetapi mereka sebenarnya mengambil:

  • 346 KB
  • 215 KB
  • 100 KB

Coba tebak yang mana.

Tiga alat untuk mengompres gambar Anda dan membuatnya lebih kecil:

  • ImageOptim lagi. Tapi yang ini membutuhkan banyak waktu dengan PNG, jadi jika Anda memiliki banyak dari mereka untuk diproses, Anda mungkin ingin membuat secangkir kopi saat alat sedang bekerja.
  • ImageAlpha. Jauh lebih cepat dari ImageOptim. Ini solusi desktop saya untuk PNG.
  • Optimole. Tidak mengherankan, Optimole juga menangani kompresi PNG. Semuanya terjadi dengan autopilot.

�� Pelajaran # 3:

Kompres JPG Anda untuk mencapai tingkat kualitas vs ruang disk yang dapat diterima.

Kompres selalu PNG Anda.

�� Sajikan gambar dengan dimensi yang benar

Ini mungkin aspek yang paling penting dari keseluruhan "gambar responsif" teka-teki. Seperti yang kita ketahui, ada puluhan jika tidak ratusan ukuran layar berbeda di luar sana, dan kita entah bagaimana harus memastikan bahwa gambar kita akan terlihat hebat pada semuanya.

Solusi mudah? Melayani gambar besar … itu selalu bisa diperkecil, kan? Yah, secara teknis, itu benar, tetapi dalam praktiknya, ini akan membuang banyak bandwidth dan membuat situs Anda memuat sangat lambat pada sebagian besar perangkat.

Solusi yang lebih baik adalah mengatur skala semua gambar dengan ukuran yang benar yang lebih disukai oleh perangkat yang paling umum dan kemudian melayani mereka sesuai.

Seperti yang Anda harapkan, Anda perlu versi berbeda dari gambar yang sama untuk mencapai ini.

Salah satu cara untuk mengatasinya adalah mulai dengan lebar dasar desain Anda dan ukuran gambar terbesar yang dapat digunakan, dan kemudian turunkan dari sana untuk beberapa perangkat umum dan breakpoints..

Misalnya, sebagian besar situs web tidak melampaui tanda 1100 px untuk lebar blok konten, sehingga Anda dapat mengasumsikan bahwa gambar maksimum yang dapat ditampilkan dalam kasus tersebut adalah lebar juga 1100 px.

Kemudian, Anda dapat membuat breakpoints untuk 800 px dan 550 px (nilai umum) untuk mencakup skenario tablet dan seluler. Meskipun ini tidak akan memberi Anda hasil sempurna 100% di semua perangkat, Anda setidaknya mengoptimalkan sampai batas yang wajar dan menjaga gambar Anda di bawah kendali.

Dengan ini di belakang Anda, Anda sekarang harus membuat beberapa versi berbeda dari setiap gambar yang ingin Anda gunakan di situs Anda.

Berikut ini contoh cara menangani kode tampilan yang sebenarnya:

Keajaiban atribut srcset adalah bahwa browser melihat apa yang ada di dalamnya dan kemudian mengambil gambar terbaik berdasarkan perangkat yang digunakan.

Satu lagi penyesuaian yang dapat Anda lihat di atas adalah atribut ukuran. Yang ini memberi tahu browser bagaimana seharusnya berperilaku gambar pada layar tertentu. Dalam skenario ini, gambar akan menjadi 1100 px bila dilihat pada viewports lebih besar dari 1100 px, sedangkan pada perangkat yang lebih kecil itu akan mengambil seluruh viewport.

Solusi semacam ini memastikan bahwa gambar tidak mengambil seluruh layar 4K 3840px-lebar. Namun, masih akan menempati seluruh layar saat dilihat di ponsel.

Penggunaan atribut ukuran ini secara efektif adalah cara Anda membuat gambar Anda benar-benar responsif.

⭐ Trik pro: Gunakan gambar dengan dimensi 10% lebih kecil dari yang dibutuhkan, lalu biarkan peramban memperbesarnya. Ini akan menghemat ruang dan bandwidth tambahan. Misalnya, jika Anda memerlukan gambar yang berukuran 500 × 500 px, Anda dapat mengatur skala gambar Anda menjadi 450 × 450 px, dan kemudian biarkan skala browser itu hingga 500. Ini tergantung pada gambar, tetapi dalam kebanyakan kasus, pengguna tidak akan memperhatikan.

�� Pelajaran # 4:

Gunakan ukuran gambar yang benar untuk desain Anda.

Buat breakpoints.

Buat beberapa versi dari gambar yang sama untuk menutupi breakpoints.

Gunakan atribut srcset dan ukuran saat menampilkan gambar.

�� Optimalkan gambar untuk layar Retina dan HiDPI

Ujung lain dari spektrum dimensi gambar adalah tentang gambar ramah-HiDPI.

Ceritanya adalah layar desktop terus menjadi lebih besar dan lebih besar, dan pikselnya terus semakin padat. Tidak jarang hari ini memiliki 4 rb layar dikemas menjadi laptop 15 inci. Resolusi 4K adalah 3840 × 2160 px, sehingga masing-masing piksel tersebut harus sangat kecil.

Ini menciptakan masalah untuk situs web. Pada dasarnya, jika situs Anda didefinisikan sebagai lebar 1100 px maka, dalam kondisi normal, itu hanya akan memakan sekitar 25% dari layar real estat yang tersedia dari layar 4K. Ini tidak optimal. Untungnya, hal-hal tidak berfungsi seperti itu.

Untuk menghindari masalah ini, layar beresolusi tinggi itu bertindak seolah-olah setengah dari ukurannya (saya terlalu menyederhanakan, tapi dengarkan saya). Jadi, alih-alih situs web lebar 1100 px Anda menempati sebagian kecil layar HiDPI, itu ditingkatkan menjadi dua kali lipat, mengambil 2200 px dan mengisi layar lebih baik.

Proses ini memungkinkan layar untuk terus mendapatkan lebih tajam dan lebih tajam tanpa membuat semuanya terlihat kecil dalam proses.

Namun, praktik ini bukannya tanpa kesalahan. Terutama, gambar Anda sangat sukses. Teks mudah ditingkatkan tanpa kehilangan kualitas. Font kebal terhadap penskalaan. Gambar tidak. Sebagai akibat langsung, setiap gambar yang tidak siap untuk layar HiDPI akan terlihat buram!

Untuk memperbaikinya, Anda harus mengirimkan gambar skala untuk masing-masing rasio pembesaran. Ini beberapa kode sederhana:

(Jika browser tidak mendukung srcset, src standar akan digunakan.)

Sekarang, ketika saya katakan "gambar berskala," Maksud saya sebenarnya Anda harus mulai dari ujung yang lain. Mulailah dengan gambar besar (beri label 3x), lalu turunkan dan buat lebih kecil (menjadi 2x), dan akhirnya buat 1x dan gunakan itu sebagai gambar default.

�� Pelajaran # 5:

Pastikan logo Anda, gambar branding, dan semua gambar yang digunakan dalam posting dan halaman Anda siap untuk layar HiDPI.

⌛ Tunda pemuatan gambar

Ini pada prinsipnya sederhana; semua gambar yang berada di atas flip harus segera dimuat (pada pemuatan halaman). Segala sesuatu yang lain dapat ditunda untuk nanti, dan bahkan "malas dimuat."

Pemuatan malas adalah pemuatan gambar berdasarkan permintaan. Yaitu, gambar hanya dimuat sepersekian detik sebelum pengguna membutuhkannya – tidak lebih cepat, tidak lebih lambat. Dan itu "tidak lebih cepat, tidak lebih lambat" bagian adalah kuncinya di sini.

Dalam skenario yang ideal, gambar harus dimuat tepat sebelum digulirkan ke viewport. Artinya, pengguna tidak perlu melihat pengganti sebelum gambar muncul. Jika itu terjadi, mereka mungkin menggulirkan melewati gambar tanpa mengatur memuat dalam waktu – bukan cara yang bagus untuk mengoptimalkan gambar.

Yang sedang berkata, pemuatan malas adalah sesuatu yang mudah dilakukan di situs WordPress. Anda dapat memuat malas dengan JavaScript / jQuery, dan Anda bahkan dapat menulis kode untuk itu sendiri jika Anda mau. Atau, Anda bisa mendapatkan plugin seperti a3 Beban Malas, atau bisa kamu gunakan Optimole, yang memiliki modul memuat malas disertakan.

�� Pelajaran # 6:

Malas memuat gambar yang berada di bawah flip.

�� Kirim gambar melalui CDN

Jaringan Pengiriman Konten seperti kode cheat untuk kecepatan situs. Anda curang karena Anda tidak sebanyak membuat situs Anda lebih cepat, seperti Anda memberitahu orang lain untuk mengambil beban dan mengirimkan data situs kepada pengunjung untuk Anda.

�� Kami berbicara tentang CDN lebih mendalam di sini, periksa.

TL; DR adalah bahwa CDN memanfaatkan jaringan server yang semuanya menyimpan salinan situs Anda dan kemudian mengirimkannya kepada pengunjung dari lokasi terdekat yang tersedia. Ini akan selalu lebih cepat daripada mengirimkan dari server utama Anda.

Gambar CDN bekerja hampir sama, tetapi mereka hanya fokus pada, Anda sudah menebaknya, gambar.

Sebagian besar waktu, operasi ini mulus dari sudut pandang Anda. Semua gambar di situs Anda digantikan oleh versi yang di-host oleh CDN (artinya URL gambar berubah).

  • Jetpack memiliki gambar populer yang terpasang di CDN. Anda dapat menggunakannya secara gratis, yang sangat bagus. Keterbatasan utama adalah bahwa itu hanya berfungsi dengan gambar di posting Anda, halaman, dan gambar unggulan Anda. Ini tidak berfungsi untuk gambar apa pun yang membentuk desain Anda (bagian dari tema, tata letak, dll.). Itu adalah gambar yang benar-benar bisa menggunakan CDN-ing.
  • Optimole memiliki built-in CDN sebagai bagian dari fitur optimisasi gambar utama. Yang ini tidak terbatas pada posting dan halaman Anda saja.

�� Pelajaran # 7:

Hubungkan situs Anda ke CDN gambar (Jetpack atau Optimole) atau CDN umum (MaxCDN / StackPath).

�� Sajikan gambar yang lebih kecil untuk pengguna pada koneksi yang lambat

Bukan hanya ukuran layar yang penting ketika memutuskan jenis gambar apa yang harus dilihat pengguna. Mungkin bahkan yang lebih penting, jika mereka menggunakan koneksi internet yang lambat, mereka benar-benar tidak ingin menunggu 10 detik untuk memuat gambar.

Dalam skenario ini, jauh lebih baik untuk menurunkan kualitas gambar Anda sebagai ganti waktu pemuatan. Pengguna pada koneksi yang lebih lambat akan menghargai bahwa mereka dapat melihat gambar sama sekali.

Anda dapat mewujudkannya dengan menggunakan API Informasi Jaringan. Ini tutorial keren tentang cara kerjanya jika Anda ingin menerapkannya dengan tangan.

Jika Anda lebih suka ditangani secara autopilot, sekali lagi, Optimole!

�� Pelajaran # 8:

Sajikan gambar yang lebih kecil dan lebih padat ke pengguna di koneksi internet yang lebih lambat.

�� Alat alat alat!

Sepanjang jalan, saya menyebutkan sejumlah alat yang dapat Anda gunakan untuk membuat pengiriman gambar situs Anda lebih efektif. Berikut ringkasannya:

  • Optimole – memungkinkan Anda mengoptimalkan gambar secara otomatis, mengompresnya, memilih ukuran gambar yang tepat untuk viewport pengunjung, menyajikan gambar melalui CDN, malas memuat gambar, bekerja dengan kecepatan koneksi yang lebih lambat.
  • ImageOptim dan ImageAlpha – menangani kompresi gambar desktop di Mac. Kamu bisa menggunakan TinyPNG pada Menang. Lakukan itu sebelum mengunggah gambar ke situs Anda.
  • XnConvert – memungkinkan Anda mengonversi gambar ke WebP.
  • a3 Beban Malas plugin – malas memuat semua gambar.
  • Jetpack plugin – dilengkapi dengan CDN gambar gratis.
  • MaxCDN / StackPath – CDN umum yang akan menangani seluruh situs Anda, bukan hanya gambar.

alat untuk mengoptimalkan gambar

�� Bacaan lebih lanjut:

  • Bayangkan vs WP Smush vs ShortPixel vs Optimole: Mana yang terbaik untuk mengoptimalkan gambar WordPress? Perbandingan head-to-head
  • Gambar gratis untuk blog – cara mendapatkannya & menggunakannya secara efektif (peringatan! saran yang tidak jelas, didukung data)
  • 11 cara untuk mempercepat kinerja WordPress
  • Pengoptimalan kecepatan situs web: bagaimana melakukannya pada tahun 2019
  • Hosting WordPress tercepat – panduan pemula untuk menemukannya

��‍♂️ TL; DR:

Berikut ini adalah ringkasan dari semua pelajaran individual yang dibagikan di atas:

Pelajaran 1:

Jangan selalu menggunakan JPG. Memprediksi seberapa besar gambar akan didasarkan pada isinya, dan kemudian menggunakan tipe gambar yang benar.

Pelajaran 2:

Jangan repot-repot menggunakan SVG sama sekali jika Anda ingin mengoptimalkan gambar dengan cepat. Waktu yang Anda buang untuk membuat mereka tidak akan membayar (meskipun merasa bebas untuk tidak setuju). PNG akan lebih cepat digunakan dan tidak jauh lebih buruk dalam hal konsumsi ruang disk.

Gunakan WebP saat berurusan dengan gambar yang muncul di beberapa halaman atau gambar yang cukup besar. Itu kecuali Anda dapat menangani pemrosesan WebP secara otomatis, yang dapat dilakukan dengan beberapa alat tambahan. Dalam kasus seperti itu, gunakan WebP di mana-mana. Kami akan membicarakannya dalam beberapa detik.

Pelajaran # 3:

Kompres JPG Anda untuk mencapai tingkat kualitas vs ruang disk yang dapat diterima.

Kompres selalu PNG Anda.

Pelajaran # 4:

Gunakan ukuran gambar yang benar untuk desain Anda.

Buat breakpoints.

Buat beberapa versi dari gambar yang sama untuk menutupi breakpoints.

Gunakan atribut srcset dan ukuran saat menampilkan gambar.

Pelajaran # 5:

Pastikan logo Anda, gambar branding, dan semua gambar yang digunakan dalam posting dan halaman Anda siap untuk layar HiDPI.

Pelajaran # 6:

Malas memuat gambar yang berada di bawah flip.

Pelajaran # 7:

Hubungkan situs Anda ke CDN gambar (Jetpack atau Optimole) atau CDN umum (MaxCDN / StackPath).

Pelajaran # 8:

Sajikan gambar yang lebih kecil dan lebih padat ke pengguna di koneksi internet yang lebih lambat.

Biarkan saya tahu pendapat Anda tentang seluruh tantangan untuk mengoptimalkan gambar untuk web sebanyak mungkin. Juga, apa yang Anda lakukan dengan gambar Anda untuk membuatnya memuat lebih cepat? Bagikan komentar Anda.

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Layout, presentasi, dan pengeditan oleh Karol K.

* Posting ini berisi tautan afiliasi, yang berarti bahwa jika Anda mengklik salah satu tautan produk dan kemudian membeli produk, kami akan menerima sedikit biaya. Namun jangan khawatir, Anda masih akan membayar jumlah standar sehingga tidak ada biaya dari pihak Anda.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map