Imej Web: Saiz semula dan Tukar Dengan Sempurna (dan Secara Automatik)

Hampir semua pembangun bahagian hadapan tahu bahawa kami perlu menyampaikan imej terkecil yang mungkin kepada pengguna tanpa menjejaskan kualiti mereka. Kita semua tahu bagaimana untuk mencapainya. Tetapi ia adalah tugas yang tiada siapa yang suka lakukan. Juga dari sudut perniagaan, ia memerlukan masa, dan masa adalah wang. Jadi, "cukup baik" sudah cukup bagus.

Izinkan saya berkongsi cara kami telah menambah baik dan mengautomasikan penghantaran imej yang sempurna tanpa membuat lebih banyak kerja untuk pembangun.

Bagaimana Ia Biasanya Dilakukan

Mungkin bukan anda, tetapi ramai—mungkin kebanyakan kita.

Anda mengeksport gambar dalam PNG pada 2× saiz yang dimaksudkan untuk memenuhi skrin berketumpatan tinggi dan menggunakannya dalam tag. Jika anda sanggup menghabiskan 30 saat tambahan (atau lebih), anda melakukan yang lebih baik: anda menukarnya ke WebP dan meletakkan kedua-dua versi dalam elemen, membenarkan penyemak imbas memilih yang terbaik (bukan yang terbaik, hanya yang terbaru disokong dan kepada format kegemaran penyemak imbas).

Ini adalah "cukup baik", dan selalunya memang begitu.

Tetapi ia tidak sempurna. iPad baharu adalah besar dan boleh menggunakan imej 2.5× atau 3×. Sebaliknya, Lenovo ThinkPad korporat standard tidak memerlukan butiran tambahan itu dan imej 1× adalah sempurna.

Dan secara jujur, semua itu baik untuk kerja manual. Tiada siapa boleh menghabiskan 15 minit pada satu gambar.

Mengautomasikan kepada Kesempurnaan

Untuk otak perfeksionis saya, "cukup baik" bukanlah seperti yang dikatakan frasa itu. Selain itu, sesetengah pelanggan kami berada dalam bidang yang sangat kompetitif, jadi kami mula menyelidik pilihan. Ia tidak mengambil masa yang lama. Kami sudah tahu bahawa penyemak imbas menghantar pengepala HTTP yang menunjukkan format imej yang mereka sokong.

Apa yang kami perlukan adalah untuk mengetahui bahawa elemen boleh memuatkan imej berdasarkan kepadatan piksel skrin tertentu. Itu adalah sesuatu yang sukar anda lakukan dengan pemaparan sebelah pelayan dan melaraskan src melalui JavaScript adalah mustahil atas pelbagai sebab.

Dengan ini, kami mempunyai semua yang kami perlukan:

• Format pelayan boleh berkhidmat.
• Dimensi imej yang diminta oleh pembangun bahagian hadapan.
• Ketumpatan piksel paparan.

Proses

Begini cara kami mengautomasikan proses pengoptimuman imej:

1. Terima Sebarang Muat Naik Imej

   Kami membenarkan pembangun dan pentadbir memuat naik dan menyimpan apa sahaja gambar yang mereka mahu (sudah tentu pembangun lebih berhati-hati, perlu). Sistem kami boleh mengendalikan apa sahaja - walaupun JPEG 250 MB itu terus daripada kamera DSLR yang berjaya kami tukar dan ubah saiz dan kemudian ketawa apabila kami melihat log itu.

2. Penukaran dan Pemampatan Automatik

Setelah imej dimuat naik, sistem kami secara automatik:

• Menukarnya kepada berbilang format: PNG, WebP dan AVIF.
• Memampatkan setiap versi menggunakan tetapan kualiti 90%.

Kenapa 90%? Kerana 10% kualiti terakhir selalunya menghasilkan pulangan yang sangat berkurangan. Anda menjimatkan ruang storan dan lebar jalur yang ketara tanpa sebarang perbezaan yang ketara dalam kualiti visual.

1. Jana Berbilang Resolusi

   Untuk setiap imej, kami menjana berbilang saiz berdasarkan pengganda kepadatan piksel:

• 1×
• 1.5×
• 2×

• 3×

  Ini memastikan peranti dengan skrin resolusi tinggi mendapat imej yang tajam, manakala yang lain menerima imej bersaiz yang sesuai.

  Dan untuk kalis masa hadapan, kami hanya menambah atau menukar nombor dan semuanya automatik untuk dikendalikan (kami belum membuat kandungan VR / AR lagi, tetapi saya mengesyaki teknologi itulah yang berguna).

1. Penyajian Imej Dinamik

   Dalam templat HTML kami, kami menentukan dimensi imej yang dikehendaki (lebar atau tinggi). Kod sebelah pelayan kami kemudian:

• Menyemak sama ada imej yang dioptimumkan wujud.
• Jika tidak, beratur untuk diproses.

• Menghasilkan elemen dengan srcset untuk ketumpatan piksel.

  Pelayar secara automatik memilih imej terbaik berdasarkan keupayaan peranti.

Hasilnya kelihatan seperti ini:

<picture>
  <source srcset="/Upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /Upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /Upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /Upload/2024/03/11/tn-w600-frantisek.webp 3x">
  <img src="/Upload/2024/03/11/frantisek.jpg" width="2222" height="2963" loading="lazy" alt="Video poster">
</picture>

Mengendalikan Imej Besar

Jika kami, sebagai pembangun, mengelakkan saiz semula dan penukaran gambar yang sempurna, kami tidak boleh mengharapkan pentadbir atau pelanggan biasa melakukannya. Oleh itu, kami membenarkan orang ramai memuat naik perkara yang mereka mahukan dan kami memprosesnya (hubungan UX dan pelanggan yang baik).

Pada mulanya, kami tidak menjangkakan mengubah saiz menjadi begitu intensif dan kami mematikan pelayan demo kami sepenuhnya beberapa kali. Jadi kami membangunkan pendekatan ini:

• Kami telah membina perkhidmatan API ringkas pada VPS kelas rendah yang berasingan khusus untuk pemprosesan imej.
• Pelayan pengeluaran kami menghantar imej dan format/saiz yang dikehendaki kepada perkhidmatan ini.
• Imej yang diproses dikembalikan dan disimpan untuk disajikan.

Hasilnya

• Pengguna gembira: Imej dimuatkan dengan cepat dan kelihatan hebat pada mana-mana peranti.
• Pentadbir gembira: Mereka tidak perlu risau tentang mengubah saiz atau mengoptimumkan imej sebelum memuat naik.
• Pembangun gembira: Proses ini adalah automatik, tanpa kerja tambahan diperlukan.
• Pelayan gembira: Penggunaan lebar jalur yang dikurangkan dan beban CPU untuk menyiarkan gambar.

Saya tahu kami boleh menggunakan mana-mana perkhidmatan komersial awam untuk mengubah saiz gambar, tetapi sejujurnya, ini adalah waktu petang bekerja (maksudnya - jauh lebih murah) dan semua aspek terkawal.

Adakah Kami Melancarkannya Secara Komersial?

Kami sangat gembira dengan penyelesaian ini sehingga kami memikirkan untuk menggilap perkhidmatan ubah saiz dan penukaran ini serta membolehkannya untuk kegunaan anda. Adakah terdapat minat dalam perkhidmatan sedemikian? Beritahu saya. Mungkin kita boleh potong banyak.

Untuk Pembangun, Oleh Pembangun - mungkin meme pada ketika ini, tetapi kebenaran yang sukar dalam kes ini.

Kod (Ringkas)

Saya tidak boleh berkongsi aspek saiz semula, tetapi saya boleh menunjukkan kepada anda pilihan dan ciptaan. Kami bekerja dalam PHP, dan inilah cara kami melakukannya.

Menjana unsur

<picture>
  <source srcset="/Upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /Upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /Upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /Upload/2024/03/11/tn-w600-frantisek.webp 3x">
  <img src="/Upload/2024/03/11/frantisek.jpg" width="2222" height="2963" loading="lazy" alt="Video poster">
</picture>

Kami menggunakan sistem templat tersuai yang mana HTML bercampur dengan PHP (saya tahu ia bukan perkara biasa, tetapi ia paling sesuai untuk keperluan kami).

<div>



<p>Kod ini menunjukkan logik. Apa yang sebenarnya kami lakukan ialah kami mempunyai pangkalan data fail dan variannya, jadi bukannya laluan, kami bekerja dengan tatasusunan dan objek. Tetapi, seperti yang saya katakan, ini menunjukkan logik apa yang kita lakukan dengan indah.</p>

<p>Dan seperti yang anda boleh lihat, jika dev bahagian hadapan menulis kod ini atau <img> tag, siapa yang mengambil berat tentang masa yang dihabiskan.</p>

<h2>
  
  
  Mari Tunjukkan Isu
</h2>

<p>Kaedah ini dibina supaya ia tidak menimbulkan sebarang isu di dunia nyata. Tetapi ia mempunyai dua bidang penambahbaikan yang saya tidak sabar untuk melakukannya (sekali lagi, hanya daripada perspektif perfeksionis).</p>

<ol>
<li>
<p><strong>Berbaris Berganda</strong></p>

<p>Ia beratur untuk mengubah saiz selepas memuatkan pertama imej itu di hujung hadapan. Jika tapak web mempunyai trafik yang tinggi, ia sebenarnya boleh beratur dua kali. Dalam penggunaan dunia sebenar - tidak mengapa; jadi ia diproses dua kali. Ia berlaku hanya dua kali dalam setahun di tapak web dengan trafik tinggi.</p>
</li>
<li>
<p><strong>Paparan Awal Imej Besar</strong></p>

<p>Jika pentadbir memuat naik gambar yang besar, ia mengambil masa 5–10 minit untuk mengubah saiz dan menukar kerana ia berlaku dalam tugasan yang dijadualkan. Sementara itu, gambar besar dipaparkan di halaman web mereka. Dalam penggunaan dunia nyata - biasanya hanya pentadbir yang melihatnya kerana kandungan baharu selalunya mengambil masa sedikit sebelum pengguna melawatinya. Di tapak web dengan trafik tinggi, kami memendekkan pemasa ini kepada serendah 1 minit, jadi sekali lagi, bukan satu isu.</p>
</li>
</ol>

<h2>
  
  
  Pertimbangan Penyimpanan
</h2>

<p>Anda mungkin menunjukkan bahawa kini kami mempunyai berbilang imej untuk setiap saiz dan format, yang mungkin memerlukan storan yang intensif. Jika tapak web anda penuh dengan gambar dan galeri, dan anda memerlukan lakaran kecil serta imej terperinci untuk setiap satu, ya, ia akan menggunakan banyak storan.</p>

<p>Tetapi ruang cakera adalah komponen paling murah hari ini. Faedah dalam prestasi dan pengalaman pengguna biasanya jauh melebihi kos. Dan dengan itu, anda telah menurunkan CPU anda dan beban keseluruhan infrastruktur.</p><p><strong>Nota sebelah -</strong> Mengapa mengambil berat tentang infrastruktur? Orang lain sedang berurusan dengan itu, bukan? Itu yang saya banyak dengar. Fakta mudah ialah ia tidak benar. Jika syarikat pengehosan perlu menambah perkakasan untuk lebar jalur yang lebih tinggi disebabkan peningkatan beban tanpa lebih ramai pelanggan, mereka tidak akan dapat mengekalkannya dan dengan senang hati akan menyerahkan kos tersebut kepada penyewa pelayan.</p>

<h2>
  
  
  Keputusan Dan Pengalaman Dunia Sebenar Kami
</h2>

<p>Dalam Konsol Carian Google, Core Web Vitals lebih hijau berbanding sebelum ini, masa muat secara amnya jauh lebih rendah dan masa sesi pelawat lebih tinggi (beberapa peratus, tetapi saya akan terima!). Dan tiada kerja tambahan untuk pembangun atau pentadbir - semuanya berfungsi dengan lancar.</p>

<p>Saya sangat mengesyorkan setiap dev menggunakan sesuatu seperti ini. Ia banyak membantu kami sementara kami sebenarnya boleh melupakan perkara ini di latar belakang wujud dan melakukan tugasnya. Dan saya benar-benar menulis artikel ini lebih lama daripada untuk menyediakan dan menggilap semua sistem.</p>

<h2>
  
  
  Kesimpulan
</h2>

<p>Dengan mengautomasikan pengoptimuman imej, kami telah mencapai:</p>

• Penghantaran imej yang sempurna disesuaikan dengan setiap peranti.
• Masa muat halaman dan pengalaman pengguna dipertingkat.
• Mengurangkan kerja manual untuk pembangun.

Jika anda bosan dengan kerja-kerja pengoptimuman imej, pertimbangkan untuk mengautomasikan proses tersebut. Ia menang-menang untuk semua yang terlibat.

Adakah anda menggunakan beberapa penyelesaian sistemik untuk imej anda?

Atau adakah anda menukarnya secara manual?

Pernahkah anda mencuba AVIF? Mereka mempunyai faedah yang menakjubkan untuk imej yang lebih besar.

Atas ialah kandungan terperinci Imej Web: Saiz semula dan Tukar Dengan Sempurna (dan Secara Automatik). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!