Optimisasi gambar untuk SharePoint Online

Kecepatan pemuatan halaman web tergantung pada ukuran gabungan semua komponen yang diperlukan untuk merender halaman termasuk gambar, HTML, JavaScript, dan CSS. Gambar adalah cara yang hebat untuk membuat situs Anda lebih menarik, tetapi ukuran gambar dapat memengaruhi kinerja. Dengan mengoptimalkan gambar dengan pemadatan dan pengubahan ukuran, serta menggunakan sprite, Anda dapat menyeimbangkan efek dari gambar yang berukuran sangat besar. Menggunakan rendisi gambar SharePoint, Anda dapat mengunggah satu gambar besar, dan menampilkan bagian gambar yang memungkinkannya untuk digunakan kembali, bukan dimuat ulang.

Menggunakan sprite untuk mempercepat pemuatan gambar dalam SharePoint Online

Sprite gambar berisi banyak gambar yang lebih kecil. Dengan CSS, Anda memilih bagian dari gambar gabungan untuk ditampilkan di bagian tertentu dari halaman dengan pemosisian yang pasti. Pada dasarnya Anda memindahkan gambar tunggal di sekitar halaman, bukan memuat beberapa gambar dan membuat bagian kecil dari gambar tersebut agar terlihat melalui jendela kecil tempat bagian yang diperlukan dari gambar sprite diperlihatkan kepada pengguna akhir. SharePoint Online menggunakan sprite untuk menampilkan berbagai ikonnya dalam spcommon.png sprite.

Apa yang dibahas di sini

  • Pemadatan gambar

  • Optimisasi gambar

  • Rendisi gambar SharePoint

Cuplikan layar spcommon

Hal ini dapat meningkatkan kinerja karena Anda mengunduh hanya satu gambar, bukan beberapa kemudian membuat cache dan menggunakan ulang gambar tersebut. Bahkan jika gambar tidak tetap menjadi cache, dengan memiliki satu gambar dan bukan beberapa gambar akan mengurangi jumlah total permintaan HTTP ke server yang akan mengurangi waktu pemuatan halaman. Hal ini benar-benar merupakan bentuk dari pembundelan gambar. Teknik ini sangat berguna jika gambar tidak sering berubah, misalnya, ikon, seperti yang diperlihatkan dalam contoh SharePoint yang diberikan di atas. Anda dapat menggunakan Web Essentials, proyek berbasis komunitas, sumber terbuka, dan pihak ketiga untuk memperoleh hal ini dengan mudah di Microsoft Visual Studio. Untuk informasi selengkapnya, lihat Minifikasi dan pembundelan di SharePoint Online.

Menggunakan pemadatan dan optimisasi gambar untuk mempercepat pemuatan halaman di SharePoint

Pemadatan dan optimisasi gambar adalah tentang mengurangi ukuran file gambar yang Anda gunakan di situs. Sering kali, teknik terbaik untuk mengurangi ukuran gambar adalah dengan mengubah ukuran gambar ke dimensi maksimum yang akan ditampilkan di situs. Tidak pernah ada gambar yang lebih besar daripada gambar sebelumnya yang dapat ditampilkan. Memastikan gambar menerapkan dimensi yang tepat menggunakan editor gambar adalah cara yang mudah dan cepat untuk mengurangi ukuran halaman Anda.

Setelah gambar menggunakan ukuran yang tepat, langkah berikutnya adalah mengoptimalkan pemadatan gambar-gambar ini. Terdapat beberapa alat yang tersedia untuk digunakan bagi pemadatan dan optimisasi, termasuk Galeri Foto dan alat pihak ketiga. Kunci dari pemadatan adalah mengurangi ukuran file sebanyak mungkin tanpa kehilangan kualitas yang terlihat bagi pengguna akhir. Pastikan Anda menguji file yang dipadatkan di tampilan definisi tinggi untuk memastikan file masih terlihat bagus.

Mempercepat unduhan halaman menggunakan rendisi gambar SharePoint

Rendisi gambar adalah fitur diSharePoint Online yang memungkinkan Anda untuk membuka versi berbeda dari gambar berdasarkan dimensi gambar yang telah ditetapkan sebelumnya. Hal ini sangat penting terutama ketika terdapat konten gambar yang dihasilkan pengguna atau dimensi gambar seperti lebar dan tinggi telah ditetapkan oleh CSS di situs. Bahkan jika gambar telah ditetapkan oleh CSS, gambar dengan resolusi penuh masih dimuat. Dalam hal ini, ukuran file dapat dikurangi menggunakan rendisi gambar.

Catatan: Rendisi hanya tersedia untuk SharePoint ketika penerbitan diaktifkan. Anda dapat mengaktifkan penerbitan di bawah Pengaturan > Pengaturan Situs > Kelola fitur situs > Penerbitan SharePoint Server. Jika tidak, opsi tidak akan muncul.

Pengubahan ukuran rendisi gambar berfungsi dengan mengambil dimensi terkecil yang Anda tetapkan, baik lebar atau tinggi, kemudian mengubah ukuran gambar sehingga dimensi lain diubah ukurannya secara otomatis berdasarkan pada rasio aspek yang terkunci. Secara default, langkah ini akan memotong gambar dari bagian tengah dengan dimensi yang tersisa. Misalnya, jika Anda menentukan rendisi dengan lebar 100px dan tinggi 50px, sementara gambar asli berukuran lebar 1000px dan tinggi 800px, gambar akan diubah ukurannya sehingga dimensi 800px kini menjadi 50px dan dimensi 1000px (menjadi 62,5px) dipangkas dari bagian tengah gambar.

Langkah-langkahnya relatif sederhana tetapi agar gambar menggunakan rendisi, rendisi harus dilakukan di situs SharePoint sebelum Anda menambahkan gambar. Selain itu, Anda juga harus mengaktifkan fitur Infrastruktur Penerbitan SharePoint Server (Tingkat Kumpulan Situs) dan Penerbitan SharePoint Server (tingkat situs).

Menambahkan rendisi gambar untuk mempercepat pemuatan halaman

  1. Verifikasi bahwa akun pengguna yang menjalankan prosedur ini memiliki, setidaknya, Izin desain ke situs tingkat teratas dari kumpulan situs, dan bahwa situs tersebut diterbitkan ke halaman web.

  2. Di browser web, masuk ke situs tingkat teratas kumpulan situs penerbitan.

  3. Pilih ikon Pengaturan.

  4. Di halaman Pengaturan Situs, dalam bagian Tampilan dan Nuansa, Anda akan melihat rendisi gambar bawaan.

    Anda dapat menggunakan rendisi berbeda atau memilih Rendisi Gambar untuk membuat yang baru.

    Cuplikan layar Penyerahan Gambar
  5. Di halaman Rendisi Gambar, pilih Tambahkan item baru.

    Cuplikan layar Tambahkan Item Baru
  6. Di halaman Rendisi Gambar Baru, dalam kotak Nama, masukkan nama untuk rendisi.

  7. Dalam kotak teks Lebar dan Tinggi, masukkan lebar dan tinggi rendisi dalam piksel, kemudian pilih Simpan.

    Cuplikan layar Nama Penyerahan Gambar

Pemangkasan kustom dengan rendisi gambar di SharePoint

Secara default, rendisi gambar dihasilkan dari bagian tengah gambar. Anda dapat menyesuaikan rendisi gambar untuk setiap gambar dengan memangkas bagian dari gambar yang ingin digunakan. Anda dapat memangkas gambar secara individual, per rendisi. Pemangkasan gambar akan mempercepat pemuatan halaman menggunakan cache blog SharePoint untuk membuat versi gambar bagi setiap rendisi. Dengan cara ini pemuatan server akan dikurangi karena gambar hanya dikurangi ukurannya sekali dan akan siap untuk digunakan pengguna beberapa kali. Untuk informasi selengkapnya tentang cara memangkas rendisi gambar, lihat Memangkas rendisi gambar.

Kembangkan keterampilan Office Anda
Jelajahi pelatihan
Dapatkan fitur baru terlebih dahulu
Gabung ke Office Insiders

Apakah informasi ini bermanfaat?

Terima kasih atas umpan balik Anda!

Terima kasih atas umpan balik Anda! Sepertinya menghubungkan Anda ke salah satu agen dukungan Office kami akan sangat membantu.

×