Cara mengoptimalkan gambar untuk web: Panduan langkah demi langkah untuk kinerja situs yang lebih baik

Tidak diragukan lagi bahwa gambar adalah aset yang tak ternilai bagi world wide web. Dari memvisualisasikan data hingga memecah paragraf teks hingga memamerkan karya portofolio Anda, foto dan grafik adalah bagian penting dari sebagian besar desain situs web dan membantu pengguna mendapatkan pengalaman online yang luar biasa.

Namun, memiliki visual yang bagus dapat berdampak buruk pada situs web Anda. Dengan resolusi yang lebih tinggi, muncul ukuran file yang lebih besar, yang juga berarti waktu pemuatan lebih lambat. AKA, gambar sering menjadi penyebab kinerja situs yang buruk. Dan ingat, inti dari menambahkan gambar ke situs web Anda adalah untuk menciptakan pengalaman yang lebih baik bagi pengguna Anda (atau bahkan mungkin untuk meningkatkan penjualan dan konversi!), yang sulit dilakukan dengan situs yang lambat.

Jadi, bagaimana Anda menyeimbangkan kinerja situs dengan desain visual?

Dengan mengoptimalkan gambar Anda.

Ada banyak hal kecil yang dapat Anda lakukan selama proses pembuatan gambar untuk mengoptimalkan ukuran file, khususnya dengan mempertimbangkan situs web Anda.

Dalam panduan langkah demi langkah untuk pengoptimalan gambar ini, saya akan membahas:

• Apa itu optimasi gambar?
• Mengapa pengoptimalan gambar penting?
• 7 cara mengoptimalkan gambar untuk web

Apa itu optimasi gambar?

Secara umum, pengoptimalan gambar adalah tindakan mengurangi ukuran file tanpa kehilangan kualitas. Anda dapat mengoptimalkan gambar Anda dalam fase pembuatan (seperti menggunakan opsi "Ekspor" yang tepat di Photoshop) atau langsung di situs web Anda (seperti menggunakan lazy load untuk menampilkan media di situs Anda). Tujuannya adalah untuk mengurangi jumlah data yang harus diunduh pengguna, sehingga mereka bisa mendapatkan konten yang mereka cari lebih cepat.

Mengapa pengoptimalan gambar penting?

Orang-orang memiliki rentang perhatian yang pendek ketika datang ke web, itulah mengapa penting untuk membuat situs web Anda dimuat dalam dua detik atau kurang. Dan salah satu faktor paling umum yang memperlambat situs Anda adalah gambar Anda. (Bahkan jika situs web Anda berjalan di server terbaik, seperti yang Anda dapatkan dengan host WordPress terkelola, gambar bisa menjadi penurunan kinerja.)

Ada alasan lain mengapa pengoptimalan gambar penting, namun, yang terkait langsung dengan keuntungan bisnis Anda. Selain memperlambat situs web Anda, gambar mengambil ruang disk di server yang memberi daya pada situs Anda. Sebagian besar penyedia hosting memberlakukan batas bandwidth per paket, artinya Anda tidak memiliki sumber daya tak terbatas – dan gambar Anda akan dengan cepat menggunakan ruang tersebut.

Meskipun ini bukan akhir dari dunia jika Anda melebihi batas itu, Anda mungkin akan dikenakan biaya kelebihan penggunaan atau lebih buruk - situs web Anda ditutup.

Dengan mengoptimalkan gambar, Anda dapat memaksimalkan penyimpanan situs dan menghindari batas bandwidth tersebut.

Sekarang setelah Anda mengetahui betapa pentingnya pengoptimalan gambar, mari kita bicara tentang cara melakukannya! Panduan langkah demi langkah ini akan mencakup semuanya, mulai dari tips Photoshop hingga praktik pengembangan.

Cara mengoptimalkan gambar untuk web

Panduan langkah demi langkah ini akan mencakup semua yang dapat Anda lakukan untuk mengoptimalkan gambar, mulai dari Photoshop dan berakhir di situs Anda.

Ikuti langkah-langkah ini untuk mengoptimalkan gambar Anda untuk kinerja situs yang lebih baik:

1. Tolok ukur kecepatan situs Anda saat ini.
2. Ketahui cara memilih jenis file gambar terbaik.
3. Ubah ukuran gambar Anda sebelum mengekspor.
4. Kompres gambar untuk mengurangi ukuran file.
5. Otomatiskan pengoptimalan gambar dengan plugin WordPress.
6. Gunakan teknik "blur up" untuk memuat Gambar Kualitas Rendah terlebih dahulu.
7. Gunakan pemuatan malas.

1. Tolok ukur kecepatan situs Anda saat ini

Sebelum Anda melakukan semua pekerjaan ini untuk mengoptimalkan gambar Anda, mulailah dengan menjalankan tes kecepatan di situs Anda! Pada akhirnya, Anda akan dapat melihat dampak yang telah Anda buat (ditambah Anda dapat membagikannya dengan tim atau bos Anda, untuk pujian tambahan).

Sebagai bagian dari tim dukungan Flywheel, saya mengenal beberapa tes kecepatan, tetapi lima tes ini adalah favorit saya:

• Wawasan Google PageSpeed
• Alat Pingdom
• GTMetrix
• Tes Halaman Web
• Add-on Wawasan Kinerja Roda Gila

Empat yang pertama, alat berbasis browser, bekerja sangat mirip satu sama lain: Buka tautan, lalu masukkan URL Anda untuk laporan singkat tentang kecepatan dan kinerja situs Anda.

Performance Insights, sebuah Add-on untuk platform hosting Flywheel, akan melampaui dasar-dasar untuk memberi Anda rekomendasi yang dapat ditindaklanjuti untuk situs Anda, termasuk wawasan yang hanya dapat diberikan oleh host Anda.

Selain itu, Anda akan dapat melacak metrik dari waktu ke waktu di dasbor, memudahkan untuk melihat dampak perubahan saat Anda melakukan hal-hal seperti mengoptimalkan gambar. Pelajari lebih lanjut di sini.

Alat ini akan merekomendasikan beberapa langkah yang dapat Anda ambil untuk meningkatkan kecepatan dan kinerja situs, tetapi untuk tujuan tutorial ini, fokuslah pada skor untuk saat ini. Ini memberi Anda tolok ukur yang bagus sehingga Anda tahu dari mana Anda memulai.

2. Ketahui cara memilih jenis file gambar terbaik

Setelah selesai membuat gambar (baik menyimpan dari kamera atau mengekspor dari alat seperti Photoshop), Anda akan memiliki opsi untuk menentukan jenis file. Jenis file yang paling umum digunakan di web adalah JPEG, PNG, dan GIF. Dan seperti yang saya yakin Anda bisa tebak, mereka semua memiliki pro, kontra, dan praktik terbaiknya sendiri saat ditempatkan di situs web Anda.

JPEG

Gambar JPEG berfungsi paling baik untuk memamerkan foto berwarna kompleks di situs Anda, karena memungkinkan gambar berkualitas lebih tinggi dengan ukuran file yang lebih kecil. Jenis file ini mungkin akan berfungsi untuk sebagian besar gambar yang ingin Anda gunakan di situs Anda, dengan satu pengecualian utama: gambar dengan latar belakang transparan. (Untuk itu, lihat bagian selanjutnya tentang PNG!)

Saat menggunakan gambar JPEG untuk situs web Anda, pertimbangkan untuk mengekspornya sebagai "Progresif." Hal ini memungkinkan browser untuk secara instan memuat versi sederhana dari gambar sebelum sepenuhnya memuat resolusi penuh ke situs.

Berikut adalah ide tentang bagaimana gambar non-progresif akan dimuat:

Begini cara gambar progresif dimuat:

Jika Anda bekerja di Photoshop, Anda akan menemukan pengaturan ini saat mengekspor sebagai "Simpan untuk Web."

PNG

Jika Anda tidak memiliki banyak warna pada gambar Anda (seperti ilustrasi datar atau ikon), atau ingin transparan, saya sarankan mengekspor sebagai PNG. Pastikan Anda memiliki dimensi gambar yang tepat, dan cari opsi untuk menyimpan sebagai PNG-24 (atau 8, jika tidak ada penurunan kualitas).

GIF

Format gambar ketiga yang paling umum untuk web adalah GIF. Mereka hanya mendukung 256 warna, jadi Anda harus selektif dengan jenis file ini!

Untuk mengoptimalkan GIF untuk situs web Anda, pikirkan secara kritis berapa lama mereka bertahan, jika perlu diulang, dan berapa banyak yang benar -benar Anda butuhkan di halaman atau situs tertentu.

3. Ubah ukuran gambar Anda sebelum Anda mengunggahnya

Salah satu cara termudah untuk mengoptimalkan gambar untuk web adalah dengan mengubah ukurannya sebelum Anda mengunggahnya ke situs Anda. Terutama jika Anda bekerja dengan gambar mentah dari kamera DSLR, dimensinya seringkali jauh lebih besar dari yang sebenarnya Anda butuhkan.

Misalnya, katakanlah Anda menambahkan gambar ke artikel blog di situs Anda. Jika tema WordPress Anda menampilkan gambar pada ukuran 500 x 500 tetapi Anda mengunggah gambar dengan resolusi 1024 x 1024, semua piksel tambahan itu hanya menambah ukuran file dan menurunkan kecepatan situs tanpa memberikan manfaat nyata.

Dengan memotong gambar Anda sebelum mengunggah, Anda akan mengurangi ukuran file, yang akan membantu situs Anda memuat sedikit lebih cepat dan menghemat ruang disk Anda untuk lebih banyak gambar.

Untuk mengubah ukuran gambar Anda, cukup buka perangkat lunak pengedit gambar pilihan Anda. Photoshop berfungsi dengan baik, atau Anda juga dapat menggunakan alat yang lebih sederhana seperti Pratinjau (untuk Mac), Paint (untuk Windows), atau Canva (alat browser).

4. Kompres gambar untuk mengurangi ukuran file

Setelah Anda memiliki gambar akhir, disimpan dalam format yang tepat dan dipotong ke ukuran yang sesuai, ada satu langkah lagi yang dapat Anda ambil untuk mengoptimalkannya sebelum mengunggahnya ke situs Anda: mengompresinya.

Proses ini akan membantu Anda membuat ukuran file lebih kecil tanpa kehilangan kualitas gambar yang nyata. Ada dua jenis utama kompresi: lossy dan lossless.

Kompresi lossless akan mempertahankan tingkat kualitas yang sama sebelum dan sesudah kompresi. Kompresi lossy akan membuang beberapa elemen foto, tetapi biasanya dengan cara yang tidak diperhatikan oleh mata manusia. Untuk mempelajari lebih lanjut tentang jenis kompresi ini, saya merekomendasikan panduan ini dari Imagify.

Jika Anda melihat gambar tertentu di situs Anda dimuat dan perlahan terlihat, itu mungkin pertanda bahwa gambar tersebut perlu dikompresi, diubah ukurannya, atau keduanya.

Untuk mengompresi gambar Anda, yang Anda butuhkan hanyalah alat kompresi gambar. Favorit saya meliputi:

• TinyPNG: Alat berbasis browser gratis untuk mengompresi gambar PNG dan JPEG.
• ImageOptim: Aplikasi sumber terbuka gratis untuk mengompresi gambar.
• JPEGmini: Aplikasi kompres ulang foto untuk Mac dan Windows.
• RIOT: Aplikasi Windows gratis untuk mengoptimalkan gambar.
• Pengoptimal Gambar: Pengaya gratis untuk Lokal.

kecil png

Alat berbasis browser ini mengoptimalkan gambar menggunakan kompresi lossy cerdas, mengurangi ukuran file Anda dengan mengurangi jumlah warna yang digunakan. (Tapi jangan khawatir, Anda bahkan tidak akan menyadarinya!) Gratis dan cepat digunakan untuk PNG dan JPEG.

GambarOptim

Ini adalah aplikasi Mac gratis yang mengompresi gambar dengan menghapus bloat yang tidak perlu, sambil mempertahankan kualitas gambar sebanyak mungkin.

JPEGmini

JPEGmini adalah opsi berbayar yang kuat yang membantu Anda mengurangi ukuran file sambil mempertahankan kualitas dan format. Itu memang memiliki uji coba gratis, sehingga Anda dapat mencobanya sebelum membeli.

KERUSUHAN

Radical Image Optimization Tool (RIOT) adalah aplikasi Windows gratis untuk mengurangi ukuran file gambar. Ini menampilkan tampilan berdampingan, sehingga Anda dapat membandingkan kualitas gambar sebelum dan sesudah kompresi.

Pengoptimal Gambar, Pengaya gratis untuk Lokal

Jika Anda menggunakan Lokal sebagai lingkungan pengembangan lokal, Anda dapat menggunakan Add-on Pengoptimal Gambar untuk mengompresi gambar secara offline secara otomatis. Ini memindai situs Anda untuk semua file gambar, menghemat waktu Anda mengompresinya satu per satu dan mempercepat situs Anda dalam prosesnya.

5. Mengotomatiskan pengoptimalan gambar dengan plugin WordPress

Pada titik ini, Anda mungkin mulai berpikir bahwa pengoptimalan gambar adalah pekerjaan yang berat – dan bisa jadi! Tetapi ada juga cara mudah untuk merampingkan beberapa langkah ini, dan itu dengan memasang plugin pengoptimalan gambar di situs WordPress Anda.

Saya memiliki beberapa rekomendasi, dan masing-masing memiliki fitur unik. Tetapi umumnya, plugin pengoptimalan gambar akan memampatkan dan mengubah ukuran gambar Anda saat Anda mengunggah ke situs WordPress Anda. Ini berarti Anda dapat melewati langkah-langkah itu alih-alih melakukannya secara manual, penghemat waktu yang besar.

Untuk mengoptimalkan gambar di situs WordPress, saya merekomendasikan plugin ini:

• Awan Pengoptimal Gambar EWWW
• Kompres Gambar JPEG dan PNG
• Kracken.io
• Bayangkan

Awan Pengoptimal Gambar EWWW

Plugin WordPress ini akan secara otomatis mengoptimalkan gambar Anda ketika Anda mengunggahnya ke situs Anda, atau juga dapat mengoptimalkan gambar yang telah Anda unggah sebelumnya. Ini membuatnya sangat bermanfaat jika Anda bekerja dengan situs yang sudah ada dengan gambar yang tidak dioptimalkan.

Kompres gambar JPEG dan PNG

Plugin WordPress oleh tim TinyPNG ini dapat mengoptimalkan gambar JPEG dan PNG saat diunggah. Jika Anda penggemar alat berbasis browser, sederhanakan prosesnya dengan plugin gratis mereka!

Kracken.io

Plugin Kracken.io dapat mengoptimalkan gambar baru dan yang sudah ada di situs WordPress Anda. Ini juga mendukung mode kompresi lossless dan lossy, memberi Anda banyak kendali atas hasil akhirnya.

Bayangkan

Plugin WordPress ini akan membantu mengoptimalkan gambar Anda tanpa kehilangan kualitas. Ini juga kompatibel dengan WooCommerce dan Galeri NextGen, jika Anda menggunakan plugin tersebut.

Catatan: Sebelum memilih plugin, pastikan untuk melihat cara kerjanya. Beberapa menggunakan operasi pajak server yang dapat menyebabkan masalah di situs Anda, sementara yang lain menggunakan opsi FTP untuk mempelajari beban di server web Anda.

6. Gunakan teknik "blur up" untuk memuat Gambar Kualitas Rendah terlebih dahulu

Bahkan setelah semua langkah pengoptimalan sebelumnya, ada kasus di mana Anda mungkin masih bekerja dengan ukuran file yang besar atau banyak gambar di halaman, memperlambat kecepatan situs Anda. Dalam kasus tersebut, terkadang sangat membantu untuk tidak hanya mengoptimalkan gambar, tetapi juga untuk mengoptimalkan pengalaman pemuatan sehingga pengunjung situs menganggap file media Anda dimuat lebih cepat daripada yang sebenarnya.

Itulah yang dimaksud dengan dua langkah berikutnya – memberikan tampilan pemuatan gambar yang lebih cepat, sehingga pengguna tidak hanya menatap halaman kosong saat file Anda dimuat.

Salah satu cara untuk melakukannya adalah dengan memuat Gambar Kualitas Rendah (LQI) terlebih dahulu. Dengan memuat versi gambar yang lebih kecil sebelum memuat ukuran penuh, ini memberi pengguna sesuatu untuk dilihat sementara mereka menunggu semua detailnya. Ini memberikan persepsi waktu muat yang lebih cepat, meskipun secara teknis, semuanya dimuat pada kecepatan yang sama.

Cara populer untuk melakukan ini adalah teknik "blur up", yang dapat Anda pelajari cara menerapkannya dengan tutorial tentang Trik-CSS ini.

7. Malas memuat gambar situs Anda

Serupa dengan teknik “blur up”, ada satu trik lagi yang akan membantu Anda memberikan tampilan loading gambar yang lebih cepat: Lazy loading.

Ketika seseorang membuka situs Anda, mereka mulai di bagian atas halaman. Mungkin perlu beberapa saat bagi mereka untuk menggulir seluruh halaman, terutama jika mereka terlibat. Alih-alih mencoba memuat semua gambar sekaligus, pemuatan lambat bertindak dengan asumsi bahwa pengguna paling peduli dengan konten yang dapat mereka lihat. Jadi, gambar dalam tampilan browser mereka dimuat sepenuhnya terlebih dahulu, sementara gambar lain memuat placeholder terlebih dahulu, hingga pengguna menggulir ke bagian halaman tersebut.

Pemuatan lambat adalah teknik yang hebat, dan bahkan lebih kuat jika dipasangkan dengan tips pengoptimalan gambar lainnya! Dan, ini sangat mudah dilakukan di situs WordPress, berkat plugin BJ Lazy Load.

Ini menyimpulkan panduan langkah demi langkah saya untuk kinerja situs yang lebih baik dengan mengoptimalkan gambar! Untuk melihat pengaruhnya terhadap situs Anda, jalankan uji kecepatan lainnya. Bagaimana kabarmu?

Antara alur kerja yang dioptimalkan dan alat pengoptimalan gambar yang tepat, Anda akan dapat melihat kinerja situs yang lebih baik dari gambar yang dioptimalkan dalam waktu singkat!

Melampaui gambar: Pelajari cara meningkatkan kecepatan situs untuk kinerja yang sangat cepat

Platform hosting WordPress terkelola Flywheel dioptimalkan untuk membuat situs WordPress cepat, tetapi server Anda hanyalah bagian dari teka-teki. Dengan Add-on Performance Insights kami, Anda akan mendapatkan pandangan mendalam tentang kinerja situs Anda (sehingga Anda tahu persis di mana harus melakukan peningkatan!) sekaligus dapat melacak metrik dari waktu ke waktu untuk melihat kapan, jika, dan bagaimana hal-hal berubah.

BELAJARLAH LAGI

Panduan ini ditulis oleh Tyler Stokes, Insinyur Kebahagiaan di Roda Gila. Kami membantu materi iklan mengoptimalkan situs web mereka setiap hari untuk kinerja secepat kilat.

Klik di sini untuk mempelajari lebih lanjut tentang platform hosting WordPress yang dikelola Flywheel !