Cara Meningkatkan Gambar di WordPress

Cara Meningkatkan Gambar di WordPress


Sudah lama sejak gambar adalah sesuatu yang terlalu besar untuk dimuat melalui 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 gambar di blog Anda.

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

Dalam panduan ini, kami akan menunjukkan kepada Anda:

  • Cara mengoptimalkan gambar untuk WordPress untuk mempercepat situs Anda dan meningkatkan SEO
  • Ubah cara WordPress mengompres gambar JPEG
  • Plugin pengoptimalan gambar paling populer untuk WordPress
  • Tambahkan pemuatan malas untuk video dan gambar Anda
  • Tampilkan gambar sebelum dan sesudah dengan cara yang menarik
  • Cara membuat gambar interaktif – menggambar, menambahkan deskripsi dan tautan
  • Cara membuat ulang ukuran gambar tambahan
  • Hapus atribut gambar lebar dan tinggi dengan jQuery
  • Cara membuat ukuran gambar khusus di Pengunggah Media
  • Buat tangkapan layar otomatis dari situs web apa pun dan publikasikan sebagai gambar di pos Anda

Contents

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

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

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

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

Tes gambar di situs Anda dengan cepat

Sebelum Anda mulai bekerja pada pengoptimalan, Anda dapat dengan cepat memeriksa situs Anda untuk kecepatan dan kinerja. Dengan menggunakan alat apa pun dari daftar, Anda akan segera mengetahui dalam bentuk apa gambar di situs Anda.

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

Optimalkan gambar untuk WordPress sebelum diunggah

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

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

Ubah ukuran gambar

Ubah ukuran gambar

Jangan mengunggah gambar ke situs web WordPress Anda sebelum memeriksa lebar dan tinggi setiap gambar. Misalnya, jika Anda menampilkan gambar maksimal 700px, tidak perlu mengunggah gambar yang lebih luas. Jika Anda melakukannya, Anda akan memiliki file yang lebih besar yang akan membuat situs Anda lebih lambat, sementara hasilnya akan sama. WordPress akan membuat ukuran tambahan, tapi 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. Anda bahkan dapat menemukan alat daring gratis untuk mengubah ukuran gambar Ubah Ukuran Mudah.

Dimensi gambar akan bervariasi dari tema ke tema. Jika Anda tidak yakin yang mana yang harus Anda gunakan, perhatikan tema WordPress Anda lebih dekat dan periksa gambar, cari dokumentasi atau minta dukungan untuk 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 selalu populer memungkinkan Anda untuk 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, menurunkan kualitas dari 12 menjadi hanya 8 akan secara dramatis mengurangi ukuran gambar, sedangkan perbedaan kualitas tidak akan sebesar itu..

Jika Anda masih tidak menggunakan perangkat lunak apa pun untuk mengubah kualitas gambar Anda, Anda dapat mencoba secara online PNG kecil alat. 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 melepas beberapa kilobyte dari sebuah gambar, jika tidak lebih.

Format gambar

Aturan umumnya sangat sederhana. Jika Anda memiliki foto, buatlah 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 Anda ingin menampilkan animasi sederhana seperti yang ditunjukkan di atas, Anda dapat menggunakan GIF. Secara umum, gambar PNG akan lebih besar daripada gambar JPEG, dan Anda bisa mendapat manfaat dengan 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, coba dan coba simpan sebagai JPEG untuk melihat perbedaannya. Untuk penjelasan lebih rinci, silakan periksa perbedaan antara PNG, JPEG, GIF, dan SVG.

Jaga nama file

Meskipun nama file mungkin terdengar tidak penting, sebenarnya itu adalah sesuatu yang harus Anda sadari. 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 memberikannya nama yang tepat.

Kami menyarankan Anda memberi nama gambar tanpa menggunakan spasi. Jangan lupa untuk memasukkan kata kunci jika Anda ingin peringkat halaman dan gambar. 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 unggahan. Semoga gambar Anda memiliki ukuran dan kualitas yang tepat. Anda memastikan format dan nama file sudah benar. Setelah diunggah, WordPress akan meminta Anda untuk info tambahan. Jangan melewatkan informasi meta; isi rincian tentang gambar Anda sehingga Anda dapat dengan mudah mengaturnya dan bersiap untuk SEO.

Judul, deskripsi, teks alternatif dan keterangan

Saat mengurus 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 untuk pengunjung yang tidak dapat melihat gambar Anda dengan benar. Tidak hanya ini akan bermanfaat bagi pengguna Anda, tetapi juga akan membantu Anda dengan SEO. Halaman Anda akan peringkat lebih baik, dan pengguna akan dapat menemukan gambar baru Anda lebih mudah.

Meskipun Anda tidak akan membutuhkan teks sepanjang waktu, pastikan Anda menambahkannya untuk gambar yang membutuhkan penjelasan tambahan (misalnya, tangkapan layar).

Edit gambar dengan WordPress

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

Regenerasi semua thumbnail

Sebagian besar teknik sebelumnya akan membantu Anda dengan file gambar baru yang 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-gambar itu dan mengubah ukurannya.

Untuk perbaikan cepat, Anda mungkin tertarik dengan plugin Regenerate Thumbnail 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 pada Anda di baris berikut artikel ini..

Cara membuat ulang ukuran gambar tambahan

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 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 bisa 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 malas.

Lazy load adalah teknik yang memuat gambar hanya ketika 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 malas memuat gambar, artikel akan cepat kilat dan foto akan memuat hanya bila diperlukan – pada saat pengguna mencapai mereka.

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 harus mendaftarkan ukuran gambar tambahan untuk situs Anda. Jika tema Anda tidak menggunakan gambar responsif, pertimbangkan untuk mempekerjakan seorang profesional untuk pekerjaan itu – itu 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 marka 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, periksa WPSSO – Meta Tag + Markup Skema Akurat untuk Sosialisasi & Plugin SEO Berbagi.

Ubah cara WordPress mengompres 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, kini Anda akan memiliki jawaban – ya, benar!

Setelah Anda mengunggah gambar dalam format JPEG, WordPress secara otomatis mengubah kompresi dan memutuskan Anda ingin kehilangan kualitas gambar. Untuk lebih spesifik, WP menggunakan kompresi 90% pada JPGE Anda. Itu bagus jika gambar Anda hanya ada di sana untuk digunakan sebagai gambar mini pos atau untuk ditampilkan dalam sebuah pos, tetapi jika Anda mengunggah foto Anda, Anda ingin foto Anda dibuat sebaik mungkin, 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 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 memuat situs Anda. Jika Anda mengubah angka terakhir pada baris kode itu, Anda akan mengubah kualitas gambar yang baru diunggah.

Kompres gambar JPEG lebih banyak lagi:

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

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

Jangan lupa; tingkat kompresi standar adalah 90.

Penting: Ini hanya akan memengaruhi gambar yang Anda unggah setelah Anda menempelkan kode di 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 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 bisa Anda lihat, ada beberapa metode yang dapat Anda gunakan. Penting untuk menjaga gambar bahkan sebelum Anda mengunggahnya ke blog Anda. Tetapi ketika gambar sudah ada di situs, mungkin menjadi tidak mungkin untuk mengoptimalkan setiap gambar secara terpisah dan kemudian mengunggahnya sekali lagi.

Jangan khawatir; tidak ada yang mengharapkan Anda melakukannya sejak awal. 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 akan 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 terbaik untuk WordPress. Dapat dengan cepat mengoptimalkan gambar dengan menggunakan teknik kompresi yang berbeda. Hal terbaik dari mengompresi gambar dengan WP Smush adalah kualitas gambar tidak akan kalah. Jangan percaya kita? Uji 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 karena WP Smush memungkinkan Anda mengatur dimensi maksimum. Setelah melakukannya, semua gambar yang lebih besar akan secara otomatis diturunkan sebelum Anda 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 bekerja pada multisite. Anda dapat secara manual beroperasi pada setiap gambar atau mengedit lima puluh di antaranya secara massal. Jika Anda menginginkan hasil yang lebih baik dan lebih banyak pilihan, periksa WP Smush PRO.

EWWW Pengoptimal Gambar

HARGA: Gratis

Di belakang nama lucu, ada salah satu plugin pengoptimalan gambar paling populer untuk WordPress. Sama seperti yang disebutkan sebelumnya, EWWW Image Optimizer dapat mengompres gambar Anda tanpa memengaruhi kualitasnya. Ketika Anda berpikir tentang hal itu plugin dapat mempercepat situs Anda dalam hitungan detik, Anda sudah siap untuk mengunduhnya. Setelah melakukannya, Anda akan dapat mengoptimalkan gambar dalam jumlah besar, dan galeri seperti GRAND FlaGallery, NextCellent dan NextGEN bahkan akan mendapatkan halaman Massal Optimize mereka sendiri.

Semua gambar yang menggunakan kelas WP_Image_Editor di WordPress akan menjadi dioptimalkan secara otomatis, sementara kamu bisa secara manual mengerjakan sihir pada yang lainnya. Kami senang Anda bisa memilih folder yang ingin Anda optimalkan. Untuk detail lebih lanjut tentang ini, dan plugin mana yang menggunakan kelas, silakan buka pejabat Halaman EWWW Pengoptimal Gambar di repositori WordPress.

Kompres gambar JPEG & PNG

HARGA: Gratis

Gambar Kompres Mungil

Jika panda kecil imut yang 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 yang membantu Anda mengompres gambar di situs web TinyPNG. Ya, tampaknya hewan itu lebih fleksibel daripada 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 satu per satu atau melakukannya secara massal hanya dengan pergi ke perpustakaan media.

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

Hal terbaik dari plugin ini adalah Anda dapat 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 bisa 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.

Imsanity

HARGA: Gratis

Imsanity

Meskipun gambar sampul untuk plugin ini mungkin membuat Anda takut, luangkan waktu sebentar dan lihat 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 membuat skala gambar, memungkinkan Anda untuk mengatur dimensi maksimum, dan bahkan fitur opsi ukuran besar. Ini penting jika Anda sudah memiliki ratusan gambar di blog Anda yang perlu dioptimalkan.

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

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

Pengoptimal Gambar ShortPixel

HARGA: Gratis

Pengoptimal Gambar ShortPixel

Dengan lebih dari 30.000 pemasangan aktif, ShortPixel Image masih merupakan 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 apa pun ke WebP. Pengaya berfungsi dengan baik dengan plugin galeri lain, dan tidak peduli jika situs Anda menggunakan HTTP atau HTTPS. Ini akan memungkinkan Anda menghapus data EXIF ​​dari gambar (sesuatu yang ingin dimiliki fotografer).

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

Optimus – Pengoptimal Gambar WordPress

HARGA: Gratis

Optimus

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 menyelesaikan masalah secara otomatis, atau Anda dapat mematikan opsi dan hanya mengoptimalkan gambar bila diperlukan.

Optimus bekerja pada 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 harus menyentuh sederet kode. 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 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, video dan gambar besar akan bertindak sebagai 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 di sini adalah bagaimana Anda dapat dengan mudah memperbaiki situasi.

Jika Anda mengetahui cara menggunakan PHP, ada artikel bagus tentang menambahkan pemuatan malas untuk gambar dan gulir tak terbatas yang ditulis oleh rekan-rekan kami di Tema Elegan.

Jika tidak, pada beberapa baris berikutnya kita akan menyebutkan beberapa plugin lazy loading yang paling populer buat situs Anda memuat lebih cepat. Dan Anda bahkan tidak perlu berbuat banyak selain menginstal plugin dan mengaturnya dalam beberapa langkah cepat.

Memuat Malas untuk Video

HARGA: gratis

Memuat Malas untuk Video

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 klik, video akan mulai memuat dan memutar. Demo sederhana dapat dilihat di situs pengembang.

WP YouTube Lyte

HARGA: Gratis

WP YouTube Lyte

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

a3 Beban Malas

HARGA: Gratis
DEMO 1
DEMO 2

a3 Beban Malas

Yang 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 malas 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 memuat.

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

Beban BJ Malas

HARGA: Gratis

Beban BJ Malas

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

Apakah itu gambar atau video yang ingin Anda muat malas, salah satu plugin yang disebutkan di atas akan membantu Anda dalam hitungan detik. Semuanya gratis sehingga tidak ada alasan untuk tidak mencoba setidaknya satu dari plugin dan melihat berapa banyak berat bahu Anda yang dibutuhkan. Tentu saja, ada banyak plugin lain dengan fungsi yang sama dan Anda bebas menjelajah 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-orang menunjukkan tubuh mereka sebelum dan sesudah program latihan.

Jika Anda memikirkannya, sebagian besar situs web menggunakan pendekatan sederhana untuk menunjukkan perbedaan – mereka mengambil kedua gambar dan menempatkannya satu 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 sebelum / sesudah ini dan hanya dalam jangkauan tangan Anda? Nah, ada dan setelah penyiapan, Anda akan memuji pengembang karena hasil akhirnya benar-benar keren.

Dua puluh dua puluh

HARGA: gratis

Dua puluh dua puluh

Twenty Twenty adalah nama plugin yang 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 kita bicarakan.

OK, sekarang ketika Anda terhubung dengan plugin kecil ini, mari kita lihat cara membuat efek yang menakjubkan ini. Meskipun relatif mudah untuk membuat ulang efek demo, Anda masih perlu tahu jalan di 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 yang lain. Jika Anda bekerja di Editor Teks Anda harus melihat kode yang mirip dengan ini:
  3. 
    
    
    
  4. Masukkan tag [twentytwenty] sebelum gambar pertama
  5. Setelah yang kedua masukkan tag [/ twentytwenty]
  6. Anda harus berakhir dengan sesuatu seperti ini di Editor Teks Anda:

    [dua puluh dua puluh]
    
    
    
    [/ twentytwenty]
    
  7. Pastikan gambar Anda berukuran sama untuk mendapatkan hasil terbaik
  8. Pratinjau atau publikasikan posting Anda dan nikmati visual yang menakjubkan 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 dari situs Anda. Artikel dengan gambar diterima 94% lebih banyak tampilan daripada yang tanpa satu. Selain itu, sudah diketahui bahwa 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 cukup banyak 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 lebih banyak konten interaktif?

Sebagai permulaan, Anda mungkin tertarik untuk menambahkan efek gambar sebelum-sesudah yang akan disukai pengguna Anda. Jangan lupa tentang Virtual Reality di WordPress yang semakin populer setelah Automattic memperkenalkan VR ke WordPress.com. Meski begitu, 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
DEMO

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

Plugin responsif, dan Anda tidak perlu khawatir tentang gambar interaktif yang ditampilkan dengan benar di perangkat apa pun. Tidak hanya itu gambar akan skala sesuai dengan ukuran layar, tetapi itu 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 yang lebih lama.

fitur

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

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

Buat pengaturan Perhatian

Contoh – Peta interaktif Hawaii

Kami akan menggunakan contoh dari 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 harus Anda lakukan adalah menemukan gambar pulau Hawaii. Setelah Anda menavigasi ke Tarik Perhatian -> Edit Gambar, Anda harus mengunggah gambar ke area di bilah sisi kanan. Setelah gambar dimuat, kesenangan bisa dimulai.

Di sini Anda bisa memilih warna untuk highlight (warna, batas, opacity, dll.), Gaya “kotak info lebih lanjut” (gambar, judul, warna teks, dll.). Jika Anda tidak ingin memilih masing-masing dan setiap warna untuk gambar secara manual, Anda dapat dengan cepat memilih skema warna dari sidebar kanan.

Draw Attention - cara membuat gambar interaktif di WordPress

Bagian paling ajaib terjadi di Area Hotspot layar pengaturan. 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 bahwa Anda dapat membuat pilihan yang komprehensif seperti yang Anda inginkan. Anda dapat membuat banyak hotspot, 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 interaktif. Setelah Anda memiliki hotspot Anda, 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! Jika Anda ingin mengarahkan pengguna ke halaman lain setelah mereka mengklik pilihan, Anda hanya perlu memilih URL daripada deskripsi. Semudah itu!

Versi PRO

Sementara versi gratisnya akan sempurna jika Anda hanya perlu satu gambar, namun 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 membuat Anda lebih dari beberapa gambar.

Fitur Layout Options memungkinkan Anda menampilkan lebih banyak informasi tentang bagian gambar yang dipilih. Misalnya, Anda bisa menampilkan info di lightbox atau di bilah alat sederhana yang akan muncul setelah pengguna melayang di atas bagian gambar yang dipilih.

Ada juga dua puluh palet warna yang telah ditentukan, jadi Anda tidak perlu menyesuaikan masing-masing dan setiap warna secara manual. Versi PRO akan dikenakan biaya $ 74 untuk satu lisensi situs, tetapi jika Anda membutuhkan lebih dari satu gambar interaktif, ini akan menjadi no-brainer.

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, beri nama dan memutuskan bagaimana memotongnya, Anda bebas untuk mendistribusikan gambar di mana pun Anda inginkan. Tapi bagaimana dengan gambar lama?

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

Buat Ulang Gambar Kecil:

HARGA: Gratis
  1. Pergi ke Plugins-> Add New
  2. Cari “Regenerasi Thumbnails”
  3. Instal dan aktifkan plugin
  4. Navigasi ke Tools-> Regen. Thumbnail

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

Cara membuat ulang ukuran gambar tambahan

Jika Anda ingin melihat gambar yang akan diubah ukurannya, atau jika Anda ingin mengubah ukuran hanya beberapa gambar, buka Perpustakaan 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. Itu hanya akan membuat ukuran gambar baru yang dapat Anda gunakan dalam tema Anda, sedangkan yang asli akan dibiarkan untuk Anda gunakan nanti atau menghapus secara manual jika Anda memutuskan Anda tidak membutuhkannya.

Itu dia. Nikmati thumbnail baru Anda atau lihat Ukuran Gambar Sederhana plugin 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. Itu biasanya hal yang baik, tetapi ada kalanya Anda tidak akan menyukai kenyataan bahwa setiap gambar mendapatkan atribut itu.

Jika Anda ingin menghapus atribut tepat di titik pengunggahan, Anda dapat melakukannya melalui fungsi sederhana yang kami tunjukkan terakhir kali.

Tetapi jika Anda membaca artikel atau mencoba fungsinya sendiri, Anda telah memperhatikan bahwa itu hanya mempengaruhi gambar yang diunggah setelah fungsi diinstal ke dalam sistem WP Anda. Jika Anda sudah memiliki database yang penuh dengan posting dengan gambar yang disisipkan, fungsi yang disebutkan di atas tidak akan banyak membantu Anda dengan atribut gambar lama Anda..

Karena Anda mungkin tidak dapat menelusuri setiap gambar secara manual dan menghapus lebar dan tinggi satu per satu, Anda mungkin membutuhkan fungsi lain yang akan menghapus atribut tersebut untuk semua gambar yang ada yang tersemat di pos Anda. Dalam hal ini, Anda berada di tempat yang tepat karena kami akan menunjukkan kepada Anda cara sederhana untuk menghapus atribut gambar lebar dan tinggi secara otomatis dengan beberapa baris kode jQuery. Jangan takut dengan frasa sebelumnya – Anda bahkan tidak harus tahu apa itu jQuery, cukup ikuti tiga langkah berikutnya dan Anda akan selesai dalam sekejap.

Hapus atribut gambar lebar dan tinggi:

  1. Buka file header.php dari folder tema Anda
  2. Salin dan tempel kode ini di antara keduanya dan tag:
  3.  
  4. Simpan perubahan

Dan Anda selesai! Kode akan melakukan keajaibannya setelah Anda membuka posting yang berisi gambar dan akan menghapus tag lebar dan tinggi dari itu.

Cara membuat ukuran gambar khusus di Pengunggah Media

Jika Anda menggunakan Pengunggah Media untuk menangani gambar di WordPress, Anda mungkin telah melihat banyak opsi untuk gambar. Di antara banyak, Anda dapat memilih ukuran gambar yang dapat Anda kirim ke artikel Anda.

Ada pilihan thumbnail, menengah, besar dan ukuran penuh untuk dipilih, tetapi semua opsi tersebut memiliki nilai yang telah ditentukan. Jadi, jika Anda menggunakan tema khusus, lebih sering Anda terjebak dengan perubahan lebar dan tinggi untuk setiap gambar berulang-ulang.

Sebenarnya, Anda tidak harus melakukan itu. Ada fungsi kecil yang rapi yang disebut add_image_size () yang merupakan alat yang hebat untuk pengembang. Dan setelah artikel ini, Anda akan merasakan manfaatnya juga.

Katakanlah tema Anda memiliki lebar kustom dan Anda ingin dengan mudah menanamkan gambar agar pas di sana dengan sempurna. Katakanlah lebar itu 666px (kami tidak akan menjelaskan mengapa Anda menetapkan lebar ke nomor ini, itu pilihan Anda). Untuk melakukan itu, Anda perlu menambahkan tombol radio tambahan ke Pengunggah Media. Dengan kode di bawah ini, Anda akan menambahkan satu ukuran lagi yang merupakan setengah ukuran dari ukuran aslinya.

  1. Buka file functions.php Anda
  2. Salin dan tempel kode ini:
  3. fungsi custom_image_sizes () {
    add_image_size ('satu ukuran', 333, 333, true);
    add_image_size ('ukuran lain', 666, 666, true);
    }
    
    add_action ('init', 'custom_image_sizes');
    
    function show_image_sizes ($ size) {
    $ size ['one-size'] = __ ('Ukuran Khusus 1 ’,' isitwp ');
    $ size ['another-size'] = __ ('Ukuran Khusus 2 ’,' isitwp ');
    mengembalikan $ ukuran;
    }
    
    add_filter ('image_size_names_choose', 'show_image_sizes');
  4. Simpan perubahan
  5. Coba tambahkan gambar dari Pengunggah Media Anda di mana Anda akan melihat opsi ukuran baru Anda di bawah “Pengaturan Tampilan Lampiran”

Buat tangkapan layar otomatis dari situs web apa pun dan publikasikan sebagai gambar di pos Anda

Jika Anda ingin menampilkan thumbnail situs web, Anda harus pergi ke situs web, mencetak layarnya atau mengambil tangkapan layar dengan program atau add-on browser. Maka Anda perlu memodifikasi gambar, memotongnya ke ukuran yang tepat dan mengunggahnya ke WordPress Anda sehingga Anda dapat menggunakan tangkapan layar dalam sebuah pos.

Jika Anda tidak harus mengambil snapshot itu setiap sekarang dan kemudian, itu tidak akan menjadi masalah, tetapi jika Anda menggunakan screenshot dari situs web yang berbeda lebih sering, Anda akan senang mendengar bahwa ada fungsi luar biasa yang akan menghemat waktu dan saraf Anda.

Di bagian panduan ini, kami akan menunjukkan kepada Anda fungsi lengkap yang membuat kode pendek yang dapat Anda gunakan untuk mengambil snapshot dari halaman web apa pun yang Anda inginkan..

Buat tangkapan layar otomatis:

  1. Buka functions.php
  2. Salin dan tempel kode berikut:
  3. function wp_webscreen ($ atts, $ content = NULL) {
    ekstrak (shortcode_atts (array (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // width
    "h" => '450' // tinggi
    ), $ atts));
    
    $ img = '' $ alt. '';
    kembalikan $ img;
    }
    add_shortcode ("layar", "wp_webscreen");
  4. Ubah variabel default dalam array
  5. Simpan perubahan

Fungsi ini membuat kode pendek yang dapat Anda gunakan dengan mudah di mana saja di situs web WordPress Anda. Apakah Anda ingin menggunakan tangkapan layar halaman web dalam sebuah posting, widget bilah sisi atau catatan kaki Anda, misalnya, cukup c / p kode pendek di tempat yang tepat:

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

Yang hebat dari fungsi ini adalah ia menyimpan gambar sebagai URL dinamis yang berarti bahwa begitu Anda membuat snapshot dengan kode pendek, ia akan secara otomatis menyegarkan dirinya sendiri di masa depan dan selalu menampilkan tampilan situs web saat ini yang ditentukan dalam kode pendek tersebut..

Perhatikan bahwa Anda dapat mengubah parameter kode pendek langsung dari itu. Anda tidak perlu mengubah kode dalam file functions.php jika Anda ingin mengambil snapshot dari URL lain atau untuk mengambil snapshot dalam dimensi yang berbeda.

Contoh:

Katakanlah Anda ingin mengambil tangkapan layar Google dan menjadikannya berukuran 200 × 400 piksel:

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

Anda dapat membuat segalanya lebih mudah dengan menyimpan kode pendek ke dalam tombol sehingga Anda dapat memasukkannya ke dalam posting dengan satu klik tombol.

Kesimpulan

Anda tidak perlu menginstal semua plugin dan fungsi yang kami sebutkan untuk meningkatkan gambar di situs WordPress Anda. Tetapi kami berharap Anda telah menemukan setidaknya beberapa tips yang akan membantu Anda untuk mengoptimalkan gambar atau membuatnya lebih baik dengan cara apa pun.

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