Bekerja dengan beberapa tema wordpress Saya telah memodifikasi beberapa file gambar dan memperhatikan bahwa versi saya yang diedit 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).
Jawaban:
Smashing Magazine membuat 2 artikel bagus 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 file sumber berlapis untuk di-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 .
Ini sangat baik untuk menerbitkan 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 mem-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.
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.
Anda mungkin ingin memeriksa Smush.it Yahoo . Saya menemukan ini bekerja dengan sangat baik.
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.
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.
Coba format lain.
Pada dasarnya, coba simpan 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 sprite CSS akan jauh lebih besar daripada gambar komponen, jika, misalnya, Anda menggabungkan beberapa PNG hitam dan putih dengan yang berwarna.
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.
Sebagai jessegavin , sebagian besar aplikasi gambar akan menunjukkan kepada Anda pratinjau 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).
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 melayani 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. Juga, pastikan Anda menyajikan 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.