Optimisasi gambar untuk SharePoint Online

Kecepatan dalam memuat halaman web tergantung pada gabungan ukuran semua komponen yang diperlukan untuk merender halaman, termasuk gambar, HTML, JavaScript, dan CSS. Mencantumkan gambar merupakan cara yang tepat untuk membuat situs lebih menarik, tetapi ukurannya akan memengaruhi kinerja. Dengan mengoptimalkan gambar menggunakan kompresi, pengubahan ukuran, dan sprite, Anda dapat menyelaraskan efek gambar berukuran sangat besar. Dengan rendisi gambar SharePoint, Anda dapat mengunggah sebuah gambar berukuran besar, lalu menampilkan bagian gambar yang memungkinkannya untuk digunakan kembali, dan bukan dimuat ulang.

Menggunakan sprite untuk mempercepat pemuatan gambar dalam SharePoint Online

Sebuah sprite gambar berisi banyak gambar yang berukuran lebih kecil. Dengan CSS, Anda memilih bagian dari gabungan gambar untuk ditampilkan di bagian halaman tertentu dengan penempatan yang tepat. Pada dasarnya, Anda memindahkan satu gambar di sekitar halaman, bukan memuat beberapa gambar, dan memperlihatkan bagian kecil dari gambar tersebut melalui jendela kecil tempat bagian yang diperlukan dari sprite gambar ditampilkan kepada pengguna akhir. SharePoint Online menggunakan sprite untuk menampilkan berbagai ikonnya di spcommon.png sprite.

Yang dibahas di sini:

  • Pemadatan gambar

  • Optimisasi gambar

  • Rendisi gambar SharePoint

Cuplikan layar spcommon

Hal ini dapat meningkatkan kinerja karena Anda hanya mengunduh satu gambar, bukan beberapa, lalu menyimpan dan menggunakan kembali gambar tersebut. Meskipun gambar tidak disimpan, dengan memiliki satu gambar dan bukan beberapa gambar, metode ini 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 membantu 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 mengetahui 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 di SharePoint Online yang memungkinkan Anda untuk menyediakan versi gambar lain 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. Meskipun gambar telah ditetapkan oleh CSS, resolusi penuh dari gambar masih dimuat. Dalam hal ini, ukuran file dapat diperkecil 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 gambar yang ingin digunakan. Anda dapat memangkas gambar satu per satu, per rendisi. Memangkas gambar akan mempercepat pemuatan halaman dengan cache blob SharePoint untuk membuat versi gambar bagi setiap rendisi. Dengan demikian, pemuatan server akan berkurang karena ukuran gambar hanya diubah sekali dan akan siap ditampilkan ke pengguna akhir beberapa kali. Untuk mengetahui 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.

×