JPEG ve PNG için Yeni Başlayanlar Kılavuzu (Ve Her İkisi Nasıl Kullanılır)

Web, resimlerle ne olurdu? Birkaç on yıl içinde internet, dijital nokta vuruşlu yazıcıdan görüntüler, videolar, animasyonlar ve daha fazlasını içeren dinamik bir multimedya sunucusuna geçti. Yine de dijital fotoğraflar söz konusu olduğunda, JPEG ve PNG arasında, özellikle her birinin ne zaman kullanılacağı konusunda kafa karışıklığı olabilir.

Bir JPEG görüntüsüne aynı, ancak PNG olarak bakarsanız, büyük olasılıkla hiçbir fark görmezsiniz. Her iki görüntü formatı da web için mümkün olan en iyi görüntüyü yeniden üretmeyi amaçladığından bu idealdir. Yine de, dikkat etmeniz gereken farklı kullanım durumları ve optimizasyon teknikleri vardır.

Bu makalede, JPEG ile PNG'yi karşılaştıracağız ve size her bir görüntü biçimini ne zaman kullanmanız gerektiğini söyleyeceğiz. İlk olarak, sizi her dosya türüyle tanıştıralım.

JPEG ve PNG Arasındaki Fark

Yüzeyde (gerçek anlamda), JPEG ve PNG arasında hiçbir fark yoktur. Başka bir deyişle, iki resim koysak ve hangisinin JPEG, hangisinin PNG olduğunu seçmenizi istesek, çoğu zaman söyleyemezsiniz. Örneğin, aşağıdaki resmi alın:

Bu Scarlet Mormon kelebeğinin bir JPEG veya PNG görüntüsü olup olmadığına karar verebilir misiniz? Elbette, bir referans çerçevesi olmadan karşılaştırma yapamazsınız:

Bu durumda çok büyük bir fark yaratmayacak olsa da, kesin farklılıklar var. Siz karar vermeye çalışırken (tarayıcınızın geliştirici araçlarına bakmadan), paylaşabileceğimiz bazı teknik detaylar var:

• Joint Photographic Experts Group (JPEG) dosya formatı, dijital görüntülerin kayıplı sıkıştırılmasını sağlar. Bu, bu ve dosya boyutu arasındaki denge çok fazla değişirse görüntü kalitesinin fark edilebilir olduğu anlamına gelir. JPEG'ler 'düz' dosyalardır. Başka bir deyişle, bir dosya içinde şeffaflık gösteremezler. Sıkıştırma seviyesini ayarlayabilirsiniz, ancak en iyi ayarlarında bile bir JPEG, dinamik aralığı etkileyen 8 bitlik bir dosya olacaktır. Dahası, bir JPEG genellikle monitörlere içindeki renklerin nasıl görüntüleneceğini söyleyen bir renk profili içerir.
• Buna karşılık, Taşınabilir Ağ Grafikleri (PNG) görüntüleri web için hazır dosyalardır. 24-bit dosyaların çıktısını alma özelliği ile JPEG'den daha dinamik bir formattır. Aynı zamanda 'kayıpsız' bir formattır, yani görüntü kalitesini düşürmeden onu çoğaltabilirsiniz. Yine de PNG dosyaları için sıkıştırmayı ayarlayamıyorsunuz ve renk profili yok. Buna rağmen PNG, teknik özelliklerine göre web için mükemmeldir.

Net görünüyor - PNG'ler web'e uyuyor ve JPEG'ler uymuyor. Pekala, bu hikayenin tamamı değil. Her dosya türü, belirli uygulamalar için mükemmeldir. Sonra, onları tartışacağız.

JPEG ve PNG: Her Birini Ne Zaman Kullanmalısınız

Web, hem JPEG'lerden hem de PNG'lerden en iyi şekilde yararlanır. Aslında, çok fazla çaprazlama olmadan güzel bir şekilde birleşirler. Kullanışlı bir ses parçası olarak, JPEG'e karşı PNG'yi kullanmanız gereken zamanlar şunlardır:

Bir fotoğraf görüntülemek istiyorsanız, JPEG'i kullanın. Diğer herhangi bir dosya için - özellikle dijital grafikler - PNG kullanın.

Yine de, bu tavsiye her durum için doğru değildir (neredeyse her durum için geçerli olmasına rağmen). Örneğin, dijital çizimleri hazır görüntülerle birleştirirseniz, hem JPEG hem de PNG'yi kullanmak teknik olarak yanlış olacaktır. Daha sonra, doğru kararı vermek için daha fazla bilgiye sahip olacaksınız, ancak size verilecek başka ipuçları da var.

Örneğin, görüntüleri kopyalamayı düşünüyorsanız, JPEG'den farklı bir dosya biçimi kullanın. Bunun nedeni, kayıplı sıkıştırma biçimlerinin dosyanın yalnızca yaklaşık bir sürümünü yeniden oluşturmasıdır. Buna karşılık PNG, kayıpsız sıkıştırma sunduğu için 1:1 çoğaltmadır.

Ayrıca, resminizi kaydettikten sonra yeniden boyutlandırmak istiyorsanız, ölçeklemeyi iyi yaptığı için JPEG'i kullanın. PNG'ler, boyutları (veya diğer teknik özellikleri) değiştirdiğinizde bozulan farklı bir kodlama yapısı kullanır.

Bilmeniz Gereken Diğer Görüntü Formatları

Elbette JPEG ve PNG, dikkate alınması gereken tek resim dosyası formatı karşılaştırması değildir. Dikkat çekmek için rekabet eden ve başka kullanım durumları olan birçok başka dosya türü vardır:

• Grafik Arayüz Formatı (GIF). Twitter'a hareketli bir meme veya tepki videosu gönderirseniz, bu bir GIF olur. Aslında PNG, GIF dosyalarını orijinal spesifikasyonunda değiştirmeye çalıştı ve her ikisi de şeffaflık katmanları sunuyor.
• Etiketli Görüntü Dosyası Biçimi (TIFF). Bu tarama tabanlı dosya biçimi, CMYK renk uzaylarını desteklemesi nedeniyle yazdırma için mükemmeldir.
• Ham görüntü formatı (RAW). Bunu yalnızca fotoğrafçıysanız kullanırsınız ve kullandığınız kameraya özeldir. RAW dosyalarını bilgisayarınızda görüntüleyebilmenize rağmen, görüntülemek için özel bir yazılıma ihtiyacınız vardır. Veriler eksiksiz olduğu için dosya boyutları astronomiktir. Aslında, RAW formatları görüntü değil, kodlandığında görüntüyü temsil eden verilerdir.
• Yüksek Verimli Görüntü Dosyası (HEIF). Bu, iOS aygıtlarının birincil dosya biçimidir. JPEG'den daha iyi sıkıştırma ve dosya boyutları sunar ve birçok farklı multimedya formatını işleyebilir.

Bu görüntü dosyalarının her biri web'de kullanım görecek olsa da (görüntüyle ilgili RAW dosyaları hariç), JPEG ve PNG hala hakim durumda. Her ikisinin de, artıları ve eksileri iyi dengeleyen belirli kullanım durumları vardır.

Resimlerinizi Yüklemeye Nasıl Hazırlarsınız (3 Şekilde)

JPEG ve PNG'nin nihai görüntü kalitesi açısından bir beraberlik olarak ortaya çıkmasına rağmen, bundan en iyi şekilde yararlanmak için her formatı farklı bir şekilde ele almanız gerekir. Görüntülerinizin dosya boyutunu, kalitesini ve genel olarak hazırlanmasını etkileyebileceğiniz üç alan vardır:

• Karşılaşacağınız ilgili kullanım durumları için boyutların hesaba katıldığından emin olun.
• Resminiz için web için uygun bir çözünürlük seçin.
• Kaliteyi çok fazla etkilemeden resimlerinizin dosya boyutunu daha da azaltmak için 'zevkli' sıkıştırmayı kullanın.

Beklediğiniz gibi, burada iyi bir denge var. Resminizin boyutlarıyla başlayalım.

1. Boyutlarınızı Belirleyin

Bir görüntünün boyutları, son kullanıcı için zincirdeki herhangi bir noktadan daha önemlidir. Bunun nedeni, tarayıcının görüntüyü yüklemesi gerektiği ve büyük bir dosyanın Kullanıcı Deneyimini (UX) aşındırmasıdır. Yine de, bu tek düşünce değil. Elbette kalite de önemli. Küçük boyutlu bir görüntü yapmaya karar verirseniz, bu, son görüntü kalitesini etkileyecektir (PNG'lerden çok JPEG'ler için).

Cevap, görüntü boyutlarınızdan başlayarak birkaç alanda en iyi noktaya ulaşmaktır. Genel bir kural olarak, ihtiyacınız olan ayrıntıları iletebilmeleri için resimlerinizi yeterince büyük yapmak istersiniz. Hedef platforma ve görüntünün kendisine bağlı olarak farklı olan bir yerde aşırıya kaçma noktası var.

Modern kırpma sensörü ve tam çerçeve dijital kameralar, varsayılan boyutları yaklaşık 6.000 piksel x 3.000 piksel olan görüntüler üretebilir (kameralar arasında büyük farklılıklar olmasına rağmen). Buna karşılık, 'uzun kenarı' yaklaşık 2.000 piksel olan görüntüler sosyal medyada yaygındır. Bunun bir cihazın tam görünüm alanında görüntülenmek için olduğunu unutmayın.

Blog resimleri için bu 2.000 piksellik temel kural, 1.000 piksele kadar düşebilir. Bu aynı zamanda yüksek çözünürlüklü veya 'Retina' görüntüleri de hesaba katar. Yüksek çözünürlüklü ekranlarda net olarak görüntüleyebilmek için genellikle boyutları iki katına çıkarmaları gerekir. Aslında, çözünürlük bir sonraki adıma geçmek için iyi bir yer.

2. Doğru Çözünürlüğü Ayarlayın

Dijital ekranların temel unsurlarından biri piksellerdir. Pikseller tek tip bir boyutta olmasa da, bu küçük noktalar tüm ekranı oluşturur. Bu nedenle JPEG ve PNG resimlerimizi hazırlarken çözünürlüğü de dikkate almalıyız.

Bir ekrana kaç pikselin sığabileceğini tartışmak için İnç Başına Piksel (PPI) kullanıyoruz. Bunu santimetre veya 'nokta' olarak da ifade edebilirsiniz. İkincisi, fiziksel baskı biçimleri içindir ve grafik tasarım çevreleri genellikle DPI kullanır. Bu nedenle, PPI doğru terim olmasına rağmen, değiştirilebilir bir şekilde kullanıldığını duyacaksınız.

PNG görüntü özelliği, optimum tasarım çözünürlüğü olarak 72 PPI kullanırken, bu, modern yüksek çözünürlüklü ekranları hesaba katmaz. Tüm ekranlarda keskin hale getirmek için bir görüntünün boyutlarını ikiye katlayabilirken, aynısını çözünürlük için de yapabilirsiniz. Örneğin, macOS Big Sur masaüstünün bu ekran görüntüsünü alın:

Uzun kenarda 1.000 piksel bulunan bir PNG'dir (bu durumda üst ve alt). Yine de, 144 PPI kullanıyor - ancak WordPress'e yükleme sırasında çözünürlüğü 72 PPI'ye dönüştüren bazı yükleme 'sihri' var.

Hem PNG hem de JPEG görüntüler çok daha yüksek ÜFE'ler kullanabilir - baskıya hazır çözünürlükler yaklaşık 300 DPI/PPI'dir. Dahası, Pixabay gibi stok fotoğraf sitelerinden çok sayıda görsel 300 PPI kullanarak indirilecek:

Bu nedenle, bunu azaltmak, resimlerinizi web ve çeşitli gösterimleri için daha iyi hazırlayacaktır.

3. Sıkıştırmayı Kullanarak Resimlerinizi Optimize Edin

Görüntü optimizasyonu hakkında size fazla bir şey söylememize gerek yok. Bu, blogun başka bir yerinde bulabileceğiniz bir konudur ve neredeyse tüm WordPress kullanıcıları, yükleme işleminden önce veya sırasında görüntüleri optimize etmeyi bilecektir.

Genel konsept, görüntülere genellikle kayıplı bir şekilde ekstra sıkıştırma uygulamanızdır. Bu , görüntü kalitesini etkiler ve ağır kayıplı sıkıştırma uygulamadan önce boyutlar ve çözünürlükte kapsamlı değişiklikler yaparsanız fark edilir.

Görüntüleri iyi sunmak için bu artefaktların minimum düzeyde olması gerekir. Bu nedenle, işi yapmak için birçok araç mevcuttur. En erişilebilir olanı TinyPNG'dir, ancak JPEG'leri de sıkıştırır:

Bununla birlikte, uyguladığı sıkıştırma, bazı resimlerde yumuşaktır ve bu, dosya boyutunu yeterince küçültmeyebilir. ShortPixel gibi bir hizmet agresif bir kayıplı sıkıştırma formatına sahipken, Glossy sıkıştırması TinyPNG'ye kıyasla takdire şayan bir iş çıkarıyor.

Buradaki çıkarım, sıkıştırma düzeyini hem dosya boyutuyla hem de görüntünün diğer tüm öğeleriyle dengelemeniz gerektiğidir. Bir sonraki bölümde, alınacak en iyi yaklaşımı tartışacağız.

JPEG vs PNG: Her Formattan En İyi Şekilde Nasıl Yararlanılır

Dosya biçimlerindeki farklılıklara rağmen, web'de gezinmenin doğası gereği, resimlerinizi aşağıdaki şekilde hazırlayabileceğiniz anlamına gelir:

• Uzun kenarda 1.000–2.048 piksel arasındaki boyutları kullanın.
• Tüm ekranlarda net ve net görüntülendiğinden emin olmak için tüm resimleriniz için 144 PPI çözünürlük ayarlayın.
• Dosya boyutunu küçültmeye yardımcı olmak için görüntü optimizasyonu yoluyla ince sıkıştırma uygulayın. Her şeyi hesaba katarsak, çoğu görüntünün boyutu yaklaşık 100–200 kb olacaktır.

Burada belirli dosya biçimlerine göre biraz daha var:

• PNG dosyaları için boyutları azaltmak, görüntü kalitesini çok fazla düşürebilir. Buradaki fikir, bu faktörleri azaltmak için çözünürlüğü mümkün olduğunca yüksek tutmaktır.
• Her çoğaltma bir öncekinden daha düşük olduğundan, JPEG dosyaları kopyalamaya dayanamaz. JPEG'in nereden geldiğini kontrol edebiliyorsanız (örneğin, fotoğrafı siz çektiyseniz), görüntüdeki kaliteyi korumak için bir TIFF veya RAW dosyasından bir JPEG oluşturun.
• Deneyimlerimize göre, JPEG'ler diğer dosya biçimlerinin yanı sıra sıkıştırma almaz. Bu, sıkıştırma aşamasına geçmeden önce bu görüntüleri hazırlamanın ve optimize etmenin önemli olduğu anlamına gelir.

Şimdiye kadar, JPEG ve PNG, bunların ne zaman kullanılacağı ve dosyalarınızı nasıl hazırlayacağınız konusunda sağlam bir kavrayışa sahip olmalısınız; ve makalenin başından itibaren hangi görüntünün JPEG olduğunu hala bilmek istiyorsanız, bu ilk!

Toplama

Görüntüler web'i çalıştırıyor gibi görünüyor. Bu nedenle, uygulama için saygın bir dosya boyutunda doğru kaliteyi sunmamıza yardımcı olacak bir dizi dosya biçimine sahibiz. JPEG ve PNG yaygın bir karşılaştırmadır çünkü neyin iyi olduğu net değildir ve bunlar iki popüler görüntü formatıdır.

Kısacası, JPEG'ler fotoğraflar içindir ve PNG'ler grafikler içindir. Dosyalarınızı hazırlamak için asıl mesele dosya boyutundan ziyade görüntü kalitesini yüksek tutmak olmalıdır. Yine de, çözünürlükteki ayarlamalar size en büyük değişiklikleri sağlarken, bunun görüntü kalitesi üzerinde daha fazla etkisi vardır. İşin püf noktası, nihai web için hazır görüntüyü elde etmek için boyutları, çözünürlüğü ve sıkıştırmayı dengelemektir.

Görüntüleri burada ana hatlarıyla belirttiğimiz gibi web için mi hazırlıyorsunuz yoksa farklı bir şey mi yapıyorsunuz? Aşağıdaki yorumlar bölümünde bize bildirin!

Resim kredisi: minka2507, Christels .