Squoosh: alat pengoptimuman imej untuk tapak web anda

?Indeks

1. Pengenalan
2. Apa itu Squoosh?
3. Malas memuatkan
4. Rujukan
5. Kesimpulan

---

1. Pengenalan

Web secara amnya dicirikan oleh penggunaan imej. Pernahkah anda melawat tapak web yang tidak mempunyai imej? Saya memberi jaminan kepada anda bahawa itu tidak berlaku. Imej ialah kandungan multimedia setanding kecemerlangan web, jadi belajar mengurusnya adalah penting untuk menyediakan tapak web yang optimum dengan pengalaman pengguna yang baik.

2. Apakah Squoosh?

Squoosh ialah alat sumber terbuka yang selamat dan mudah digunakan yang dicipta dan diselenggara oleh pasukan pembangunan Google Chrome untuk mengoptimumkan imej dengan mengurangkan beratnya tetapi tanpa kehilangan kualiti persembahan untuk pengguna akhir.

Kami boleh mengakses tapak web rasminya di mana anda boleh memuat naik imej anda dan bergantung pada kes penggunaan yang anda miliki, bermain dengan berat dan kualitinya.

Sebagai contoh, kami memuatkan imej dalam format .png yang seberat 1.62Mb dan selepas proses pengoptimuman kami boleh memperoleh imej yang sama dengan berat 154Kb, pengoptimuman 90% hanya dengan menggunakan alat:

Kita boleh lihat demo contoh untuk menyemaknya.

3. Malas memuatkan

Satu lagi cara mudah untuk menguruskan pengoptimuman imej ialah menggunakan pemuatan malas pada imej yang tidak dimuatkan serta-merta dalam port pandangan pengguna, ini bermakna menjimatkan lebar jalur pelanggan dengan mengelak daripada meminta imej yang mungkin tidak perlu digunakan.

Mari kita lihat contoh mudah:

Imej terakhir dalam contoh tidak akan dimuatkan secara lalai kerana ia mempunyai atribut loading="lazy", ini hanya akan memuatkannya apabila pengguna menatal, yang akan menunjukkan kepada penyemak imbas bahawa pengguna memerlukan imej itu, jadi bebanan.

Seperti yang anda lihat, ini adalah cara yang sangat mudah untuk menjimatkan lebar jalur dan secara asli dengan HTML tulen.

4. Rujukan

Repositori rasmi Squoosh adalah seperti berikut:

GoogleChromeLabs / squoosh

Kecilkan imej menggunakan codec terbaik dalam kelasnya, terus dalam penyemak imbas.

Squoosh!

Squoosh ialah apl web pemampatan imej yang mengurangkan saiz imej melalui pelbagai format.

Privasi

Squoosh tidak menghantar imej anda ke pelayan. Semua proses pemampatan imej secara setempat.

Walau bagaimanapun, Squoosh menggunakan Google Analitis untuk mengumpulkan perkara berikut:

• Data pelawat asas.
• Nilai saiz imej sebelum dan selepas.
• Jika Squoosh PWA, jenis pemasangan Squoosh.
• Jika Squoosh PWA, masa dan tarikh pemasangan.

Membangunkan

Untuk membangunkan Squoosh:

1. Klon repositori
2. Untuk memasang pakej nod, jalankan:

   npm install
3. Kemudian bina apl dengan menjalankan:

   npm run build
4. Selepas membina, mulakan pelayan pembangunan dengan menjalankan:

   npm run dev

Menyumbang

Squoosh ialah projek sumber terbuka yang menghargai semua penglibatan komuniti. Untuk menyumbang kepada projek, ikut panduan menyumbang.

Lihat di GitHub

5. Kesimpulan

Menggunakan alatan sumber terbuka untuk mengoptimumkan imej tapak web adalah sangat penting untuk meningkatkan prestasinya, yang digabungkan dengan ciri HTML asli seperti pemuatan malas membawa kepada peningkatan yang ketara dan sangat mudah dalam prestasi.

---

Siaran lain kepengarangan saya yang mungkin menarik minat anda:

Akordion asli eksklusif dalam HTML5?

Cristian Fernando ・ 10 Jan

#webdev #html #css #frontend

Panduan Ringkas: Petua untuk membuat mesej komitmen yang baik dalam Git?

Cristian Fernando ・20 Dis '24

#git #github #gitlab #sepanyol

Bagaimana untuk mencipta kunci SSH dan menyambungkannya ke Github pada Windows? ?

Cristian Fernando ・13 Dis '24

#github #git #sepanyol #gitlab

Atas ialah kandungan terperinci Squoosh: alat pengoptimuman imej untuk tapak web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!