4 Tips Optimasi Gambar Penting

Sep 13, 2025

Bagaimana caranya

Beberapa pengembang yang beruntung dan penulis ini memiliki kesempatan untuk mengedit Edit Edit Optimasi Gambar Baru Osmani, Optimasi gambar penting , yang benar-benar harus Anda baca.

10 cara untuk mengoptimalkan gambar untuk kinerja yang lebih baik

Apakah Anda sedang membangun ukuran penuh Situs Web E-commerce atau hanya membuat rumah online untuk Anda Portofolio desain , Pada artikel ini Anda akan belajar beberapa tips dari buku Addy yang akan membantu membuat gambar Anda lebih ramping dan lebih cepat.

Menjadi gambar penting selektif dan preload

Lihatlah situs Anda dan identifikasi aset gambar yang kritis. Untuk sebagian besar, ini akan menjadi logo atau gambar pahlawan yang ingin Anda render sesegera mungkin.

Di sinilah preload. Petunjuk sumber daya masuk. preload. adalah cara mengisyaratkan kepada klien bahwa suatu aset harus diambil sebelum parser browser sebaliknya akan menemukannya. Anda dapat menggunakannya untuk apa saja, tetapi berfungsi dengan baik untuk pencitraan kritis preloading. Inilah contohnya digunakan dalam HTML & lt; head & gt; elemen untuk preload gambar spanduk pahlawan:

<link rel="preload" href="/img/logo.svg" as="image">

Anda juga dapat menggunakan preload di header HTTP:

Link: </img/logo.svg>; rel=preload; as=image

Di bawah ini Anda dapat melihat dua screenshot gulungan dari halaman yang sama memuat di Chrome. Satu skenario menggunakannya preload. Untuk memuat gambar spanduk pahlawan, sedangkan yang lain tidak.

The effect of using preload on a hero banner — Efek menggunakan preload pada spanduk pahlawan

Dalam contoh dengan preload. , gambar spanduk muncul di jendela browser setengah detik lebih cepat. Semua karena satu liner cepat yang memberikan peramban awal.

Secara otomatis menyederhanakan karya seni SVG Anda

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Alat Sederhana Illustrator, menunjukkan jumlah titik jangkar sebelum dan sesudahnya karena kurva presisi diturunkan

Mengoptimalkan SVGS berbeda dari dengan jenis gambar lainnya, karena tidak seperti JPEG atau PNGS, SVGS terdiri dari teks, khususnya markup XML. Ini berarti bahwa optimasi khas Anda akan berlaku untuk aset berbasis teks (misalnya, minifikasi, kompresi gzip / brotli) dapat dan juga harus diterapkan pada SVG. Di luar itu, Anda dapat menggunakan pengoptimal seperti SVGO untuk menekan ukuran SVG.

Tetapi bagaimana jika Anda tidak hanya mengkonsumsi karya seni vektor, tetapi membuatnya? Jika Anda adalah pengguna Illustrator, Anda dapat secara otomatis menyederhanakan karya seni Anda untuk mengurangi jumlah titik jangkar di jalur melalui jendela dialog Simplify.

Dialog ini dapat ditemukan di Illustrator CC. Menu dengan pergi ke Object & GT; PATH & GT; Sederhanakan. Dengan mengurangi presisi kurva (dan secara opsional menyesuaikan ambang sudut), dimungkinkan untuk menghapus titik jalur ekstra dalam karya seni Anda. Dalam hal ini, Anda akan mencatat bahwa pengurangan presisi kurva sebesar 6% menghapus poin jalur 54. Digunakan dengan bijaksana, bahkan bisa memperbaiki penampilan karya seni Anda.

The savings that path simplification can afford — Penghematan bahwa penyederhanaan jalur mampu

Word to the Wise - Hati-hati dengan seberapa agresif yang Anda dapatkan dengan alat ini. Presisi kurva yang lebih rendah terlalu banyak, dan karya seni Anda yang pernah dibuat dengan hati-hati akan berubah menjadi gumpalan. Namun, mogok keseimbangan, dan Anda akan menuai hasilnya.

Konversi GIF animasi ke video

With FFmpeg you can turn flabby GIFs into svelte video — Dengan ffmpeg Anda dapat mengubah gif flabby menjadi video langsing

Kita semua menyukai gif animasi yang baik. Mereka secara efektif menyampaikan hampir semua sentimen, tetapi mereka bisa sangat besar. Optimiser gambar seperti Gifsicle dapat membantu mencukur kelebihan kilobytes, tetapi tiketnya untuk mengubah GIF menjadi video dan menanamkannya dalam HTML5 & lt; video & gt; menandai. Itu ffmpeg. Utilitas baris perintah sangat cocok untuk tugas ini:

 ffmpeg -i animated.gif -b: v 512k animasi.webm
ffmpeg -i animated.gif -b: v 512k animasi.ogv
ffmpeg -i animated.gif -b: v 512k animasi.mp4

Perintah di atas mengambil sumber gif ( animasi.gif. ) Sebagai input dalam argumen -i, dan output video dengan variabel bitrate maksimum 512Kbps. Dalam tes kami sendiri, kami dapat mengambil GIF animasi 989KB dan menguranginya menjadi MP4 155KB, 109KB OGV, dan WebM 85KB. Semua file video sebanding dengan kualitas ke sumber gif. Karena di mana-mana & lt; video & gt; Dukungan tag di browser, tiga format video ini dapat digunakan seperti:

 & lt; video preload = "tidak ada" & gt;
  & lt; sumber src = "/ video / animasi.webm" type = "video / webm" & gt;
  & lt; sumber src = "/ video / animated.ogv" type = "video / ogg" & gt;
  & lt; sumber src = "/ video / animasi.mp4" type = "video / mp4" & gt;
& lt; / video & gt;

Jika Anda memutuskan untuk pergi rute ini, pastikan untuk memesan & lt; sumber & gt; Tag sehingga format yang paling optimal ditentukan terlebih dahulu, dan paling tidak optimal ditentukan terakhir. Dalam kebanyakan kasus, ini berarti Anda akan mulai dengan video webm terlebih dahulu, tetapi periksa ukuran file output dari setiap video dan pergi dengan apa pun yang paling terkecil, dan akhiri dengan apa pun yang terbesar.

Jika Anda tidak memiliki FFMPEG atau tidak tahu apa itu, saksikan berikut ini . Sangat mudah untuk menginstal melalui sebagian besar manajer paket sistem operasi, seperti homebrew atau cokelat.

Beban malas dengan intersectionobserver

Gambar memuat malas adalah sesuatu yang sudah Anda lakukan, tetapi banyak skrip pemuatan malas menggunakan penangan acara gulir CPU-intensif. Metode seperti itu berkontribusi pada interaksi lamban pada suatu halaman. Perangkat keras yang lebih tua dengan daya pemrosesan yang lebih sedikit bahkan lebih rentan terhadap efek buruk dari jenis kode ini. Pelambatan eksekusi melakukan bantuan gelar, tetapi itu masih berantakan dan agak tidak efisien untuk menentukan kapan elemen berada di viewport.

Untungnya, persimpangan pengamat API memberi kami cara yang lebih sederhana dan jauh lebih efisien untuk menentukan kapan elemen dalam viewport. Berikut ini contoh dari markup gambar pemuatan malas dasar:

 & lt; img class = "malas" data-src = "/ gambar / malas-loaded-image.jpg" src = "/ gambar / placesolder.jpg" Alt = "Aku malas." Lebar = "320" tinggi = "240" & gt;

Di sini, kami memuat gambar placeholder di src atribut, dan kemudian simpan URL untuk gambar yang ingin kita muat dengan malas Data-Src. atribut. Untuk melengkapi semuanya, kami memberikan & lt; img & gt; elemen kelas malas untuk akses mudah dengan queryselectoreall. . Dari sana, kami cukup menggunakan kode ini:

 Document.AddEventListener ("domcontentlloaded", fungsi () {
  Jika ("intersectionobserver" di Window & Amp; & amp; "intersectionobserverentry" di window & amp; & amp; "intersectionratio" di window.intersectionype.prototipe) {
    elemen = dokumen.queryselectorall ("img.lazy");

    var ImageObserver = IntersectionobServer (fungsi (entri, pengamat) {
      Entri.Foreach (fungsi (entri) {
        if (entry.intersecting) {
          entry.target.setatetribute ("src", entri.target.getattribute ("data-src"));
          entry.target.classlist.remove ("malas");
          imageObserver.unobserve (entry.target);
        }
      });
    });

    elemen.FORECH (fungsi (gambar) {
      ImageObserver.OBServe (Gambar);
    });
  }
});

Di sini, kami mengikat kode ke dokumen objek DomContentloaded. peristiwa. Kode ini memeriksa untuk melihat apakah pengamat persimpangan didukung oleh browser saat ini. Jika ternyata itu, kita ambil semua img. elemen dengan kelas malas dengan queryselectoreall. dan kemudian lampirkan pengamat kepada mereka.

Pengamat berisi referensi ke elemen yang kami amati ( Entri. ) dan pengamat itu sendiri ( pengamat ). Kode ini bergantung pada setiap entri pengamat isintersecting. nilai. Sementara elemen yang diamati keluar dari viewport, isintersecting. kembali 0. . Sebagai elemen memasuki viewport, meskipun, itu akan mengembalikan nilai lebih besar dari 0. . Pada titik ini kita menukar konten gambar Data-Src. atribut ke dalam src atribut, dan hapus malas kelas. Setelah gambar yang diberikan malas, pengamat dihapus darinya dengan pengamat Unobserve. metode.

Proses ini jauh lebih mudah daripada mucking dengan handler gulir, tetapi karena pengamat persimpangan tidak menikmati dukungan universal, Anda mungkin harus kembali. Jika Anda adalah jenisnya untuk mengambil skrip dan pergi, kami telah menulis lazy loader yang menggunakan pengamat persimpangan, tetapi juga kembali ke metode yesteryear. Anda bisa meraihnya sini .

Artikel ini awalnya diterbitkan dalam masalah 301 dari bersih , majalah terlaris di dunia untuk desainer dan pengembang web. Beli masalah 301 di sini atau berlangganan di sini .

Artikel terkait:

Panduan Lengkap untuk SVG
Menggunakan alat vektor: pendekatan desainer web
Animate SVG dengan JavaScript

4 Tips Optimasi Gambar Penting

Menjadi gambar penting selektif dan preload

Secara otomatis menyederhanakan karya seni SVG Anda

Konversi GIF animasi ke video

Beban malas dengan intersectionobserver

Bagaimana caranya - Artikel Terpopuler

Cara Membangun Blog dengan Jekyll

Buat finishing cetak khusus di Indesign

Dapatkan reaksi kepala Anda dengan lima faktor ini

Cara Menggunakan Markdown dalam Pengembangan Web

Cara Memulai dengan SASS

Gambarlah potret pensil seekor anjing

10 Aturan Emas untuk SVG Responsif

Buat Lingkungan Game di Engine Unreal 4

Kategori