Cara meningkatkan gambar di WordPress

Sudah lama sejak gambar terlalu besar untuk dimuat di Internet. Saat ini, situs web tidak dapat ada tanpanya. Meskipun kecepatan internet telah meningkat secara dramatis selama bertahun-tahun, sangat penting bagi Anda untuk menjaga foto-foto di blog Anda.

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

Dalam panduan ini, kami akan menunjukkan kepada Anda:

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

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

• Situs tercepat
• SEO yang lebih baik
• Cadangan yang lebih kecil
• Lebih sedikit penggunaan bandwidth
• Pengguna yang paling bahagia

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

Tes gambar di situs Anda dengan cepat

Sebelum Anda mulai bekerja pada optimasi, Anda dapat dengan cepat memeriksa situs Anda untuk kecepatan dan kinerja. Dengan menggunakan salah satu alat dalam daftar, Anda akan segera tahu apa bentuk gambar di situs Anda.

Kami suka menggunakan GTmetrix, yang bahkan akan menunjukkan gambar yang tepat yang membuat situs Anda memuat lebih lambat.

Optimalkan gambar untuk WordPress sebelum mengunggah

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

Mereka tidak memikirkan format, dimensi gambar atau nama file. Jika gambar terlihat bagus, mereka hanya berasumsi bahwa Internet sudah siap. Jika Anda tidak memverifikasi gambar Anda, Anda bergerak menuju bencana.

Ubah ukuran gambar

Jangan mengunggah gambar ke situs web WordPress Anda sebelum memeriksa lebar dan tinggi setiap gambar. Misalnya, jika Anda menampilkan gambar maksimal 700 piksel, Anda tidak perlu memuat gambar yang lebih besar. Jika Anda melakukannya, Anda akan memiliki file yang lebih besar yang akan memperlambat situs Anda, sementara hasilnya akan sama. WordPress akan membuat ukuran tambahan, tapi itu bukan alasan untuk tidak menyiapkan gambar sebelum mengunggahnya.

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

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

Ubah kualitasnya

Setelah mengubah dimensi, Anda harus mempertimbangkan untuk mengubah kualitas gambar. Tergantung pada perangkat lunaknya, ada berbagai cara untuk memodifikasi kualitas gambar. Misalnya, Photoshop yang pernah populer memungkinkan Anda menyimpan gambar untuk web. Opsi ini memungkinkan Anda untuk menyimpan gambar dengan kualitas lebih rendah, tetapi mereka 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, mengurangi kualitas dari 12 menjadi hanya 8 akan secara dramatis mengurangi ukuran gambar, sedangkan perbedaan kualitas tidak akan sebesar.

Jika Anda belum 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 benar

Bahkan setelah ukuran dan kualitas berubah, Anda harus mempertimbangkan untuk mengubah format. Sebagai permulaan, hanya dengan memilih format yang benar, Anda dapat menghapus beberapa kilobyte dari suatu gambar, jika tidak lebih.

Aturan umum sangat sederhana. Jika Anda memiliki foto, jadikan JPEG. Jika Anda memiliki logo, gambar vektor, atau grafik yang dihasilkan komputer yang sangat sederhana, gunakan PNG. Jika Anda memiliki gambar yang sangat kecil tanpa gradien atau ingin menampilkan animasi sederhana seperti yang ditunjukkan di atas, Anda dapat menggunakan GIF. Secara umum, gambar PNG akan jauh lebih besar dari gambar JPEG, dan Anda bisa mendapat manfaat dari mengubah format.

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

Jaga nama file

Meskipun nama file mungkin tidak terlihat penting, itu sebenarnya sesuatu yang harus Anda sangat waspadai. Nama file gambar Anda berisi informasi berharga untuk SEO. Jika Anda ingin orang lain dapat menemukan gambar Anda di Google dan mesin pencari lainnya, Anda harus memberikannya nama yang tepat.

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

Optimalkan gambar untuk WordPress setelah mengunggah

Setelah menyiapkan gambar di komputer Anda, Anda dapat melanjutkan mengunggah. Semoga gambar Anda memiliki ukuran dan kualitas yang tepat. Dia memastikan bahwa nama file dan formatnya benar. Setelah memuat, WordPress akan meminta informasi tambahan. Jangan melewatkan informasi-meta; Isi rincian tentang gambar Anda sehingga Anda dapat dengan mudah mengatur dan mempersiapkan SEO.

Judul, deskripsi, teks alternatif dan subtitle

Saat berurusan dengan masalah teknis, Anda tidak boleh lupa tentang SEO. Selalu tambahkan judul dan deskripsi ke media Anda. Ini akan membantu Anda dengan manajemen media WordPress, dan itu juga akan bekerja menuju SEO yang lebih baik. Juga, jangan lupa tag alt yang akan ditampilkan kepada pengunjung yang tidak dapat melihat gambar Anda dengan benar. Ini tidak hanya berguna bagi pengguna Anda, tetapi juga akan membantu Anda dengan SEO. Halaman Anda akan mendapat peringkat yang lebih baik dan pengguna akan dapat menemukan gambar baru mereka dengan lebih mudah.

Meskipun Anda tidak akan memerlukan subtitle setiap saat, pastikan untuk menambahkan subtitle untuk gambar yang membutuhkan penjelasan tambahan (misalnya, tangkapan layar).

Edit gambar dengan WordPress

Jika Anda menyadari bahwa suatu gambar masih membutuhkan lebih banyak pengeditan, Anda harus tahu bahwa WordPress memungkinkan Anda melakukannya bahkan setelah mengunggah file. Ubah rotasi, krop, dan skala gambar Anda telah mengunggah. Anda bahkan dapat mengedit thumbnail saja atau semua ukuran lainnya. Editor WordPress asli sangat sederhana, tetapi Anda dapat menyimpannya dari waktu ke waktu.

Regenerasi semua model

Sebagian besar teknik di atas akan membantu Anda dengan file gambar baru yang akan Anda unggah. Tetapi bagaimana jika Anda sudah memiliki ratusan, jika tidak ribuan, file diunggah ke situs WordPress Anda? Jangan khawatir; Anda masih dapat mengoptimalkan gambar-gambar itu 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 artikel ini.

Gunakan plugin WordPress

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

Malas memuat gambar saat dibutuhkan

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

Pemuatan malas adalah teknik yang memuat gambar hanya saat pengguna membutuhkannya (gulir ke mereka). Misalnya, jika Anda mengunggah dua puluh foto berkualitas tinggi dalam satu artikel, mereka akan sangat memperlambat situs Anda. Tetapi jika Anda mengunggah gambar dengan malas, artikel akan sangat cepat dan foto hanya akan diunggah saat dibutuhkan, saat pengguna mengaksesnya.

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 subjek Anda tidak menggunakan citra responsif, pertimbangkan untuk mempekerjakan seorang profesional untuk pekerjaan itu; Ini tidak semudah kelihatannya.

Optimalkan gambar untuk jejaring sosial

Jika Anda ingin memastikan gambar Anda terlihat bagus di media sosial, Anda harus berusaha lebih keras dan mengoptimalkan metatag dan markup garis besar.

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

Jika Anda ingin lebih dan ingin mengoptimalkan gambar untuk situs web media sosial tambahan, lihat WPSSO: Meta Tag Akurat + Penandaan Skema untuk Optimasi Berbagi Sosial dan Plugin SEO.

Ubah cara WordPress mengompres gambar JPEG

Jika Anda mengunggah banyak gambar JPEG ke situs web WordPress Anda, Anda mungkin telah memperhatikan bahwa mereka kehilangan kualitas aslinya. Jika Anda bertanya-tanya apakah WordPress adalah pelakunya, sekarang Anda akan memiliki jawaban: ya, benar!

Setelah Anda mengunggah gambar dalam format JPEG, WordPress secara otomatis mengubah kompresi dan putuskan bahwa Anda ingin gambar kehilangan kualitas. Untuk lebih spesifik, WP menggunakan kompresi 90% di JPGE Anda. Itu bagus jika gambar Anda hanya ada di sana untuk digunakan sebagai thumbnail postingan atau untuk ditampilkan dalam posting, tetapi jika Anda mengunggah foto Anda, Anda ingin mereka menjadi yang terbaik, bukan?

Untungnya, Anda hanya perlu satu baris kode untuk mengubahnya.

Hentikan kompresi gambar JPEG:

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

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

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

Di sisi lain, gambar mungkin tidak terlalu penting bagi Anda. Karena itu, Anda mungkin ingin mereka menjadi lebih terkompresi dan menghemat waktu Anda memuat situs Anda. Jika Anda mengubah angka terakhir pada baris kode itu, kualitas gambar yang baru dimuat akan berubah.

Kompres gambar JPEG lebih lanjut:

Semakin rendah angkanya, semakin banyak gambar akan dikompresi. Misalnya, untuk mengkompres file JPEG tersebut lebih lanjut, Anda memerlukan kode ini:

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

Jangan lupa; Level kompresi default adalah 90.

Penting: Ini hanya akan mempengaruhi gambar yang Anda muat setelah menempelkan kode ke functions.php. Untuk mengubah ukuran dan kualitas gambar yang sudah Anda miliki di perpustakaan, Anda perlu plugin. Lihat cara membuat ulang ukuran gambar tambahan.

Plugin pengoptimalan gambar WordPress yang paling populer

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

Jangan khawatir; tidak ada yang mengharapkan Anda melakukannya sejak awal. Tetap bersama kami dalam beberapa menit ke depan karena kami akan menunjukkan kepada Anda plugin pengoptimalan gambar WordPress yang paling populer.

Untuk mengoptimalkan gambar, cukup pilih 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 ini akan membantu Anda mengompres gambar di situs WordPress apa pun yang Anda miliki. Mereka akan membuat situs memuat lebih cepat dan pada akhirnya membantu Anda meningkatkan SEO.

WP Smush

HARGA: Gratis

Dengan lebih dari 700.000 pemasangan aktif, WP Smush harus menjadi salah satu plugin pengoptimalan gambar WordPress terbaik. Anda dapat dengan cepat mengoptimalkan gambar dengan menggunakan teknik kompresi yang berbeda. Hal terbaik tentang mengompres gambar dengan WP Smush adalah bahwa gambar tidak akan kehilangan kualitasnya. Apakah kamu tidak percaya kami? Coba pluginnya.

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

Plugin fantastis ini dapat bekerja dengan file JPEG, GIF, dan PNG. Ini berfungsi dengan semua direktori Anda, secara otomatis menangani lampiran, dan bahkan berfungsi di banyak situs. Anda dapat secara manual mengoperasikan setiap gambar atau mengedit lima puluh di antaranya secara massal. Untuk hasil yang lebih baik dan lebih banyak pilihan, periksa WP Smush PRO.

EWWW Pengoptimal Gambar

HARGA: Gratis

Di belakang nama yang ingin tahu, ada salah satu plugin pengoptimalan gambar yang paling populer untuk WordPress. Seperti yang disebutkan di atas, Pengoptimal Gambar EWWW dapat memampatkan gambar Anda tanpa memengaruhi kualitasnya. Ketika Anda berpikir plugin dapat mempercepat situs Anda dalam hitungan detik, Anda sedang dalam perjalanan untuk mengunduhnya. Setelah melakukannya, Anda akan dapat mengoptimalkan gambar dalam jumlah besar, dan galeri seperti GRAND FlaGallery, NextCellent, dan NextGEN bahkan akan mendapatkan halaman optimisasi masif mereka sendiri.

Semua gambar yang menggunakan kelas WP_Image_Editor di WordPress akan menjadi dioptimalkan secara otomatisSementara Anda bisa secara manual mengerjakan sihir pada yang lainnya. Kami suka Anda dapat memilih folder yang ingin Anda optimalkan. Untuk detail lebih lanjut tentang ini dan apa yang digunakan plugin kelas, buka halaman resmi EWWW Image Optimizer di repositori WordPress.

Kompres gambar JPEG dan PNG

HARGA: Gratis

Jika panda kecil yang lucu dengan 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 yang membantu Anda mengompres gambar di situs web TinyPNG. Ya, tampaknya hewan itu lebih fleksibel daripada yang kita duga sebelumnya. Tapi mari kita fokus pada plugin.

Jika Anda menggunakan pengaya 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 individual atau melakukannya secara massal hanya dengan pergi ke perpustakaan media.

Mengkompresi gambar JPEG dan PNG bahkan mendukung animasi PNG, bekerja dengan sempurna di beberapa situs, mendukung WooComerce, dan tidak akan memiliki masalah dengan WP Offload S3.

Hal terbaik 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 informasi tetap utuh.

Tidak ada batasan ukuran file, Anda dapat mengonfigurasi 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 WordPress terbaik.

Imsanity

HARGA: Gratis

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

Imsanity dapat secara otomatis skala gambar, memungkinkan Anda untuk mengatur dimensi maksimum, dan bahkan memiliki opsi ukuran besar. Ini penting jika Anda sudah memiliki ratusan gambar di blog Anda yang perlu dioptimalkan.

Plugin gratis ini adalah pilihan yang bagus jika Anda tidak ingin banyak berjuang dengan pengaturan plugin. Yang diperlukan hanyalah menginstal dan mengaktifkan Imsanity, mengkonfigurasi beberapa opsi dan Anda bisa melupakannya; itu akan mengelola jalurnya sendiri menuju optimasi gambar.

Kami menyukai opsi yang memungkinkan Anda mengonversi gambar BMP ke JPG. Jika Anda memiliki banyak file BMP yang dimuat secara tidak sengaja beberapa waktu lalu, ini akan menjadi penyelamat.

Pengoptimal Gambar ShortPixel

HARGA: Gratis

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

ShortPixel Image Optimizer tidak hanya akan mengoptimalkan dokumen JPG, PNG, GIF dan PDF untuk Anda, tetapi juga akan memungkinkan Anda Konversi gambar JPEG, PNG atau GIF apa pun ke WebP. Plugin berfungsi baik dengan plugin lain di galeri, dan Anda tidak peduli jika situs Anda menggunakan HTTP atau HTTPS. Ini akan memungkinkan Anda untuk menghapus data EXIF ​​dari gambar (sesuatu yang ingin dimiliki fotografer).

Plugin mengenali gambar yang telah Anda optimalkan, sehingga akan melompati mereka bila perlu. Anda dapat mengizinkan atau melarang optimasi otomatis dan melakukan lebih banyak lagi dengan plugin yang fantastis ini. Periksa halaman resmi di repositori untuk melihat semua fitur.

Optimus – Pengoptimal Gambar WordPress

HARGA: Gratis

Seperti plugin yang disebutkan di atas, Optimus akan mengoptimalkan gambar Anda untuk WordPress, dan itu akan dilakukan tanpa mempengaruhi kualitas gambar Anda. Anda dapat membiarkan plugin memperbaiki hal-hal secara otomatis, atau Anda dapat menonaktifkan opsi dan hanya mengoptimalkan gambar bila perlu.

Optimus berfungsi di beberapa situs, tidak asing dengan situs WordPress eCommerce, dan sepenuhnya dioptimalkan untuk aplikasi seluler WordPress dan Windows Live Writer. Ini akan mempercepat situs Anda tanpa harus menyentuh sederet kode. Plugin ini menawarkan lebih banyak, tetapi Anda harus memilih versi premium. Untuk melihat lebih banyak, buka halaman resmi di repositori plugin WordPress.

Tambahkan pemuatan malas 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 mereka berasal, gambar dan video besar akan bertindak sebagai beban besar di situs Anda dan membuat pengunjung Anda menunggu lebih lama dari yang diperlukan untuk memuat semua konten. Dengan WordPress, itu seharusnya tidak menjadi masalah besar, dan itulah bagaimana Anda dapat dengan mudah memperbaiki situasinya.

Jika Anda mengenal PHP dengan baik, ada artikel bagus tentang cara menambahkan pemuatan malas untuk gambar dan pengguliran tak terbatas yang ditulis oleh kolega kami di Elegant Themes.

Jika tidak, di baris selanjutnya kita akan menyebutkan beberapa plugin lazy loading yang paling populer buat situs Anda memuat lebih cepat. Dan Anda bahkan tidak perlu melakukan lebih dari menginstal plugin dan mengkonfigurasinya dalam beberapa langkah cepat.

Pemuatan 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 meletakkan gambar di video Anda dan dengan demikian situs web Anda akan memuat lebih cepat. Setelah pengunjung menggulir ke video, gambar ini akan ditampilkan dengan tombol "putar" di atasnya. Setelah klik, 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 untuk menambahkan video biasa, daftar putar, atau hanya audio dari video yang dipilih. Setelah itu, video Youtube Anda akan mendapatkan gambar tentang hal itu yang akan memungkinkan pemuatan malas. Cukup klik pada gambar untuk memulai video atau audio Anda.
Lihat demo di situs pengembang.

a3 kargo malas

HARGA: Gratis

DEMO 1

DEMO 2

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

Di area admin, Anda dapat dengan mudah mengaktifkan dan menonaktifkan konten yang ingin Anda unggah malas. Untuk yang diaktifkan, konten hanya akan memuat saat pengunjung menggulir ke bagian konten tersebut.
Ada demo yang ditampilkan dengan baik menampilkan 1000 gambar, masing-masing memuat hanya sekali Anda gulir ke sana. Karena plugin ini juga memuat video, ada demo video yang dapat Anda tonton dengan mengklik tautan di atas.

Beban BJ Malas

HARGA: Gratis

Jika Anda tidak membutuhkan dukungan video dan hanya ingin memuat gambar Anda dengan lambat, Anda harus memeriksa plugin WP ini. Setelah diinstal dan dikonfigurasi, itu akan menggantikan gambar Anda, gambar mini, gambar Gravatar, dan bahkan iframe dengan placeholder. Mirip dengan plugin yang disebutkan di atas, itu akan memuat konten hanya setelah pengguna mengaksesnya.

Baik itu gambar atau video yang ingin Anda muat perlahan, 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 aksesori dan melihat berapa berat yang akan didukung bahu Anda. Tentu saja ada banyak plugin lain dengan fungsi yang sama dan Anda dapat menjelajahi dan mencoba semuanya.

Perlihatkan gambar sebelum dan sesudah dengan cara yang menarik

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

Jika Anda memikirkannya, sebagian besar situs web menggunakan pendekatan sederhana untuk menunjukkan perbedaan: mereka mengambil gambar dan menempatkannya berdampingan atau bahkan di atas satu sama lain. Jika Anda menginginkan hasil yang sama, Anda tidak akan membaca artikel ini karena Anda sudah tahu cara melakukannya.

Bagaimana jika kami memberi tahu Anda bahwa ada cara yang mengejutkan secara visual untuk menyelesaikan masalah ini sebelum / sesudah dan bahwa itu ada di ujung jari Anda? Nah ada dan setelah setup Anda akan memuji pengembang karena hasil akhirnya sangat keren.

Dua puluh dua puluh

HARGA: gratis

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

Plugin akan memungkinkan Anda untuk menempatkan satu gambar di atas yang lain dan memungkinkan Anda untuk bermain-main dengan slider sehingga Anda dapat menyembunyikan / mengungkapkan gambar. Silakan tonton demo dan Anda akan melihat apa yang kita bicarakan.

Oke, sekarang Anda terhubung ke plugin kecil ini, mari kita lihat bagaimana membuat efek luar biasa ini. Meskipun relatif mudah untuk membuat ulang efek demo, Anda masih perlu mengetahui HTML dasar. Ayo pergi:

1. Buat posting baru atau buka yang sudah ada
2. Masukkan dua gambar ke dalam pos. Jika Anda bekerja di editor visual, Anda harus melihat gambar di atas satu sama lain. Jika Anda bekerja di editor teks, Anda akan melihat kode yang mirip dengan ini:
3. Masukkan label (dua puluh) sebelum gambar pertama
4. Setelah yang kedua, masukkan tag (/ dua puluh)

Anda harus berakhir dengan sesuatu seperti ini di editor teks Anda:

(twentytwenty)



(/twentytwenty)

5. Pastikan gambar Anda memiliki ukuran yang sama untuk hasil terbaik.
6. Pratinjau atau posting posting Anda dan nikmati gambar Anda sebelum dan sesudah

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, sehingga ia harus menjaga bagian visual dan interaktif dari situsnya. Artikel dengan gambar menerima 94% lebih banyak kunjungan daripada yang tanpa satu. Selain itu, sudah diketahui bahwa konten multimedia di situs web dapat meningkatkan ROI pemasaran konten.

Kami harap tidak perlu membujuk Anda untuk merawat gambar di situs Anda. Bahkan jika Anda tidak menggunakan gambar dalam artikel (yang seharusnya), Anda menggunakan gambar unggulan, bukan? Ada beberapa plugin galeri yang dapat membantu Anda mengelola gambar di situs WordPress Anda, Anda dapat memiliki tema yang berhubungan dengan 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 ingin menambahkan efek gambar sebelum dan sesudah yang akan disukai pengguna Anda. Jangan lupa tentang VR di WordPress, yang menjadi lebih populer setelah Automattic memperkenalkan VR di WordPress.com. Namun, 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

MANIFESTASI

Hal pertama yang Anda sukai dari plugin ini adalah sepenuhnya gratis. Seperti halnya plugin repositori WordPress lainnya, Anda dapat mengunduh, menginstal, dan mengaktifkannya dalam hitungan menit. Versi gratisnya akan memungkinkan Anda bekerja dengan gambar interaktif. Jika Anda menginginkan lebih, Anda harus menggunakan versi PRO, tetapi kami akan membicarakannya nanti.

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

Fitur

Sebelum kita sampai pada contoh yang menunjukkan seberapa hebat plugin sederhana ini, mari kita lihat apa yang diharapkan dari Draw Attention:

• Gambar – Setelah mengunggah gambar, Anda akan memiliki kesempatan untuk menggambar bentuk di atasnya. Pilih bagian mana pun dari gambar Anda yang dapat dipilih / diklik
• Warna – Sesuaikan warna sehingga Anda dapat membuat hot spot sesuai dengan desain situs Anda
• Sorot saat melayang – Tunjukkan bagian lain dari gambar jika pengguna berpindah dari bagian yang dipilih
• Tampilkan informasi lebih lanjut – Tampilkan informasi lebih lanjut tentang bagian gambar yang dipilih
• Buka URL – Redirect pengguna ke URL apa pun jika mereka mengklik pilihan

Contoh: peta interaktif Hawaii

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

Hal pertama yang perlu Anda lakukan adalah menemukan gambar Kepulauan Hawaii. Setelah browsing, Anda harus memuat gambar di area sidebar kanan. Setelah gambar dimuat, kesenangan bisa dimulai.

Di sini Anda dapat memilih warna untuk disorot (warna, batas, opacity, dll.), Desain "kotak informasi selengkapnya" (gambar, judul, warna teks, dll.). Jika Anda tidak ingin memilih masing-masing dan setiap warna gambar secara manual, Anda dapat dengan cepat memilih skema warna di sidebar kanan.

Bagian paling ajaib terjadi pada layar pengaturan. Di sini Anda akan mendapatkan gambar Anda diunggah dalam ukuran penuh. Yang harus Anda lakukan sekarang adalah mulai menggambar dan membuat jalur akses baru. Anda dapat menambahkan poin sebanyak yang Anda inginkan, yang berarti Anda dapat membuat pilihan penuh sesuka Anda. Anda dapat membuat banyak titik akses dan masing-masing dapat memiliki konfigurasi 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 memindahkan titik akses (sisi kanan gambar GIF yang ditunjukkan di atas).

Anda harus mengulangi proses untuk setiap pulau yang ingin Anda interaktif. Setelah titik akses Anda siap, cukup salin kode pendek dari sisi kanan. Rekatkan kode pendek ke pos, halaman, widget, atau di mana pun Anda ingin menampilkan peta interaktif baru Anda, dan Anda selesai! Si desea redirigir a los usuarios a cualquier otra página una vez que hicieron clic en las selecciones, solo necesita seleccionar la URL en lugar de la descripción. ¡Tan fácil como eso!

Versión Pro

Si bien la versión gratuita será perfecta si solo necesita una imagen, la versión PRO le permitirá tener tantas imágenes interactivas en su sitio como desee. Aunque esto será lo más importante a tener en cuenta, la versión PRO le proporcionará incluso más que múltiples imágenes.

La función de Opciones de diseño le permitirá mostrar más información sobre las partes seleccionadas de la imagen. Por ejemplo, podrá mostrar información en una caja de luz o en una barra de herramientas simple que aparecerá después de que un usuario pase el mouse sobre la parte seleccionada de la imagen.

También hay veinte paletas de colores predefinidas, por lo que no tiene que personalizar cada color manualmente. La versión PRO le costará $ 74 por una licencia de un solo sitio, pero si necesita más de una imagen interactiva, esto será obvio.

Cómo regenerar tamaños de imagen adicionales

Es relativamente fácil registrar nuevos tamaños de imagen en su tema de WordPress. Después de haberle dicho a su sistema qué tan grandes deberían ser sus imágenes, nombrarlas y decidir cómo recortarlas, puede distribuir las imágenes en cualquier lugar que desee. ¿Pero qué hay de las viejas imágenes?

Si ha utilizado una de las técnicas que le hemos mostrado, ha preparado el césped para nuevas imágenes. Ya sea que use tamaños de imagen de nuevo registro para miniaturas de publicaciones o permita que los autores las usen en publicaciones, las nuevas reglas se aplican solo a las imágenes que se cargan después de que haya realizado el cambio en el archivo functions.php. Para cambiar las imágenes más antiguas, sugerimos usar el complemento Regenerar miniaturas.

Regenerar miniaturas:

HARGA: Gratis

1. Pergi
2. Buscar "Regenerar miniaturas"
3. Instal dan aktifkan plugin
4. Arahkan ke

Si desea cambiar el tamaño de todas sus imágenes, simplemente haga clic en el botón "Regenerar todas las miniaturas" y espere a que el complemento haga el trabajo duro.

Si desea ver las imágenes que van a cambiar de tamaño, o si desea cambiar el tamaño de solo algunas de las imágenes, vaya a su Biblioteca de medios donde encontrará una nueva opción en "Acciones masivas" y una al lado de cada imagen en el galería.

Lo bueno del complemento es que no elimina tus imágenes originales. Solo creará nuevos tamaños de imagen que puede usar en su tema, mientras que los originales se dejarán para que los use más tarde o los elimine manualmente si decide que no los necesita.

Itu dia. Disfrute de sus nuevas miniaturas o consulte el complemento Tamaño de imagen simple que puede hacer lo mismo.

Eliminar los atributos de imagen de ancho y alto con jQuery

Al agregar imágenes a una publicación de WordPress, el sistema agrega automáticamente sus atributos de alto y ancho a la imagen. Eso suele ser algo bueno, pero hay momentos en los que no le gustará el hecho de que cada imagen obtenga esos atributos.

Si desea quitar los atributos justo en el punto de carga, puede hacerlo a través de una función simple que le mostramos la última vez.

Pero si leyó el artículo o probó la función usted mismo, habrá notado que solo afecta a las imágenes cargadas después de instalar la función en su sistema WP. Si ya tiene una base de datos llena de publicaciones con imágenes insertadas, la función mencionada anteriormente no lo ayudará mucho con sus atributos de imagen anteriores.

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 y etiquetas:
3. Simpan perubahan

And you’re done! 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 functions.php
2. Copy and paste the following code:

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 = '';
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.

Contoh:

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.