it-swarm-id.com

Apa yang bisa saya lakukan untuk mengurangi ukuran file gambar saya?

Bekerja dengan beberapa tema wordpress Saya telah memodifikasi beberapa file gambar dan memperhatikan bahwa versi yang saya edit terkadang 3-4x lebih besar dari aslinya (disimpan menggunakan format yang sama). Saya tidak ingin menurunkan kualitas - apa sajakah cara untuk membuat ukuran file lebih kecil sehingga akan memuat lebih cepat?

Sekarang, misalnya, saya menggunakan Photoshop dan mengatur slider kualitas gambar ke '8' (dari 10).

15
Ryan Elkins

Smashing Magazine membuat 2 artikel hebat tentang Optimasi PNG dan Optimasi JPG .

Mereka cukup mendalam, menjelaskan dengan sangat rinci beberapa hal yang Anda mungkin tidak tahu tentang format dan implementasinya. Misalnya, artikel JPEG: "Perlu diingat bahwa ketika Anda menetapkan Kualitas di bawah 50 di Photoshop, itu menjalankan algoritma optimasi tambahan yang disebut color down-sampling, yang rata-rata keluar warna di blok delapan-pixel tetangga".

Kedua artikel membahas teknik spesifik yang dapat Anda gunakan di Photoshop untuk menyiapkan file Anda untuk kompresi yang lebih besar. Yang jauh lebih efektif daripada teknik yang digunakan setelah file disimpan.

Setelah Anda menyimpan file-file ini, atau pada file-file yang Anda tidak cukup beruntung memiliki layered file sumber untuk ke Tweak di Photoshop, masih ada lebih banyak kompresi untuk memeras file-file ini.

Saya menggunakan aplikasi Mac bernama ImageOptim . Dari situs mereka:

ImageOptim mengoptimalkan gambar - sehingga mereka mengambil lebih sedikit ruang disk dan memuat lebih cepat - dengan menemukan parameter kompresi terbaik dan dengan menghapus komentar yang tidak perlu dan profil warna. Ini menangani animasi PNG, JPEG dan GIF.

ImageOptim menyediakan GUI untuk berbagai alat optimisasi: AdvPNG dari AdvanceCOMP, OptiPNG , PngCrush , JpegOptim , jpegtran dari libjpeg, Gifsicle dan opsional PNGOUT .

Sangat bagus untuk mempublikasikan gambar di web (dengan mudah menyusutkan gambar "Disimpan untuk Web" di Photoshop) dan juga berguna untuk membuat aplikasi Mac dan iPhone lebih kecil.

Sepotong kue. Seret gambar Anda (atau folder gambar) ke jendela, itu berjalan melalui semua alat ini mengutak-atik skema kompresi dan menghapus meta-data yang tidak perlu dan informasi profil warna (yang tidak didukung secara luas pula - Anda harus memperbaiki profil warna sebelum menyimpan, tidak menyimpan dan menyematkannya).

Semua alat yang ditautkan dalam kutipan itu memiliki versi Windows/Linux/Mac kecuali PNGOUT, tetapi untungnya seseorang porting PNGOUT ke OS X dan linux karena mereka sangat bijaksana. Jika Anda memilih untuk menggunakan ImageOptim, itu akan mencakup semua kecuali PNGOUT di .app, jadi ambil port PNGOUT, letakkan di/usr/local/bin (atau di mana pun) dan beri tahu ImageOptim di mana ia berada.

Ini tidak biasa bagi saya, terutama dengan gambar PNG, untuk melihat ukuran file turun lebih dari 30% bahkan setelah menyimpan melalui Photoshop "Save For Web & Devices".

Protip: Setelah menjalankan optimasi, urutkan berdasarkan kolom ikon di sebelah kiri dan pilih semua baris dengan ikon (X) - file yang tidak berkurang lebih jauh. Hapus dari daftar, dan jalankan kembali pada semua gambar yang memiliki ikon tanda centang. Saya hampir bisa berjanji kepada Anda bahwa Anda akan memiliki gambar yang masih kehilangan ukuran file. Ulangi pengurutan, pilih, hapus, jalankan kembali hingga Anda mendapatkan semua (X) ikon dan menyebutnya sehari.

14
Bryson

Saat menyimpan foto dalam Photoshop saya sarankan menggunakan File > Save for Web and Devices. Ini akan memungkinkan Anda untuk bermain dengan level kompresi dan melihat hasil visual secara real time. Pada foto Anda biasanya dapat menyimpannya lebih rendah dari level 8 dan masih mendapatkan hasil yang bagus. alt text

10
jessegavin

Anda mungkin ingin memeriksa Yahoo Smush.it . Saya menemukan ini bekerja dengan sangat baik.

4

Untuk gambar PNG Anda dapat mengurangi jumlah warna di colormap dan menyimpannya sebagai PNG yang diindeks. Misalnya, pertimbangkan logo yang berukuran 128x128 piksel (tidak terkompresi). Bayangkan hanya ada 16 warna yang benar-benar digunakan.

  • PNG-32, empat byte per piksel - 65 KB
  • PNG-8, satu byte per piksel - 16 kB
  • PNG-4, empat bit per piksel - 8 KB

Anda dapat melihat bahwa tanpa mengurangi kualitas gambar (ini hanya berlaku untuk jenis gambar tertentu) Anda dapat mengurangi ukuran secara substansial.

Untuk tombol dan ikon situs, Anda juga dapat mempertimbangkan untuk menggabungkannya menjadi satu gambar dan menggunakan CSS atau JavaScript untuk mengontrol tampilan mereka (sprite). Ini menghemat jumlah permintaan HTTP yang dibuat untuk setiap gambar.

4
dmsnell

Coba format lain.

  • PNG untuk fotografi dengan alfa dan/atau bayangan
  • GIF untuk gambar dengan palet warna kecil (hitam/putih atau ikon kuning atau sesuatu)
3
Aaron

Pada dasarnya, cobalah menyimpan gambar Anda dalam format yang berbeda dan kemudian lihat ukuran file.

Jika Anda menggunakan JPEG, Anda harus dapat menyesuaikan kualitas gambar naik dan turun di editor grafis seperti Paint.net. Kualitas gambar 50% biasanya cukup baik untuk web dan membuat gambar lebih kecil.

Dengan PNG Anda tidak dapat melakukan ini tetapi perlu dicatat bahwa kadang-kadang PNG jauh lebih besar dan kadang-kadang jauh lebih kecil dari JPEG. PNG jauh lebih kecil untuk gambar hitam-putih, misalnya, seperti gambar garis hitam dan putih.

Saran yang diberikan hari ini adalah menggunakan sprite CSS untuk mempercepat waktu pemuatan dengan mengurangi permintaan, tetapi sekali lagi Anda harus benar-benar melihat ukuran gambar yang Anda dapatkan. Sangat mungkin bahwa gambar CSS Sprite akan jauh lebih besar daripada gambar komponen, jika, misalnya, Anda menggabungkan beberapa PNG hitam dan putih dengan yang berwarna.

2
delete

Anda juga ingin memastikan bahwa Anda menghapus semua data EXIF ​​- hampir semua ini tidak relevan bagi pengguna di web, apakah mereka benar-benar perlu tahu bahwa Anda menggunakan Canon 5D untuk mengambil foto, dan bahwa Anda menggunakan F-Stop 2,8, terpapar 0,5 detik, dengan ISO 160, tidak ada bias paparan, dan panjang fokus 9mm?

Semua metadata ini menambah bobot pada gambar Anda, dan secara umum harus dihapus.

Seperti jessegavin tunjukkan, sebagian besar aplikasi gambar akan menunjukkan kepada Anda pratinjau dari efek kompresi - menggunakannya, karena pengaturan selimut "8" jarang akan memberi Anda trade off sebaik mungkin.

Akhirnya, plugin Google Page Speed Firefox/ Firebug dapat memberi Anda ide bagus tentang seberapa banyak Anda dapat mengurangi ukuran gambar (termasuk memungkinkan Anda melihat dan menyimpan versi yang lebih kecil) .

2
1
adamcodes

Setelah Anda melakukan semua saran lain untuk memastikan bahwa gambar Anda sekecil mungkin sambil mempertahankan tingkat kualitas yang Anda inginkan, Anda juga akan ingin mengkonfigurasi situs web Anda sehingga menyajikan gambar dengan header HTTP minimal dan memastikan bahwa tajuk yang Anda sajikan memungkinkan gambar disimpan dengan tepat oleh caching server proxy dan browser web.

Untuk mengurangi ukuran permintaan, pastikan server web Anda dikonfigurasikan untuk tidak mengirim header yang tidak berguna seperti X-Powered-By. Selain itu, pastikan bahwa Anda menayangkan hal-hal seperti gambar, CSS, dan komponen statis lainnya dari Host yang tidak mengatur cookie (mis. Static.example.com).

Untuk gambar yang statis, tetapkan tajuk Kedaluwarsa ke tanggal di masa mendatang. Ini memastikan bahwa peramban web dan proxy cache di tengah akan menahan gambar selama mungkin. Satu-satunya downside ke ini adalah bahwa jika Anda ingin menampilkan gambar yang berbeda, Anda harus menggunakan nama file yang berbeda dan tautan ke itu. Penomoran versi dalam nama file (mis. Myimage_1.png atau /images/3/logo.png) bisa menjadi cara yang efektif untuk melakukan ini. Untuk halaman yang kurang statis, tetapkan tajuk Expire realistis (akses ditambah jam X), dan pastikan Anda mengatur tajuk Modifikasi Terakhir atau tajuk eTag (tidak keduanya) sehingga browser yang sebelumnya mengunduh file dapat dengan cepat menguji apakah mereka memiliki versi saat ini dengan membandingkan tajuk alih-alih menarik seluruh gambar.

Meskipun ada banyak sumber daya yang tersedia untuk membahas teknik-teknik ini, Yahoo telah melakukan pekerjaan besar dengan membawa banyak tips untuk meningkatkan kinerja pengiriman konten bersama di satu tempat.

1
JasonBirch