Site için görüntü optimizasyonu: jpegtran kullanarak toplu işleme | optipng | PNGOUT

1. önkoşullar
2. Resimler için öneriler kullanıyoruz
3. Arşiv yapısı
4. İş için kısa talimatlar
5. Takviyeler
6. x64 (aka andi)

Görüntüler olmadan Site - bir anakronizm. Pek çok insan düşünüyor ve sağduyulu değil. Unutmayın, siteye ne zamandan beri ne zamandır ve ne zamandır oradasınız?

Metin verileri görüntüden çok daha küçük. Ancak insanların gözlerini sevdikleri bilinmektedir. Bu nedenle, resimler hikayenin şüphesiz bir avantajı olacak.

Genel olarak, metin hakkında konuşursak, hem içeriğini hem de paragraflar, listeler, alıntılar, tablolar dahil olmak üzere uygun bir görsel sunum anlamına gelir. Ancak, bu yeterli değildir ve haber siteleri bile gazetecilerin görüntülerini sağlamaya çalışıyor.

Görüntülerin gerekli olduğu varsayımından başlayalım. Bunlar resimler, şemalar olabilir, sadece resimleri açıklar.

Uzun zaman önce, Putin ebedi gibi görünmediğinde, ilk tıbbi web portalımı yaptım. Resimleri atlasa koymak gerekliydi. Vücudun anatomik yapısını resimsiz ve kelimelerle anlatmak için daha fazlasını hayal etmek oldukça güç. Daha fazla uzatmadan, resimleri bmp'ye (sıkıştırılmamış format) yükledim. Hamur tartığını söylemek zorunda mıyım? Ayrıca, bazı tarayıcılar bu tür resimlerin nasıl gösterileceğini bilmiyordu.

Peki neden görüntüleri optimize etmek? Basit bir örnek bir fotoğraftır. Modern telefonlarda 8, 12 ve daha da fazla megapiksel kamera var. 12 MP, 4000 x 3000 piksel bir görüntüye karşılık gelir. Sahnenin karmaşıklığına bağlı olarak bu, 2-5 megabaytlık bir boyuta ve daha fazlasına karşılık gelir. Bir düzine fotoğraf - ve sayfa boyutu çok şişer. Resim içerik alanına sığar, bu da tarayıcının önce her şeyi indirmesi, ölçeklendirmesi ve sonra göstermesi gerektiği anlamına gelir. Zayıf için işlemciler veya az miktarda RAM ile - bir felaket.

Şimdi kullanıcının siteyi telefondan izlediğini hayal edin. Bu durumda, sayfa yükleme basitçe bekleyemez. Bu yüzden resimlerin önceden azaltılması gerekiyor.

Birisi bunun bir anlamı olmadığını savunacak: Modern CMS görüntüleri indirirken otomatik olarak küçük resimler yapıyor. Ancak herkesin sitelerinde VPS veya VIP fiyatları var mı? Bir adet 12 MP görüntü indirilebilecek, ancak işleyebilmesi için, PHP'nin depolama için 35+ megabayt (teoride, aslında daha fazlası) ayırması gerekecek ve daha sonra ne kadar küçük bir kopya oluşturulacağını hala biliyor olacak. Ucuz tarifeler derhal kaynakların fazlalığına dalar. İyi bir barınak, kullanıcıdan artık bunu yapmamasını isteyecek, kötü biri bunu görmezden gelecektir, çünkü sadece para onun için önemlidir, hizmetlerin performansı için değil.

Ve böylece doğru davranmaya karar verdik. Önceden görüntüleri küçültüp siteye yüklüyoruz. Böylece motor daha kolay ve insanlar. Herşey mi Pek değil.

Birçok editör ek bilgi içeren orijinal parçaları (meta bilgi, dosyanın görüntü olmayan bölümleri) tutar. Örneğin, telefonda bir şeyin fotoğrafını çekiyorsanız, dosyayı bilgisayara aktarın, sağ tuşa tıklayın ve “Özellikler → Ayrıntılar” ı seçin, cihazdaki verileri göreceksiniz: hangi kamerayı çektiğiniz, enstantane hızı, ISO ve benzeri. Kullanıcı için, bu bilgi yararsızdır, böylece ondan kurtulabilirsiniz.

Bir düşün, bir düşün. Ne var, içerdiği bir sürü bilgi var mı? Düşünün. Bazen yüzlerce kilobayt veri türünden görüntüler elde edersiniz. Sadece bugün, sığması için 584 KB boyutunda bir logo gönderdiler. Aynı zamanda, yararlı bilgiler sadece 14 KB oldu! Bana gelince, ziyaretçiyi yukarıdan 570 KB indirmeye zorlamak tamamen doğru değil.

Alt toplamları özetleyelim. Site kullanıcılarının iyi yapabilmesi için yapmanız gerekenler:

1. Görüntünün boyutunu azaltın. Herhangi bir grafik editörüne yardım etmek.
2. Dosya parçalarını atmak gereksizdir. Aslında, kullanıcının sadece bir resme ihtiyacı var.
3. Resmin boyutunu daha da azaltmaya çalışın.

İlk paragraf, her dosyadaki bireysel çalışmaları içerir. Zaman alıcı, ancak en iyi sonucu getiriyor. Her bir dosyayı açıyor, kesiyor, küçültüyor, sonra da kabul edilebilir kalitede kaydediyoruz.

Ancak 2. ve 3. paragraflar özel programların insafına verilebilir. Set görüntüleri ile çalışmak için yazılım. Google aşağıdaki programları önerir:

• jpg resim formatı için jpegtran .
• PNG görüntüler için optipng ve pngout .

Biraz p. 3. Grafik editörleri genellikle rahatsız etmez. Aynı ayarları, niceleme katsayılarını ve diğer şeyleri içeren önceden belirlenmiş sıkıştırma algoritmalarını seçerek basitçe görüntüyü kaydederler. Ek olarak, birçoğu dürüst bir şekilde mevcut meta-bilgiyi aktarır ve dosya boyutunu daha da artırarak kendi bilgisini ekler.

önkoşullar

Bir yıl önce, servis hakkında toplu halde konuşmaya başladılar. PageSpeed ​​Insights Google’dan Aslında, bunlar arama devinin “nasıl iyi yapılacağı” konusundaki önerileridir. Sadece sitenin adresini yazın ve optimizasyon için bir öneri listesi alın. Burada, görüntüler için zaten optimize edilmiş kaynakları siteniz için indirebilirsiniz. Doğru, bu sadece kontrol edilen sayfa için geçerlidir.

Bir web siteniz varsa, mutlaka bakın bu makale . WordPress kullananlar için özellikle yararlıdır.

Resimler için öneriler kullanıyoruz

Basit görünüyor: Google tarafından belirtilen programları indirin ve sunucudaki tüm dosyaları üzerinden geçirin. Sorun, bu yardımcı programların konsol olmasıdır. Bir seferde sadece 1 dosya alırlar. Ama boşuna değiliz son makale toplu iş dosyaları almak için zaman aldı, değil mi?

Makaleden elde edilen bilgiler toplu halde kendi dosya işleyicinizi oluşturmak için yeterlidir, bu yüzden nerede olduğunu boyamayacağım. Sadece kendimi kullandığım hazır montajı indirmeyi öneriyorum.

Arşivi indirin (212 KB)

Arşiv yapısı

Arşiv bir klasör [ OptimizeImg ] içeriyor. Başlamak için bir yerden ambalajını açın. Ben c: \ temp \ içinde yer var ama farketmez. Asıl mesele, yolun ünlem işareti içermemesidir.

Sonraki. Bu klasör [ uploads ] alt dizinini içerir. Burada işleme gerektiren dosyaları koymanız gerekir. En iyi bölüm, en azından klasör / dosya yapısını zorlayabilmenizdir.

3 program daha var: jpegtran.exe | optipng.exe | pngout.exe, Google tarafından önerilen çok yardımcı programdır. İlgili resmi sitelerden / depolardan indirildi. Şüpheniz varsa veya yalnızca yükseltmek istiyorsanız, güvenilir bir kaynaktan indirin ve mevcut olanları değiştirin.

Ve nihayet, tulza'nın kalbi. Batnichki:

• 1.bat
• 3.bat
• 3-Go.bat
• 3-Opti için-out.bat
• 3-out--opti.bat

İlk dosya olan 1.bat, [yüklemeler] 'den yapıyı yeniden oluşturur. 3 ek klasör daha oluşturulur: [jpg_jpegtran] [png_optipng] [png_pngout] türünde işlem görmüş simge durumuna küçültülmüş dosyalar (jpg - only * .jpg-files, png ile aynı).

3.bat sırayla yürütmek için üç toplu iş dosyasını başlatır:

• 3-go.bat neredeyse 1.bat ile aynıdır. Jpg / png dosyalarını simge durumuna küçült. Çalışmanın sonucu, karşılık gelen görüntülerle birlikte 3 klasör (yukarı bakın) olacaktır.
• 3-opti-to-out.bat, optipng + pngout tarafından işlenen dosyaların yazıldığı [png_optipng-to-pngout] klasörünü oluşturur (tam olarak bu sırada).
• 3-out-to-opti.bat, pngout + optipng tarafından işlenen dosyaların yazıldığı bir [png_pngout-to-optipng] klasörü oluşturur. Bir öncekine benzer, sadece farklı bir sırayla.

Prensip olarak, sadece 1.bat ihtiyaçlarımız için yeterli. Toplu iş dosyasının önceki sürümündeki araştırma ve hataların sonucunda 3 adet torba ortaya çıkmıştır. Böylece hata sırasında pngout için dosyalar optipng dizininden alındı. Ve eski sürümün lansmanı güncellenmiş toplu iş dosyasından 1.5 kat daha küçük boyutta olduğunda benim sürprizim neydi. Sonuç olarak, çift işlemenin fotoğrafları iyi yakalayabildiği ortaya çıktı. Ancak neredeyse 2 kat daha fazla zaman alıyor. Gerekirse kendinize karar verin.

İş için kısa talimatlar

1. Arşiv indir .
2. Paketini aç.
3. Yeni açılan [OptimizeImg] klasörüne gidin.
4. Sokmayı gerektiren tüm dosyalar [upload] klasörünü kopyalayın.
5. 1.bat'ı çalıştırın ve bekleyin. Çok sayıda dosya varsa ve bunlar png ise, uzun süre bekleyin.
6. Siyah pencerede devam etmek için bir tuşa basılması gerektiği hakkında bir mesaj göründüğünde, her şey hazırdır. Oluşturulan klasörlerin içeriğini almak ve eski dosyaların üzerine yazmak için FTP'ye sunucuya kopyalamak kalır.

Bir örnek için. WordPress ile ilgili bir blog edin. Tüm görüntüler [ / wp-content / uploads / ] içinde saklanır. Site klasörüne gidin (ftp ile), [ wp-content ] bölümüne gidin ve [aynı adı taşıyan OptimizeImg klasörüne kopyalar]. 1.bat'ı çalıştırın ve bekleyin. İş bittikten sonra, içerik [jpg_jpegtran] (oraya gidiyoruz!) Sunucuya yükleniyor. Mevcut dosyalar için isteklerin üzerine yazılarak cevap verilir. Png için benzer bir numara, ancak önce hangi klasörün - [png_optipng] veya [png_pngout] - daha az yer kapladığını, içeriğini doldurun.

Diğer dosyalara zarar vermekten korkmayın. Batniki yalnızca jpg / png ile çalışır ve bu tür resimler yalnızca yeni oluşturulan klasörlere yazılır.

Umarım birileri faydalı olur. İyi şanslar!

Takviyeler

1. [OptimizeImg] yolu ünlem işareti içermemelidir ! ve yüzde
2. Komut dosyalarını çalıştırmak yönetici olarak gerekli değildir. Üstelik bu durumda işe yaramayabilir!
3. ...

Yazarlar

çevrimiçi değil 13 saat

x64 (aka andi)

Yorumlar: 2846 Yayınlar: 395 Kayıt: 02-04-2009