Cara Meningkatkan dan Mengoptimalkan Gambar untuk WordPress

Sudah lama sejak gambar menjadi sesuatu yang terlalu besar untuk dimuat melalui Internet. Saat ini, situs web tidak akan ada tanpa mereka. Meskipun kecepatan Internet telah meningkat secara dramatis selama bertahun-tahun, sangat penting bagi Anda untuk menjaga gambar di blog Anda.

Hanya karena mudah mengunggah gambar ke situs Anda, bukan berarti Anda harus melakukannya tanpa persiapan apa pun. Gambar yang tidak dioptimalkan sebenarnya dapat merusak situs Anda dalam banyak hal; mulai dari memengaruhi cara pengunjung memikirkan Anda hingga kecepatan situs web dan peringkat SEO Anda. Jika Anda masih belum memikirkannya, kami di sini untuk menunjukkan kepada Anda beberapa cara meningkatkan gambar di WordPress.

Cara mengoptimalkan gambar untuk WordPress sehingga Anda mempercepat situs dan meningkatkan SEO

Mengapa Anda harus mengoptimalkan gambar untuk WordPress? Jika Anda berusaha, Anda dapat mengharapkan hal berikut:

• Situs lebih cepat
• SEO yang lebih baik
• Cadangan yang lebih kecil
• Penggunaan bandwidth lebih sedikit
• Pengguna yang lebih bahagia

Anda juga harus tahu bahwa ada tahapan berbeda di mana Anda dapat mengoptimalkan gambar. Anda dapat merawat gambar bahkan sebelum Anda mengunggahnya ke blog atau Anda dapat melakukannya setelah mengunggah.

Uji gambar dengan cepat di situs Anda

Sebelum Anda mulai mengerjakan pengoptimalan, Anda dapat dengan cepat memeriksa kecepatan dan kinerja situs Anda. Dengan menggunakan salah satu alat dari daftar, Anda akan segera mengetahui dalam bentuk apa gambar di situs Anda.

Kami suka menggunakan GTmetrix yang bahkan akan menampilkan gambar persis yang menyebabkan situs Anda memuat lebih lambat.

Optimalkan gambar untuk WordPress sebelum mengunggah

Saat blogging, kebanyakan orang tidak mengambil semua langkah yang diperlukan untuk mengoptimalkan gambar mereka. Biasanya, orang hanya akan mengambil foto dari kamera atau smartphone mereka, mengunduhnya dari Internet atau membuatnya dengan menggunakan perangkat lunak komputer.

Mereka tidak memikirkan format, dimensi gambar, atau nama file. Jika gambarnya terlihat bagus, mereka hanya berasumsi bahwa itu siap untuk Internet. Jika Anda tidak memeriksa gambar Anda, Anda sedang membangun menuju bencana.

Ubah ukuran gambar

Jangan mengunggah gambar ke situs WordPress Anda sebelum memeriksa lebar dan tinggi setiap gambar. Jika Anda menampilkan gambar pada maksimum 700px, misalnya, sebenarnya tidak perlu mengunggah gambar yang lebih lebar. Jika Anda melakukannya, Anda akan memiliki file yang lebih besar yang akan membuat situs Anda lebih lambat, sedangkan outputnya akan sama. WordPress akan membuat ukuran tambahan, tetapi itu bukan alasan untuk tidak menyiapkan gambar sebelum diunggah.

Mengubah ukuran gambar dengan cepat dan mudah. Ada banyak alat gratis seperti Microsoft Paint yang akan membantu Anda dengan itu. Anda bahkan dapat menemukan alat online gratis untuk mengubah ukuran gambar seperti Easy Resize.

Dimensi gambar akan bervariasi dari satu tema ke tema lainnya. Jika Anda tidak yakin mana yang harus Anda gunakan, lihat lebih dekat pada tema WordPress Anda dan periksa gambar, cari dokumentasi atau minta bantuan dukungan.

Ubah kualitas

Setelah mengubah dimensi, Anda harus mempertimbangkan untuk mengubah kualitas gambar. Tergantung pada perangkat lunaknya, ada berbagai cara untuk memodifikasi kualitas gambar. Misalnya, Photoshop yang selalu populer memungkinkan Anda menyimpan gambar untuk web. Opsi ini akan memungkinkan Anda untuk menyimpan gambar dengan kualitas yang lebih rendah, tetapi gambar tersebut akan dioptimalkan untuk situs Anda.

Juga, jika Anda memilih untuk menyimpan gambar sebagai JPEG, Photoshop akan meminta Anda untuk memilih tingkat kualitas. Dalam hal ini, menurunkan kualitas dari 12 menjadi hanya 8 akan secara dramatis mengurangi ukuran gambar, sementara perbedaan kualitas tidak akan terlalu besar.

Jika Anda masih tidak menggunakan perangkat lunak apa pun untuk mengubah kualitas gambar Anda, Anda dapat mencoba alat Tiny PNG online gratis. Cukup unggah gambar dan lihat perbedaannya.

Pilih format yang tepat

Bahkan setelah perubahan ukuran dan kualitas, Anda harus mempertimbangkan untuk mengubah format. Sebagai permulaan, hanya dengan memilih format yang tepat, Anda dapat mengambil beberapa kilobyte dari sebuah gambar, jika tidak lebih.

Aturan umumnya sangat sederhana. Jika Anda memiliki foto, buatlah menjadi JPEG. Jika Anda memiliki logo, gambar vektor, atau grafik buatan komputer yang sangat sederhana, gunakan PNG. Jika Anda memiliki gambar yang sangat kecil tanpa gradien atau Anda ingin menampilkan animasi sederhana seperti yang ditunjukkan di atas, Anda dapat menggunakan GIF. Umumnya, gambar PNG akan lebih besar daripada gambar JPEG, dan Anda bisa mendapatkan keuntungan dari mengubah format.

Dalam banyak kasus, memformat ulang gambar tidak akan membuat perbedaan kualitas yang signifikan, sementara Anda dapat mengharapkan perbedaan ukuran. Lain kali sebelum Anda mengunggah foto PNG, cobalah dan simpan sebagai JPEG untuk melihat perbedaannya. Untuk penjelasan lebih detail, silahkan simak perbedaan PNG, JPEG, GIF, dan SVG.

Jaga nama file

Meskipun nama file mungkin terdengar tidak penting, sebenarnya itu adalah sesuatu yang harus Anda ketahui. Nama file gambar Anda menyimpan info berharga untuk SEO. Jika Anda ingin orang lain dapat menemukan gambar Anda di Google dan mesin pencari lainnya, Anda harus memberinya nama yang tepat.

Kami menyarankan Anda memberi nama gambar tanpa menggunakan spasi. Jangan lupa sertakan kata kunci jika Anda ingin halaman dan gambar diberi peringkat. Misalnya, jika Anda mengunggah gambar Ferrari California, nama filenya harus "ferrari-california.jpg." Jika Anda menggunakan plugin SEO untuk WordPress, Anda sudah tahu bahwa itu memeriksa tag alt Anda untuk kata kunci. Ya, sangat penting untuk memiliki nama gambar yang tepat.

Optimalkan gambar untuk WordPress setelah diunggah

Setelah menyiapkan gambar di komputer Anda, Anda dapat melanjutkan dengan pengunggahan. Mudah-mudahan, gambar Anda memiliki ukuran dan kualitas yang tepat. Anda memastikan format dan nama file sudah benar. Setelah diunggah, WordPress akan meminta info tambahan. Jangan lewatkan informasi meta; isi detail tentang gambar Anda sehingga Anda dapat dengan mudah mengaturnya dan mempersiapkan SEO.

Judul, deskripsi, teks alternatif, dan keterangan

Sementara mengurus teknis, Anda tidak boleh melupakan SEO. Selalu tambahkan judul dan deskripsi ke media Anda. Ini akan membantu Anda dengan manajemen media WordPress, dan juga akan bekerja menuju SEO yang lebih baik. Juga, jangan lupa tag alt yang akan ditampilkan untuk pengunjung yang tidak dapat melihat gambar Anda dengan benar. Tidak hanya ini akan membantu pengguna Anda, tetapi juga akan membantu Anda dengan SEO. Halaman Anda akan berperingkat lebih baik, dan pengguna akan dapat menemukan gambar baru Anda dengan lebih mudah.

Meskipun Anda tidak memerlukan teks sepanjang waktu, pastikan Anda menambahkan teks untuk gambar yang memerlukan penjelasan tambahan (misalnya, tangkapan layar).

Edit gambar dengan WordPress

Jika Anda menyadari bahwa gambar masih perlu diedit lebih lanjut, Anda harus tahu bahwa WordPress mengizinkan Anda melakukannya bahkan setelah Anda mengunggah file. Ubah rotasi, potong, dan skala gambar yang sudah Anda unggah. Anda bahkan dapat mengedit hanya thumbnail atau semua ukuran lainnya. Editor asli WordPress sangat sederhana, tetapi dapat Anda hemat dari waktu ke waktu.

Buat ulang semua thumbnail

Sebagian besar teknik sebelumnya akan membantu Anda dengan file gambar baru yang masih akan Anda unggah. Tetapi bagaimana jika Anda memiliki ratusan bahkan ribuan file yang sudah diunggah ke situs WordPress Anda? Jangan khawatir; Anda masih dapat mengoptimalkan gambar tersebut dan mengubah ukurannya.

Untuk perbaikan cepat, Anda mungkin tertarik dengan plugin Regenerate Thumbnails gratis yang telah digunakan oleh lebih dari satu juta pengguna. Jika Anda ingin lebih mengontrol gambar, Anda harus memeriksa beberapa plugin WordPress terbaik untuk pengoptimalan gambar yang akan kami tunjukkan di baris berikut artikel ini.

Gunakan plugin WordPress

Tentu saja, ada lusinan plugin WordPress yang dapat membantu Anda mengoptimalkan gambar di situs Anda. Gulir ke bawah untuk melihat plugin WordPress terbaik untuk mengoptimalkan gambar.

Lazy Load gambar bila perlu

Terkadang, kualitas gambar akan jauh lebih penting daripada ukurannya. Ini sebagian besar berlaku untuk fotografer yang ingin foto mereka menjadi yang terbaik. Mereka tidak dapat mengambil risiko mengurangi ukuran atau kualitas file. Namun, itu tidak berarti Anda harus melupakan pengoptimalan. Untuk mengoptimalkan gambar untuk WordPress dalam hal ini, Anda harus mempertimbangkan pemuatan lambat.

Lazy load adalah teknik yang memuat gambar hanya ketika pengguna membutuhkannya (gulir ke sana). Misalnya, jika Anda mengunggah dua puluh foto berkualitas tinggi dalam satu artikel, mereka akan sangat memperlambat situs Anda. Tetapi jika Anda malas memuat gambar, artikel akan secepat kilat dan foto hanya akan dimuat saat dibutuhkan – pada saat pengguna mendapatkannya.

Memiliki gambar yang responsif

Meskipun sebagian besar tema WordPress responsif, itu tidak berarti bahwa gambar Anda juga responsif. Karena Anda tidak ingin gambar besar dimuat di layar kecil, Anda perlu mendaftarkan ukuran gambar tambahan untuk situs Anda. Jika tema Anda tidak menggunakan gambar responsif, pertimbangkan untuk mempekerjakan seorang profesional untuk pekerjaan itu – ini tidak semudah kedengarannya.

Optimalkan gambar untuk media sosial

Jika Anda ingin memastikan bahwa gambar Anda terlihat bagus di media sosial, Anda harus mengambil langkah ekstra dan mengoptimalkan tag meta dan markup skema.

Jika Anda menggunakan plugin SEO seperti Yoast, jangan lupa untuk memeriksa pengaturannya. Misalnya, Yoast akan membiarkan Anda mengatur beberapa hal yang berkaitan dengan media sosial. Jadi, navigasikan ke SEO -> Sosial dan masukkan informasi di Facebook, Twitter, Google+, dan Pinterest.

Jika Anda menginginkan lebih, dan Anda ingin mengoptimalkan gambar untuk situs web media sosial tambahan, lihat WPSSO – Meta Tag Akurat + Markup Skema untuk Optimasi Berbagi Sosial & plugin SEO.

Ubah cara WordPress mengompresi gambar JPEG

Jika Anda mengunggah banyak gambar JPEG di situs WordPress Anda, Anda mungkin memperhatikan bahwa mereka kehilangan kualitas aslinya. Jika Anda bertanya-tanya apakah WordPress yang harus disalahkan, sekarang Anda akan mendapatkan jawaban Anda – ya, benar!

Setelah Anda mengunggah gambar dalam format JPEG, WordPress secara otomatis mengubah kompresi dan memutuskan Anda ingin gambar kehilangan kualitasnya. Untuk lebih spesifik, WP menggunakan kompresi 90% pada JPGE Anda. Itu bagus jika gambar Anda hanya ada untuk digunakan sebagai thumbnail posting atau untuk ditampilkan dalam posting, tetapi jika Anda mengunggah foto Anda, Anda ingin itu sebaik mungkin, bukan?

Untungnya, Anda hanya perlu satu baris kode untuk mengubahnya.

Hentikan kompresi gambar JPEG:

Jika Anda tidak ingin gambar JPEG Anda dikompresi, cukup salin dan tempel kode berikut ke file functions.php Anda:

 add_filter('jpeg_quality', function($arg){kembali 100;});

Jangan lupa untuk menyimpan perubahan dan Anda siap mengunggah gambar baru.

Di sisi lain, gambar mungkin bukan masalah besar bagi Anda. Jadi Anda mungkin ingin mereka menjadi lebih terkompresi dan menghemat waktu Anda saat memuat situs Anda. Jika Anda mengubah angka terakhir pada baris kode tersebut, Anda akan mengubah kualitas gambar yang baru diunggah.

Kompres gambar JPEG lebih banyak lagi:

Semakin rendah angkanya, semakin banyak gambar yang akan dikompres. Misalnya, untuk mengompresi JPEG lebih banyak lagi, Anda memerlukan kode ini:

 add_filter('jpeg_quality', function($arg){mengembalikan 80;});

Jangan lupa; tingkat kompresi default adalah 90.

Plugin pengoptimalan gambar paling populer untuk WordPress

Di awal artikel ini, kami berbicara tentang cara mengoptimalkan gambar untuk WordPress sehingga Anda mempercepat situs Anda dan meningkatkan SEO. Seperti yang Anda lihat, ada beberapa metode berbeda yang dapat Anda gunakan. Sangat penting untuk menjaga gambar bahkan sebelum Anda mengunggahnya ke blog Anda. Tetapi ketika gambar sudah ada di situs, mungkin tidak mungkin untuk mengoptimalkan ulang setiap gambar secara terpisah dan kemudian mengunggahnya sekali lagi.

Jangan khawatir; tidak ada yang mengharapkan Anda untuk melakukannya di tempat pertama. Tetap bersama kami di menit-menit berikutnya karena kami akan menunjukkan kepada Anda plugin pengoptimalan gambar paling populer untuk WordPress.

Untuk mengoptimalkan gambar, Anda hanya perlu memilih plugin dari daftar. Anda harus mengonfigurasinya dan memilih hal-hal yang akan dilakukan plugin untuk Anda. Setelah itu, Anda dapat bersantai dan mendelegasikan pekerjaan ke plugin pilihan Anda, sementara Anda dapat mulai mengatur file media Anda.

Plugin berikut akan membantu Anda mengompres gambar di situs WordPress mana pun yang Anda miliki. Mereka akan membuat situs dimuat lebih cepat dan pada akhirnya membantu Anda meningkatkan SEO.

Plugin WP Smush

HARGA: Gratis

Dengan lebih dari 700.000 pemasangan aktif, WP Smush harus menjadi salah satu plugin pengoptimalan gambar terbaik untuk WordPress. Ini dapat dengan cepat mengoptimalkan gambar dengan menggunakan teknik kompresi yang berbeda. Hal hebat tentang mengompresi gambar dengan WP Smush adalah gambar tidak akan kehilangan kualitas. Tidak percaya kami? Uji pluginnya.

Ketika kami berbicara tentang menyiapkan gambar untuk WordPress, kami menyebutkan bahwa mengubah ukuran adalah bagian penting dari proses pengoptimalan. Dengan plugin ini, Anda tidak perlu khawatir karena WP Smush memungkinkan Anda mengatur dimensi maksimum. Setelah melakukannya, semua gambar yang lebih besar akan diperkecil secara otomatis sebelum Anda menambahkannya ke perpustakaan.

Plugin fantastis ini dapat bekerja dengan file JPEG, GIF, dan PNG. Ia bekerja dengan semua direktori Anda, secara otomatis menangani lampiran, dan bahkan bekerja di multisite. Anda dapat mengoperasikan setiap gambar secara manual atau mengedit lima puluh gambar secara massal. Jika Anda menginginkan hasil yang lebih baik dan lebih banyak opsi, lihat WP Smush PRO.

Plugin Pengoptimal Gambar EWWW

HARGA: Gratis

Di balik namanya yang lucu, ada salah satu plugin pengoptimalan gambar paling populer untuk WordPress. Sama seperti yang disebutkan sebelumnya, EWWW Image Optimizer dapat mengompresi gambar Anda tanpa mempengaruhi kualitasnya. Ketika Anda berpikir bahwa plugin dapat mempercepat situs Anda dalam hitungan detik, Anda sudah siap untuk mengunduhnya. Setelah Anda melakukannya, Anda akan dapat mengoptimalkan gambar secara massal, dan galeri seperti GRAND FlaGallery, NextCellent, dan NextGEN bahkan akan mendapatkan halaman Pengoptimalan Massal mereka sendiri.

Semua gambar yang menggunakan kelas WP_Image_Editor di WordPress akan dioptimalkan secara otomatis , sementara Anda dapat mengerjakan keajaiban lainnya secara manual. Kami senang Anda dapat memilih folder yang ingin Anda optimalkan. Untuk detail lebih lanjut tentang ini, dan plugin mana yang menggunakan kelas, silakan buka halaman Pengoptimal Gambar EWWW resmi di repositori WordPress.

Kompres plugin gambar JPEG & PNG

HARGA: Gratis

Jika panda kecil yang lucu memegang logo WordPress tidak membuat Anda ingin mempelajari lebih lanjut tentang plugin ini, kami tidak tahu apa yang akan terjadi. Dan jika panda terlihat familier, itu karena panda yang sama membantu Anda mengompresi gambar di situs web TinyPNG. Ya, sepertinya hewan itu lebih fleksibel dari yang kita duga. Tapi mari kita fokus pada plugin.

Jika Anda menggunakan plugin ini, Panda akan secara otomatis mengoptimalkan gambar Anda. Setiap kali Anda mengunggah yang baru, plugin akan mengambil alih dan melakukan tugasnya. Namun, Anda dapat mengoptimalkan gambar individu atau melakukannya secara massal hanya dengan membuka perpustakaan media.

Kompres gambar JPEG & PNG bahkan mendukung PNG animasi, bekerja dengan sempurna di multisite, kompatibel dengan WooComerce dan tidak akan memiliki masalah dengan WP Offload S3.

Hal yang hebat tentang plugin ini adalah memungkinkan Anda untuk mengatur atribut lebar dan tinggi maksimum untuk semua gambar. Jika Anda khawatir tentang apa yang akan dilakukan metadata, jangan khawatir; panda akan menjaga semua info tetap utuh.

Tidak ada batasan ukuran file, Anda dapat mengatur widget dasbor, dan bahkan berfungsi dengan aplikasi seluler WordPress. Karena semua itu, Kompres gambar JPEG & PNG memiliki lebih dari 100.000 pemasangan aktif dan layak mendapat tempat di daftar plugin pengoptimalan gambar terbaik untuk WordPress.

Plugin kegilaan

HARGA: Gratis

Meskipun gambar sampul untuk plugin ini mungkin membuat Anda takut, luangkan waktu sejenak dan lihat semua fitur Imsanity. Oh, bahkan nama pluginnya terdengar gila, bukan? Setelah Anda setuju dengan nama plugin, Anda akan melihat bahwa ia memiliki banyak hal untuk ditawarkan.

Imsanity dapat secara otomatis menskalakan gambar, memungkinkan Anda untuk mengatur dimensi maksimum, dan bahkan menampilkan opsi pengubahan ukuran massal. Ini penting jika Anda sudah memiliki ratusan gambar di blog Anda yang perlu dioptimasi.

Plugin gratis ini adalah pilihan yang bagus jika Anda tidak ingin bersusah payah dengan pengaturan plugin. Yang diperlukan hanyalah menginstal dan mengaktifkan Imsanity, mengatur beberapa opsi, dan Anda dapat melupakannya; itu akan mengatur jalannya sendiri menuju pengoptimalan gambar.

Kami menyukai opsi yang memungkinkan Anda mengonversi gambar BMP ke JPG. Untuk berjaga-jaga jika Anda memiliki banyak file BMP yang salah Anda unggah beberapa waktu lalu, ini akan menjadi penyelamat.

Plugin Pengoptimal Gambar ShortPixel

HARGA: Gratis

Dengan lebih dari 30.000 pemasangan aktif, ShortPixel Image masih menjadi salah satu plugin pengoptimalan gambar paling populer untuk WordPress. Plugin ini dikemas dengan fitur, dan itu harus dimiliki oleh situs yang memiliki banyak gambar untuk dioptimalkan.

ShortPixel Image Optimizer tidak hanya akan mengoptimalkan dokumen JPG, PNG, GIF, dan PDF untuk Anda, tetapi juga memungkinkan Anda mengonversi gambar JPEG, PNG, atau GIF ke WebP . Plugin ini bekerja dengan baik dengan plugin galeri lainnya, dan tidak peduli jika situs Anda menggunakan HTTP atau HTTPS. Ini akan memungkinkan Anda menghapus data EXIF ​​​​dari gambar (sesuatu yang akan disukai fotografer).

Plugin mengenali gambar yang sudah dioptimalkan sehingga akan melewatinya saat dibutuhkan. Anda dapat mengizinkan atau melarang pengoptimalan otomatis, dan melakukan lebih banyak lagi dengan plugin fantastis ini. Lihat halaman resmi di repositori untuk melihat semua fitur.

Optimus – Pengoptimal Gambar WordPress

HARGA: Gratis

Sama seperti plugin yang disebutkan sebelumnya, Optimus akan mengoptimalkan gambar Anda untuk WordPress, dan itu akan melakukannya tanpa mempengaruhi kualitas gambar Anda. Anda dapat membiarkan plugin bekerja secara otomatis, atau Anda dapat mematikan opsi dan hanya mengoptimalkan gambar bila diperlukan.

Optimus bekerja di multisite, tidak asing dengan situs e-commerce WordPress, dan sepenuhnya dioptimalkan untuk Aplikasi Seluler WordPress dan Windows Live Writer. Ini akan mempercepat situs Anda tanpa Anda harus menyentuh sebaris kode pun. Plugin ini menawarkan lebih banyak, tetapi Anda harus memilih versi premium. Untuk melihat lebih banyak, silakan buka halaman resmi di repositori plugin WordPress.

Tambahkan pemuatan lambat untuk video dan gambar Anda di WordPress

Setelah Anda mulai menambahkan banyak materi video dan gambar di situs web Anda, jelas bahwa itu akan mulai memuat lebih lambat. Tidak peduli dari mana asalnya, video dan gambar besar akan menjadi beban berat di situs Anda dan akan membuat pengunjung Anda menunggu lebih lama dari yang dibutuhkan untuk memuat semua konten. Dengan WordPress, itu seharusnya tidak menjadi masalah besar dan inilah cara Anda dapat dengan mudah memperbaiki situasi.

Jika Anda tahu jalan di sekitar PHP, ada artikel bagus tentang menambahkan pemuatan lambat untuk gambar dan gulir tak terbatas yang ditulis oleh rekan kami di Tema Elegan.

Jika tidak, dalam beberapa baris berikutnya kami akan menyebutkan beberapa plugin lazy loading paling populer yang akan membuat situs Anda dimuat lebih cepat . Dan Anda bahkan tidak perlu melakukan banyak hal selain menginstal plugin dan mengaturnya dalam beberapa langkah cepat.

Beban Malas untuk Video

HARGA: Gratis

Jika Anda memiliki banyak video Youtube dan Vimeo, Anda harus mempertimbangkan untuk menginstal plugin ini. Setelah Anda mengaturnya, plugin akan menempatkan gambar di video Anda dan karena itu, situs web Anda akan memuat lebih cepat. Setelah pengunjung menggulir ke video, gambar ini akan ditampilkan dengan tombol "putar" di atasnya. Setelah diklik, video akan mulai dimuat dan diputar. Demo sederhana dapat dilihat di situs pengembang.

WP YouTube Lyte

HARGA: Gratis

Plugin ini akan melakukan tugasnya dengan cepat dan mudah. Setelah menginstalnya, cukup tambahkan tautan ke video Youtube Anda atau gunakan kode pendek untuk menambahkannya. Anda dapat memilih antara menambahkan video biasa, daftar putar, atau hanya audio dari video yang dipilih. Setelah itu, video Youtube Anda akan mendapatkan gambar di atasnya yang memungkinkan pemuatan malas. Cukup klik pada gambar untuk memulai video atau audio Anda.
Lihat demo di situs pengembang.

a3 Beban Malas

HARGA: Gratis

Yang ini didedikasikan untuk situs seluler Anda. Jika Anda memiliki banyak gambar dan/atau video yang ingin ditampilkan kepada pengunjung di perangkat seluler, Anda harus melihat a3 Lazy Load. Ini akan memungkinkan Anda untuk menambahkan pemuatan lambat ke gambar dan video Anda dan plugin bahkan akan membiarkan Anda memilih efek transisi yang akan muncul kepada pengguna saat mereka menggulir konten yang sedang dimuat.

Di area admin, Anda dapat dengan mudah menghidupkan dan mematikan konten yang ingin Anda muat lambat. Untuk yang diaktifkan, konten hanya akan dimuat pada saat pengunjung menggulir ke bagian konten tersebut.
Ada demo yang ditampilkan dengan baik yang menampilkan 1000 gambar – masing-masing hanya dimuat setelah Anda menggulirnya. Karena plugin ini juga memuat video malas, ada demo video yang dapat Anda lihat dengan mengklik tautan di atas.

BJ Lazy Load

HARGA: Gratis

Jika Anda tidak memerlukan dukungan untuk video dan hanya ingin gambar Anda dimuat dengan lambat, Anda harus memeriksa plugin WP ini. Setelah diinstal dan diatur, itu akan mengganti gambar, thumbnail, gambar Gravatar, dan bahkan iframe Anda dengan placeholder. Mirip dengan plugin yang disebutkan sebelumnya, itu akan memuat konten hanya setelah pengguna datang ke sana.

Baik itu gambar atau video yang ingin Anda muat lambat, salah satu plugin yang disebutkan di atas akan membantu Anda dalam hitungan detik. Semuanya gratis, jadi tidak ada alasan untuk tidak mencoba setidaknya salah satu plugin dan melihat berapa banyak beban yang dibutuhkan. Tentu saja, ada banyak plugin lain dengan fungsi yang sama dan Anda bebas untuk menelusuri dan mencoba semuanya.

Tampilkan gambar sebelum dan sesudah dengan cara yang menarik

Kami yakin Anda telah melihat banyak contoh gambar sebelum/sesudah. Tidak tahu tentang Anda, tetapi hal pertama yang kami pikirkan ketika kami melihat frasa "sebelum dan sesudah" adalah program pelatihan kebugaran di mana orang menunjukkan tubuh mereka sebelum dan sesudah program latihan.

Jika Anda memikirkannya, sebagian besar situs web menggunakan pendekatan sederhana untuk menunjukkan perbedaannya – mereka mengambil kedua gambar dan menempatkannya di samping yang lain atau bahkan satu di atas yang lain. Jika Anda menginginkan hasil yang sama, Anda tidak akan membaca artikel ini karena Anda sudah tahu caranya.

Bagaimana jika kami memberi tahu Anda bahwa ada cara yang menakjubkan secara visual untuk menyelesaikan masalah ini sebelum/sesudah dan itu hanya dalam jangkauan tangan Anda? Nah, ada dan setelah setup, Anda akan memuji pengembang karena hasil akhirnya benar-benar keren.

Dua puluh Dua puluh

HARGA: Gratis

Twenty Twenty adalah nama plugin luar biasa ini yang dapat Anda unduh secara gratis di repositori plugin WordPress.

Plugin akan membiarkan Anda menempatkan satu gambar di atas yang lain dan membiarkan Anda bermain dengan slider sehingga Anda dapat menyembunyikan/mengungkapkan gambar. Silakan, lihat demo dan Anda akan melihat apa yang sedang kita bicarakan.

Oke, sekarang ketika Anda terpikat pada plugin kecil ini, mari kita lihat bagaimana membuat efek yang menakjubkan ini. Meskipun relatif mudah untuk membuat ulang efek demo, Anda masih perlu mengetahui cara di sekitar HTML dasar. Ayo pergi:

1. Buat postingan baru atau buka postingan yang sudah ada
2. Sisipkan dua gambar ke dalam postingan. Jika Anda bekerja di Editor Visual, Anda akan melihat gambar satu di atas yang lain. Jika Anda bekerja di Editor Teks, Anda akan melihat kode yang mirip dengan ini:

 <a href="image1.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
height="200" /></a>

<a href="image2.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
height="200" /></a>

3. Masukkan tag [dua puluh] sebelum gambar pertama
4. Setelah yang kedua masukkan tag [/twentytwenty]

Anda harus berakhir dengan sesuatu seperti ini di Editor Teks Anda:

5. Pastikan gambar Anda berukuran sama untuk mendapatkan hasil terbaik
6. Pratinjau atau publikasikan posting Anda dan nikmati visual menakjubkan Anda sebelum dan sesudah gambar

Cara membuat gambar interaktif – menggambar, menambahkan deskripsi, dan tautan

Saat ini, sulit untuk menjalankan situs web tanpa multimedia. Gambar, video, dan musik adalah bagian dari hampir setiap situs web. Rata-rata pengguna Internet sangat bergantung pada rangsangan visual, jadi Anda harus menjaga bagian visual dan interaktif situs Anda. Artikel dengan gambar menerima 94% lebih banyak penayangan daripada artikel tanpa gambar. Selain itu, sudah menjadi fakta yang diketahui bahwa multimedia di situs web dapat meningkatkan ROI pemasaran konten.

Kami berharap tidak perlu membujuk Anda untuk menjaga gambar di situs Anda. Bahkan jika Anda tidak menggunakan gambar dalam artikel (yang seharusnya), Anda menggunakan gambar unggulan, bukan? Ada cukup banyak plugin galeri yang dapat membantu Anda mengelola gambar di situs WordPress Anda, Anda dapat memiliki tema terkait fotografi, menghubungkan Instagram ke situs WordPress Anda, dan melakukan lebih banyak lagi. Tetapi bagaimana jika Anda ingin membuat konten yang lebih interaktif?

Sebagai permulaan, Anda mungkin tertarik untuk menambahkan efek gambar sebelum-sesudah yang akan disukai pengguna Anda. Jangan lupakan Virtual Reality di WordPress yang semakin populer setelah Automattic memperkenalkan VR ke WordPress.com. Tetap saja, ada sesuatu yang hilang. Apakah mungkin membuat gambar interaktif dengan bagian yang dapat diklik? Ya, itu mungkin, dan kami akan menunjukkan kepada Anda betapa menyenangkan dan mudahnya itu.

Menarik perhatian

HARGA: Gratis

Hal pertama tentang plugin ini yang akan Anda sukai adalah bahwa plugin ini sepenuhnya gratis! Sama seperti plugin lain dari repositori WordPress, Anda dapat mengunduh, menginstal, dan mengaktifkannya dalam hitungan menit. Versi gratis akan memungkinkan Anda untuk bekerja dengan satu gambar interaktif. Jika Anda menginginkan lebih, Anda harus memilih versi PRO, tetapi kita akan membicarakannya nanti.

Plugin ini responsif, dan Anda tidak perlu khawatir tentang gambar interaktif yang ditampilkan dengan benar di perangkat apa pun. Tidak hanya gambar akan diskalakan sesuai dengan ukuran layar, tetapi juga akan berfungsi di sebagian besar browser modern dan lama (desktop dan seluler). Draw Attention menggunakan elemen kanvas saat ditampilkan di browser baru sementara itu akan kembali ke peta gambar jika Anda memuatnya di browser lama.

Fitur

Sebelum masuk ke contoh yang akan menunjukkan kepada Anda betapa kuatnya plugin sederhana ini, mari kita lihat apa yang diharapkan dari Draw Attention:

• Draw – Setelah Anda mengunggah gambar, Anda akan mendapatkan kesempatan untuk menggambar bentuk di atasnya. Pilih bagian mana pun dari gambar Anda yang dapat dipilih/diklik
• Warna – Sesuaikan warna sehingga Anda dapat membuat hotspot sesuai dengan desain situs Anda
• Sorot saat melayang – Tampilkan bagian lain dari gambar jika pengguna mengarahkan kursor ke bagian yang dipilih
• Tampilkan lebih banyak info – Menampilkan lebih banyak informasi tentang bagian gambar yang dipilih
• Buka URL – Arahkan pengguna ke URL apa pun jika mereka mengklik pilihan

Contoh – Peta interaktif Hawaii

Kami akan menggunakan contoh dari situs demo untuk menunjukkan kepada Anda apa sebenarnya yang dapat Anda lakukan dengan Draw Attention. Jadi, mari kita lihat seperti apa peta interaktif Hawaii saat dibuat dengan plugin.

Hal pertama yang harus Anda lakukan adalah menemukan gambar pulau Hawaii. Setelah Anda menavigasi ke Draw Attention -> Edit Image, Anda harus mengunggah gambar ke area di sidebar kanan. Setelah gambar dimuat, kesenangan dapat dimulai.

Di sini Anda dapat memilih warna untuk sorotan (warna, batas, opacity, dll.), menata "kotak info lebih lanjut" (gambar, judul, warna teks, dll.). Jika Anda tidak ingin memilih setiap warna untuk gambar secara manual, Anda dapat dengan cepat memilih skema warna dari sidebar kanan.

Bagian paling ajaib terjadi di layar pengaturan Area Hotspot . Di sini Anda akan mendapatkan gambar Anda dimuat ke ukuran penuh. Yang harus Anda lakukan sekarang adalah mulai menggambar dan membuat hotspot baru. Anda dapat menambahkan poin sebanyak yang Anda inginkan yang berarti Anda dapat membuat pilihan komprehensif yang Anda inginkan. Anda dapat membuat hotspot sebanyak-banyaknya, dan masing-masing dapat memiliki pengaturannya sendiri.

Jadi, dalam contoh ini, Anda harus memilih salah satu pulau. Pilih judul untuk pulau, tambahkan deskripsi dan gambar tambahan yang akan ditampilkan setelah pengguna mengarahkan hotspot (bagian kanan gambar GIF yang ditunjukkan di atas).

Anda harus mengulangi proses untuk setiap pulau yang ingin Anda interaktifkan. Setelah hotspot Anda siap, cukup salin kode pendek dari sisi kanan. Tempelkan kode pendek ke dalam pos, halaman, widget, atau di mana pun Anda ingin menampilkan peta interaktif baru Anda, dan selesai! Jika Anda ingin mengarahkan pengguna ke halaman lain setelah mereka mengklik pilihan, Anda hanya perlu memilih URL, bukan deskripsi. Semudah itu!

versi PRO

Sementara versi gratis akan sempurna jika Anda hanya membutuhkan satu gambar, versi PRO akan memungkinkan Anda untuk memiliki banyak gambar interaktif di situs Anda seperti yang Anda inginkan. Meskipun ini akan menjadi hal yang paling penting untuk dipertimbangkan, versi PRO akan memberi Anda lebih dari beberapa gambar.

Fitur Opsi Tata Letak akan memungkinkan Anda menampilkan lebih banyak informasi tentang bagian gambar yang dipilih. Misalnya, Anda akan menampilkan info di lightbox atau di bilah alat sederhana yang akan muncul setelah pengguna mengarahkan kursor ke bagian gambar yang dipilih.

Ada juga dua puluh palet warna standar, jadi Anda tidak perlu menyesuaikan setiap warna secara manual. Versi PRO akan dikenakan biaya $74 untuk satu lisensi situs, tetapi jika Anda membutuhkan lebih dari satu gambar interaktif, ini tidak perlu dipikirkan lagi.

Cara membuat ulang ukuran gambar tambahan

Relatif mudah untuk mendaftarkan ukuran gambar baru di tema WordPress Anda. Setelah Anda memberi tahu sistem Anda seberapa besar gambar Anda seharusnya, menamainya dan memutuskan cara memotongnya, Anda bebas mendistribusikan gambar di mana pun Anda mau. Tapi bagaimana dengan gambar lama?

Jika Anda telah menggunakan salah satu teknik yang telah kami tunjukkan, Anda telah menyiapkan rumput untuk gambar baru. Baik Anda menggunakan ukuran gambar yang baru didaftarkan untuk thumbnail posting atau mengizinkan penulis untuk menggunakannya dalam posting, aturan baru hanya berlaku untuk gambar yang diunggah setelah Anda membuat perubahan pada file functions.php. Untuk mengubah gambar lama, kami sarankan menggunakan plugin Regenerate Thumbnails.

Buat Ulang Gambar Kecil:

HARGA: Gratis

1. Buka Plugin->Tambah Baru
2. Cari “Regenerasi Thumbnail”
3. Instal dan aktifkan plugin
4. Arahkan ke Alat-> Regen.Thumbnail

Jika Anda ingin mengubah ukuran semua gambar Anda, cukup klik tombol “Regenerate All Thumbnails” dan tunggu plugin melakukan kerja keras.

Jika Anda ingin melihat gambar yang akan diubah ukurannya, atau jika Anda hanya ingin mengubah ukuran beberapa gambar, buka Pustaka Media Anda di mana Anda akan menemukan opsi baru di bawah "Tindakan Massal" dan satu di samping setiap gambar di galeri.

Hal yang baik tentang plugin ini adalah tidak menghapus gambar asli Anda. Ini hanya akan membuat ukuran gambar baru yang dapat Anda gunakan dalam tema Anda, sedangkan yang asli akan ditinggalkan untuk Anda gunakan nanti atau hapus secara manual jika Anda memutuskan tidak membutuhkannya.

Itu dia. Nikmati thumbnail baru Anda atau lihat plugin Simple Image Sizes yang dapat melakukan hal yang sama.

Hapus atribut gambar lebar dan tinggi dengan jQuery

Saat menambahkan gambar ke posting WordPress, sistem secara otomatis menambahkan atribut tinggi dan lebarnya ke gambar. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</skrip>
<skrip>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</skrip>

3. Simpan perubahan

Dan Anda sudah selesai! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. Buka file functions.php Anda
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. Simpan perubahan
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. Buka function.php
2. Salin dan tempel kode berikut:

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. Simpan perubahan

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

Kesimpulan

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.