Bir .png bulanık arka planı, eserler eklemeden sıkıştırılmış bir .jpg biçimine nasıl dönüştürebilirim?

Şu anda web sitemin arka plan resmi için görüntü kalitesi sorunuyla ilgileniyorum.

Kullanmak istediğim büyük bir arka plan resmim var, ancak web sitesi için mümkün olduğunca küçük olmasını istiyorum.

En yüksek kalitede (png) olması yaklaşık 200kb'dir.

JPG olarak yaklaşık 100kb'ye indirebilirim, ancak kalite düşüyor, bu da bekleniyor, ancak doğrusal görünmesini sağlayan korkunç görünümlü çizgiler var.

Bu PNG'yi bir jpg'ye dönüştürmenin ancak görüntünün bu kusurlara sahip olmasını önlemenin özel bir yolu var mı?

İşte resimler:

PNG:

JPG (% 100) kalitesi:

JPEG kayıpsız bir sıkıştırma değildir

JPEG Sıkıştırma, % 100 kaliteye ayarlandığında bile bazı kaliteyi kaybettiğinizde kayıplı bir sıkıştırma olarak kabul edilir . Bu yüzden UI arayüzleri ve arka planlar gibi basit grafikler için PNG gibi kayıpsız bir format kullanmak genellikle daha iyidir.

2014/2015'te 200 kb büyük değil

Arka planın boyutunu olabildiğince azaltmak fikir olsa da, 200kb'nin çoğu geniş bant bağlantısı için o kadar büyük olmadığını belirtmek önemlidir. Cep telefonları ve tabletler için css medya sorgularını kullanarak farklı bir sürüm sunabilirsiniz .

Bir PNG dosyasını daha da küçük yapma

Photoshop ve diğer boya paketleri standart PNG sıkıştırması kullanır, PngOptimizer veya Yahoo'nun Çevrimiçi Hizmeti Smush It'i kullanarak 200kb'yi daha da azaltabilirsiniz . Dosya boyutunu daha da azaltmak, kayıpsız bir format olarak kaliteyi düşürmez ... temelde kodu daha da azaltarak optimize eder, bir ZIP veya RAR dosyasıyla karşılaştırır, bu dosyaları sıkıştırır, ancak içeriğin kalitesini düşürmez.

Şerit gradyanı kullanma

Başka bir olası çözüm, 1px boyutunda ince bir PNG gradyanı ve daha sonra sayfanın yüksekliği kullanmanız background-repeatolabilir, daha sonra bunu kullanarak çoğaltırsınız , Gradyan'ı sizin için oluşturmak için CSS kullanmayı bile düşünebilirsiniz , ancak elbette gölgeleri ve diğer ince ayarları kullanabilmek.

Bu muhtemelen sorunuza cevap vermiyor. Bazı olası alternatifler ...

Bunun yerine CSS'yi düşündünüz mü?

background: linear-gradient(45deg, #3d667c, #1d283e);

Ya da belki SVG base64 tekniğini kullanabilirsiniz ( burada jeneratör aracı ):

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g932" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="#3D667C" offset="0"/><stop stop-color="#1D283E" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g932)" /></svg>

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNENjY3QyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFEMjgzRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkzMikiIC8+Cjwvc3ZnPg==);

Daha da küçük bir PNG kullanmayı ve tarayıcının yerel büyütme algoritmasını büyütmesine izin vermeyi denediniz mi? Bu, dosya boyutunu küçültebilir ve JPG eserlerini ortadan kaldırabilir.

Kraken.io'ya göz atmanızı öneririm , bir görüntü iyileştirici var. Konunuzdaki görüntüler gözle görülmeden% 45 küçültülür!

Ayrıca sadece css kullanabilirsiniz, colorzilla tüm tarayıcılar için doğru css oluşturmak için güzel bir araç vardır.

Eğer bir degrade görüntü ile mroe rahat hissediyorsanız, rengi düşürün, siyah ve beyaz yapın, sonra div / body / element'e arka plan verin:

background: blue url('images/gradient.png')

GIMP gibi bazı görüntü editörleri, bir jpeg kaydederken düzgünleştirmenin yanı sıra sıkıştırmayı kontrol etmenizi sağlar.

Yumuşatma: Yumuşatma seçeneğini sıfırdan farklı bir değere ayarlamak görüntüyü biraz yumuşatır. Bu, sıkıştırmadaki bulanık yapaylıkları azaltır ve sıkıştırmaya yardımcı olur. 0.10-0.15 ayarı, kenarları lekelemeden eserlerin iyi bir bölümünü kaldırır.

http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG

Alt örneklemeyi kontrol ederek yapay nesneleri de azaltabilirsiniz.

Standart alt örnekleme çoğu görüntü için genellikle yeterli olsa da, görüntü kalitesi ve dosya boyutu arasında iyi bir oran sağlarken, alt örneklemenin (4: 4: 4) kullanılmamasının, görüntü kalitesinde belirgin bir artış sağladığı bazı durumlar vardır. dosya boyutunu korumak için daha yüksek bir sıkıştırma oranı kullanın. En göze çarpan durumlar, görüntünün tekdüze bir arka plan üzerinde metin gibi ince ayrıntılara sahip bölümler ve neredeyse düz renkler içeren görüntülerdir.

http://www.ampsoft.net/webdesign-l/jpeg-compression.html

Bantlamayı en aza indirmek için gürültü eklemeye çalışın:

Photoshop:

1. Yeni katman oluşturun.
2. Adresine gidin Image > Fill... >ve şu değerleri kullanın:

3. Katmanın karıştırma modunu Yer Paylaşımı olarak değiştirin
4. Git: Filter > Noise > Add Noise... >. Bu değerler benim için iyi çalıştı:

5. Katmanın opaklığını beğeninize göre ayarlayın. % 22'si iyi durumda ve sonuçta ortaya çıkan JPG:

Yani hiçbir kötü bantlama, küçük boyutlu ama gürültü pahasına. Dosyalar, gürültülü olmayan sürümle (yaklaşık 100 kb), ancak orijinal PNG'nin yarısına kıyasla çok daha ağırdır. Aslında PNG'nizin bu kadar büyük olmasına biraz şaşırdım.

Bir öneri daha:

Gürültü eklemek istemiyorsanız, monitör ekranları için en zengin gamı ​​(daha az bantlama) sağlayan sRGB renk alanında her yerde çalıştığınızdan emin olun.