Görsel Oran Hesaplayıcı

Neden Oranı Korumak Gerekir?

Bir görselin yalnızca genişliğini veya yalnızca yüksekliğini değiştirirseniz görsel ezilir ya da gerilir. Orijinal oranı koruyarak yeniden boyutlandırmak, görüntünün bozulmadan küçülmesini sağlar.

Platformlar Kendi Oranına Kırpar

Instagram feed, Reels, LinkedIn ve Open Graph kartları farklı oranlar bekler. Yanlış orandaki bir görsel otomatik kırpılır ve genellikle kırpılan kısım tam da mesajınızın olduğu yerdir. Tasarım aşamasında önemli öğeleri merkeze yakın tutmak bu riski azaltır.

Web İçin Gereğinden Büyük Görsel Yüklemeyin

Sayfada 800 piksel genişliğinde görünecek bir görseli 4000 piksel yüklemenin görsel kalitesine faydası olmaz, sadece sayfa hızınızı düşürür. Retina ekranlar için gösterim boyutunun iki katı genellikle yeterlidir.

CSS aspect-ratio Özelliği

Modern CSS'te aspect-ratio: 16 / 9; yazarak bir kutunun oranını sabitleyebilirsiniz. Bu, görsel yüklenirken sayfa düzeninin kaymasını (layout shift) engeller ve Core Web Vitals puanınızı korur.

Sosyal Medya Formatları

Reels ve Story güvenli alanlarını planlamak için Reels/Story Oran Planlayıcımızı, sosyal paylaşım kartları için Open Graph Oluşturucumuzu kullanabilirsiniz.

Hesaplayıcının Arkasındaki Matematik

Oran hesabı basit bir orantıya dayanır. Görselin genişliği ve yüksekliği, ikisinin en büyük ortak böleniyle sadeleştirildiğinde oran ortaya çıkar; örneğin 1920 piksele 1080 piksellik bir görsel sadeleştirildiğinde 16:9 oranını verir. Yeni bir boyut hesaplarken ise orijinal yüksekliğin orijinal genişliğe oranı, yeni genişlikle çarpılır. Böylece genişliği değiştirdiğinizde yüksekliğin ne olması gerektiğini, ya da tam tersini tek adımda bulursunuz. Hesaplayıcı bu işlemi sizin yerinize yapar ve yuvarlama hatalarını da önler.

Bazı görsellerin boyutları tam sadeleşmez ve ortaya 1,91:1 gibi ondalıklı oranlar çıkar. Bu durumda oranı ondalık sayı olarak düşünmek daha pratiktir: oran 1'den büyükse görsel yatay, 1'e eşitse kare, 1'den küçükse dikeydir. Ondalık oran, farklı boyutlardaki iki görselin aynı orana sahip olup olmadığını anlamanın da en hızlı yoludur. Arayüz tasarımında görsel alanlarını baştan doğru oranlarla planlamak için UI/UX tasarım hizmetimizi inceleyebilirsiniz. Doğru planlanan alanlar, içerik ekibinin işini de kolaylaştırır.

Yaygın Oranlar ve Kullanım Alanları

16:9 oranı, YouTube videoları, sunumlar ve web sitelerindeki geniş kapak görselleri için standarttır. 1:1 kare oran, e-ticaret ürün görselleri ve sosyal medya akışlarında güvenli bir seçimdir; her ekranda dengeli görünür. 4:5 dikey oran, Instagram akışında ekranda daha fazla alan kaplar ve kaydırma sırasında dikkat çekme şansını artırır. 9:16 oranı ise Reels, Story, TikTok ve YouTube Shorts gibi tam ekran dikey formatların temelidir.

Bağlantı paylaşımlarında görünen önizleme kartları için yaklaşık 1,91:1 oranı kullanılır; bu oran WhatsApp, Facebook ve LinkedIn gibi platformlarda sayfanızın paylaşıldığında nasıl görüneceğini belirler. Fotoğraf makinelerinden gelen görseller ise genellikle 3:2 veya 4:3 oranındadır ve web'de kullanılmadan önce hedef orana kırpılması gerekir. Tüm bu formatlar için tek bir ana görselden farklı kesimler planlamak üretim süresini kısaltır. Sosyal medya içeriklerinizi formatlara uygun üretmek için sosyal medya içerik üretimi hizmetimizden yararlanabilirsiniz.

E-Ticaret Görsellerinde Oran Tutarlılığı

Bir e-ticaret sitesinde farklı oranlardaki ürün görselleri, kategori sayfasında düzensiz bir ızgara oluşturur. Bazı ürün kartları uzun, bazıları kısa görünür ve sayfa profesyonellikten uzaklaşır. Tüm ürün görsellerini aynı orana, genellikle 1:1 kare veya 4:5 dikey orana göre hazırlamak, kategori sayfalarının düzenli ve güven veren bir görünüme kavuşmasını sağlar. Ürünün görselin içinde benzer oranda yer kaplaması da tutarlılığın önemli bir parçasıdır.

Pazaryerlerinde satış yapıyorsanız her platformun görsel kurallarını ayrıca kontrol edin. Bazı pazaryerleri belirli bir minimum çözünürlük, beyaz arka plan veya ürünün görselin belirli bir oranını kaplaması gibi şartlar arar. Ana görseli en yüksek çözünürlükte, sade arka planla çekip her platform için hesaplayıcıyla doğru boyutları belirleyerek ayrı kesimler oluşturmak en verimli iş akışıdır. Görsel düzeni baştan planlanmış bir mağaza için e-ticaret çözümlerimizi inceleyebilirsiniz.

Duyarlı Görseller ve Sayfa Kayması

Web sitelerinde aynı görsel telefonda, tablette ve geniş ekranlı bilgisayarda farklı boyutlarda gösterilir. Her cihaza aynı büyük dosyayı göndermek mobil kullanıcıları gereksiz yere bekletir. srcset ve sizes özellikleri sayesinde tarayıcı, ekran genişliğine uygun boyuttaki görsel dosyasını kendisi seçer. Bunun için aynı görselin aynı oranda ama farklı genişliklerde birkaç kopyasını hazırlamanız gerekir; hesaplayıcı her genişlik için doğru yüksekliği bulmanızı sağlar. Bu yaklaşım, mobil kullanıcıların veri tüketimini de azaltır.

Görsel etiketlerine genişlik ve yükseklik değerlerini yazmak da önemlidir. Tarayıcı bu değerlerden görselin oranını hesaplar ve görsel henüz yüklenmeden sayfada doğru büyüklükte bir alan ayırır. Bu değerler eksik olduğunda görsel yüklendiği anda metin aşağı kayar ve Core Web Vitals metriklerinden görsel kararlılığı ölçen CLS puanı kötüleşir. Bazı tasarımlarda mobil ve masaüstü için farklı oranlarda kesimler kullanmak da gerekebilir. Sitenizin görsel kaynaklı hız sorunlarını gidermek için WordPress hızlandırma hizmetimizi inceleyebilirsiniz.

Reklam Kreatiflerinde Oran Planlaması

Reklam platformları aynı kampanyada farklı yerleşimler için farklı oranlarda görsel bekler. Google'ın Performance Max ve görüntülü reklam kampanyaları yatay 1,91:1, kare 1:1 ve dikey 4:5 oranlarında görselleri kullanabilir. Meta reklamlarında akış yerleşimleri için kare ve 4:5 dikey, Story ve Reels yerleşimleri için ise 9:16 oranı önerilir. Tek bir oranda görsel yüklemek, platformun görseli diğer yerleşimlere otomatik uyarlamasına ve çoğu zaman istenmeyen kırpmalara yol açar.

Bu yüzden reklam kreatiflerini tasarlarken tek bir görsel yerine bir oran seti planlayın. Ana mesajı, logoyu ve ürünü görselin merkezine yakın konumlandırmak, farklı oranlara uyarlama sırasında kritik öğelerin korunmasını sağlar. Metin içeren görsellerde her oran için yazı düzenini ayrı kontrol edin. Her oran için ayrı kreatif hazırlamak biraz daha emek gerektirse de reklamların her yerleşimde özenli görünmesini sağlar. Görsel öğe setlerinin kampanya performansına etkisini değerlendirmek için Performance Max yönetimi sayfamızı inceleyebilirsiniz.