JPEG vs PNG için Başlangıç Kılavuzu (ve her ikisini de nasıl kullanılır)
Web’e resimlerle ne olur? Birkaç on yıl içinde, İnternet Dot Matrix dijital yazıcıdan görüntüler, videolar, animasyonlar ve daha fazlası dahil olmak üzere dinamik bir multimedya sunucusuna değişti. Bununla birlikte, dijital sessizlik hakkında konuşurken, JPEG ve PNG hakkında, özellikle her birini ne zaman kullanacağınız konusunda karışıklık olabilir. JPEG görüntüsünü aynı tarafta görürseniz, ancak bir PNG olarak farkı göremeyebilirsiniz. Bu idealdir, çünkü iki görüntü formatı web için en iyi görüntüleri yeniden üretmeyi amaçlamaktadır. Aslında, dikkat etmeniz gereken farklı kullanım ve optimizasyon teknikleri durumları vardır.
Bu makalede, JPEG vs PNG’yi karşılaştıracağız ve size her resim biçimini ne zaman kullanmanız gerektiğini söyleyeceğiz. Ama önce, sizi her bir dosya türüne tanıtalım. Yüzeydeki JPEG vs PNG arasındaki fark (gerçek anlamda), JPEG ve PNG arasında bir fark yoktur. Başka bir deyişle, iki resim koyarsak ve hangi JPEG’nin ve hangisinin PNG olduğunu seçmenizi istersek, çoğu zaman söyleyemezsiniz. Örneğin, aşağıdaki resmi çekin:
Format Dosyası Ortak Fotoğraf Uzmanları Grubu (JPEG) eksik dijital görüntü sıkıştırması sunar. Bu, bu ve dosya boyutu arasındaki dengenin çok fazla değişmesi durumunda görüntü kalitesinin görülebileceği anlamına gelir. JPEG ‘düz’ bir dosyadır. Başka bir deyişle, dosyalarda şeffaflık gösteremezler. En iyi ayarlarda bile sıkıştırma seviyesini ayarlayabilmenize rağmen, JPEG dinamik aralığı etkileyen 8 bit bir dosya olacaktır. Dahası, JPEG genellikle monitöre rengi nasıl görüntüleyeceğini anlatan bir renk profili içerir. Bunun yerine Taşınabilir Ağ Grafikleri (PNG) görüntüsü web’e hazır bir dosyadır. Bu, 24 bit dosya üretme yeteneğine sahip JPEG’den daha dinamik bir formattır. Bu aynı zamanda ‘kayıpsız’ biçimidir, yani görüntü kalitesini düşürmeden çoğaltabileceğiniz anlamına gelir. Aslında, PNG dosyaları için sıkıştırmayı ayarlayamazsınız ve renk profili yoktur. Ancak, PNG, teknik özelliklere dayanarak Web için çok uygundur.
Açık görünüyor – PNG Web için uygundur ve JPEG değil. Bu tam hikaye değil. Her tür dosya belirli uygulamalar için çok iyidir. Sonra tartışacağız.
JPEG VS PNG: Her web kullanmanız gerektiğinde JPEG ve PNG’den en iyisini alın. Aslında, çok fazla haç olmadan iyi bir şekilde uygundurlar. Yararlı bir SoundBite olarak, JPEG vs PNG kullanma zamanı: Fotoğraf görüntülemek istiyorsanız JPEG kullanın. Diğer dosyalar için – özellikle dijital grafikler – PNG kullanın. Aslında, bu öneri her durum için geçerli değildir (hemen hemen her durumla ilgili olsa da). Örneğin, dijital görüntüleri stok görüntülerle birleştirirseniz, hem JPEG hem de PNG teknik olarak kullanımı yanlış olacaktır. Daha sonra, verebileceğiniz başka talimatlar olmasına rağmen, doğru kararı vermek için daha fazla bilgiye sahip olacaksınız. Örneğin, görüntüleri kopyaladığınızı hayal ederseniz, JPEG’den farklı bir dosya biçimi kullanın. Bunun nedeni, kayıplı sıkıştırma formatının yalnızca dosya tahmini sürümü yeniden yapılandırmasıdır. Tersine, PNG 1: 1 üremedir, çünkü kayıpsız sıkıştırma sunar. Ayrıca, kaydedildikten sonra görüntünün boyutunu değiştirmek istiyorsanız, ölçeği iyi işlediği için JPEG kullanın. PNG, boyutları (veya diğer teknik özellikleri) değiştirdikten sonra azalan farklı bir kodlama yapısı kullanır. Tabii ki bilmeniz gereken başka bir resim biçimi, JPEG vs PNG, dikkate alınması gereken görüntü dosyası formatlarının tek karşılaştırması değildir. Dikkat için rekabet eden ve başka kullanım durumları olan birçok dosya türü vardır:
Grafik Arabirim Biçimi (GIF). Twitter Life’a bir mem veya yaşayan bir video yayınlarsanız, bu GIF. Aslında, PNG’nin GIF dosyalarını orijinal özelliklerinde değiştirdiği görülür ve her ikisi de bir şeffaflık katmanı sunar.
Etiketli görüntü dosyası biçimi (TIFF). Bu raster tabanlı dosya biçimi yazdırmak çok iyidir, çünkü CMYK. Ham görüntü formatı (RAW) renk alanını destekler. Bunu yalnızca bir fotoğrafçıysanız ve kullandığınız kamera için özeldir. Bilgisayarınızdaki RAW dosyalarını görebilmenize rağmen, görmek için özel yazılımlara ihtiyacınız var. Dosya boyutu çok büyük, çünkü veriler tamamlandı. Aslında, ham biçim bir görüntü değil, kodlandığında görüntüyü temsil eden verilerdir.
Yüksek verimli görüntü dosyası (HEIF). Bu, iOS cihazının ana dosya biçimidir. JPEG’den daha iyi olan ve birçok farklı multimedya formatını işleyebilen sıkıştırma ve dosya boyutu sunar.
Bu görüntü dosyalarının her biri web’de (ekranla bağlantılı ham dosyalar hariç) kullanılacak olsa da, JPEG vs PNG hala hakimdir. Her ikisinin de profesyonel olan özel kullanım durumları vardır ve sözleşme dengelidir.
Görüntünüzü yüklemeye nasıl hazırlanırsınız (3 şekilde) JPEG vs PNG, son ekranın kalitesi ile bağlantılı olarak bir beraberlik olarak ortaya çıkmasına rağmen, her bir formatı en iyi şekilde almak için farklı bir şekilde ele almalısınız. Genel resminizin dosya boyutunu, kalitesini ve hazırlanmasını etkileyebileceğiniz üç alan vardır:
Boyutların karşılaşacağınız ilgili kullanım durumunu dikkate aldığından emin olun.
Görüntünüz için web için uygun bir çözünürlük seçin.
Kaliteyi çok etkilemeden görüntü dosyanızın boyutunu daha da azaltmak için ‘tat’ sıkıştırmasını kullanın.
Beklediğiniz gibi, burada iyi bir denge var. Görüntünüzün boyutlarıyla başlayalım.
1. Boyutlarınızı ayarlayın Görüntünün boyutları son kullanıcılar için zincirdeki diğer noktalardan daha önemlidir. Bunun nedeni, tarayıcının görüntüyü yüklemesi ve büyük bir dosyanın kullanıcı deneyimini (UX) aşınmasıdır. Aslında, bu tek düşünce bu değil. Tabii ki, kalite de anahtardır. Küçük bir görüntü yapmaya karar verirseniz, son görüntü kalitesini etkileyecektir (JPEG için PNG’den daha fazla). Cevap, görüntünüzün boyutlarından başlayarak çeşitli alanlarda tatlı bir nokta elde etmektir. Genel bir kural olarak, ihtiyacınız olan ayrıntıları iletebilmeniz için görüntünüzü yeterince büyük hale getirmek istersiniz. Hedef platform ve görüntünün kendisine bağlı olarak farklı bir yerde aşırı bir nokta vardır. Modern krops ve tam çerçeve dijital kameralar, yaklaşık 6.000 px x 3.000 px varsayılan boyutlara sahip görüntüler üretebilir (kameralar arasında vahşi farklılıklar olmasına rağmen). Tersine, ‘uzun kenarları’ yaklaşık 2.000 piksel olan görüntüler sosyal medyada yaygındır. Bunun aygıt tam görünümünde görüntüleneceğini unutmayın.
Blog görüntüleri için, bu 2.000 piksel pratik kural 1.000 piksel kadar düşük olabilir. Ayrıca yüksek tanımlı görüntüler veya ‘retina’ da dikkate alır. Genellikle yüksek tanımlı ekran kadar keskin görüntülenmek için iki katına ihtiyaç duyarlar. Aslında, çözünürlük gitmek için iyi bir yerdir.
2. Doğru çözünürlüğü ayarlayın Dijital ekranın temel öğelerinden biri pikseldir. Bu küçük noktalar, piksel boyutu düzgün olmasa da genel ekranı oluşturur. Bu nedenle, JPEG ve PNG görüntülerimizi hazırlarken çözünürlüğü de dikkate almalıyız. Ekrana kaç piksel girebileceğini tartışmak için inç başına piksel (PPI) kullanıyoruz. Bunu bir santimetre veya bir ‘nokta’ olarak da belirtebilirsiniz. Sonuncusu fiziksel baskı formatı içindir ve grafik tasarım çevreleri genellikle DPI kullanır. Bu nedenle, PPI doğru terim olmasına rağmen, değiştirilebilecek bir şekilde kullanıldığını duyacaksınız. PNG görüntü spesifikasyonları 72 ppi’yi optimal bir tasarım çözünürlüğü olarak kullanırken, bu yüksek modern tanım ekranını dikkate almayacaktır. Tüm ekranlarda keskin hale getirmek için görüntünün boyutlarını ikiye katlayabilmenize rağmen, aynı şeyi çözünürlükle de yapabilirsiniz. Örneğin, bu macOS Big Sur masaüstü ekran görüntülerini alın:
Bu PNG, uzun kenarda 1.000 piksel (bu durumda üst ve alt). Aslında, 144 ppi kullandı – WordPress’e yüklenirken çözünürlüğü 72 ppi’ye değiştiren bazı ‘sihirli’ yüklemeler olmasına rağmen. PNG ve JPEG görüntüleri de çok daha yüksek bir PPI kullanabilir – yaklaşık 300 dpi/PPI yazdırmaya hazır bir çözünürlük. Dahası, Pixabay gibi fotoğraf stok sitelerinden birçok resim 300 ppi kullanılarak indirilecek: Böylece, bunu azaltmak, görüntülerinizi web için ve çeşitli görünümüne daha iyi hazırlayacaktır. 3. Görüntünüzü sıkıştırma kullanarak optimize edin, size görüntü optimizasyonu hakkında çok şey söylememize gerek yoktur. Bu, blogda başka bir yerde bulabileceğiniz bir konudur ve neredeyse tüm WordPress kullanıcıları, yükleme işleminden önce veya sırasında resimleri optimize etmeyi bilecektir. Genel kavram, resme, genellikle kayıp 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 boyutlarda ve çözünürlükte büyük bir değişiklik yaparsanız görülebilir. ‘Renk çizgileri’ şeklinde görülen bir görüntü bozulması olduğunu görebilirsiniz. zayıf sıkıştırma gösteren bir artefakt.
Görüntüyü iyi sunmak için bu artefakt minimal olmalıdır. Bu nedenle, işi yapmak için birçok araç vardır. JPEG’yi sıkıştırmasına rağmen en kolay erişilebilir olan tinypng’dir:
Aslında, bazı görüntülerde hafifçe uygulandığı sıkıştırma, dosya boyutunu azaltmak için yeterli olmayabilir. Shortpixel gibi hizmetler mevcut agresif kayıplı sıkıştırma formatına sahipken, parlak sıkıştırma tinypng ile karşılaştırıldığında inanılmaz işler yapıyor.
Buradaki sonuç, sıkıştırma seviyesini dosya boyutu ve diğer tüm görüntü öğeleriyle dengelemeniz gerektiğidir. Bir sonraki bölümde, alınması gereken en iyi yaklaşımı tartışacağız. JPEG vs PNG: Dosya formatlarındaki farklılıklardan bağımsız olarak her format nasıl en üst düzeye çıkarılır, web araştırmasının doğası, görüntü hazırlığınızı aşağıdaki gibi kısaltabileceğiniz anlamına gelir:
PNG dosyaları için, boyutların azaltılması çok fazla görüntü kalitesini azaltabilir. Buradaki fikir, bu faktörleri azaltmak için mümkün olan en yüksek çözünürlüğü korumaktır. JPEG dosyaları kopyalanmaya devam edemez, çünkü her çoğaltma öncekinden daha fazla bozulur. JPEG’den (örneğin, fotoğraf çekiyorsanız) nerede kontrol edebiliyorsanız, resimdeki kaliteyi korumak için TIFF veya RAW dosyasından JPEG oluşturun. Deneyimlerimize göre, JPEG sıkıştırma ve diğer dosya biçimleri almaz. Bu, sıkıştırma aşamasını almadan önce görüntüyü hazırlamanın ve optimize etmenin önemli olduğu anlamına gelir.
