Css'deki görüntüyü html'ye nasıl yeniden boyutlandırırım. Çevrimiçi DPI dikkate alınarak bir fotoğrafı kağıda yazdırmak için santimetre cinsinden yeniden boyutlandırma Bir resim için belirli bir boyut nasıl ayarlanır

Fotoğraf, kağıt baskı standartlarına göre belirtilen boyuta (milimetre, inç) ve DPI cinsinden belirtilen boyuta göre yeniden boyutlandırılacaktır. Cm, mm ve inç cinsinden boyutlar binde bir doğrulukla belirtilebilir, örneğin 15x10 formatı yerine 15.201x10.203 cm olarak ayarlayabilirsiniz.

ile masa standart boyutlar dikey (portre) konumdaki fotoğraflar:

Standart kağıt sayfası boyutu A4 formatı- 300 dpi'da 21x29,7 cm veya 2480x3508 piksel. Diğer sayfa biçimlerinin boyutları Wikipedia sayfasında görülebilir, ancak boyutların orada milimetre ve inç olarak listelendiğini unutmayın, yani. bu sayfadaki ayarlarda uygun değeri seçmeniz gerekir.

Bir fotoğrafı DPI'yi (inç başına nokta) hesaba katmadan, yani yalnızca belirtilen formatın oranlarına saygı duyarak yeniden boyutlandırmanız gerekirse, bunun için "DPI cinsinden Boyut" parametresini "0" olarak ayarlamanız gerekir. ayarlar.

Orijinal görüntü hiçbir şekilde değiştirilmez. Size başka bir işlenmiş resim verilecektir.

Görüntüler hemen hemen her sitenin bileşenleridir, bu nedenle yeniden boyutlandırma vazgeçilmezdir. Bir görüntüyü yeniden boyutlandırmanın 2 yolu vardır: grafik editörü veya programlı olarak HTML Kodu css'de.

içinde ise css kodu html'de görüntünün boyutunu ayarlamayın, o zaman sitedeki yüksekliği ve genişliği piksel cinsinden aynı olacaktır. Kaynak dosyası. Yani, bir resmi yalnızca bir grafik düzenleyici kullanarak css ve html olmadan yeniden boyutlandırabilirsiniz ve boyutunu belirtmezseniz sitede otomatik olarak değişecektir. Ancak css'deki bir görüntünün boyutunu programlı olarak html'ye değiştirmenin gerekli olduğu durumlar vardır.

1. Grafik düzenleyicide resmin değiştirilmesi

Resmin boyutunu herhangi bir grafik düzenleyicide (photoshop, gimp, xnview) değiştirebilirsiniz ve site üzerinde orijinal boyutuna göre otomatik olarak değişecektir.

Yöntemin avantajları:

Resim daha hızlı yüklenir çünkü daha sonra programlı olarak sıkıştırılacak olan fazladan veri (piksel) indirmeniz gerekmez.

Grafik düzenleyiciler, genişliği ve yüksekliği 200 pikselden az olan görüntüleri kötü bir şekilde sıkıştırır.

Mümkün ve uygun olduğunda, resimlerin programlı olarak yeniden boyutlandırıldığından daha hızlı yüklenmesi için bir grafik düzenleyicide yeniden boyutlandırmayı deneyin. Hız farkı onlarca kez olabilir.

2. Sitedeki css kodundaki görseli değiştirme

Artıları:

Boyutu ayarlamak için daha hızlı ve daha uygun. Görüntüyü küçültmenin bu yöntemi genellikle kolaylık sağlamak için kullanılır. Örneğin, bir resim birçok farklı boyuta sahip olabildiğinde, aynı resmin değerlerini programlı olarak değiştirmek, bir görselin bir grafik düzenleyicide düzenlenmiş tüm formatlarını yüklemekten genellikle daha uygundur.

Grafik düzenleyicilerin aksine, yüksekliği veya genişliği 200 pikselden az olan, niteliksel olarak sıkıştırılmış küçük resimler. Sitedeki resim boyutunun 200px'den küçük olmasını istiyorsanız, kaydetmek için orijinal boyutunun %30-50(260-300px) daha büyük olması daha iyidir iyi kalite azalırken.

Aynı zamanda site yüklenme hızı farkı da hissedilmeyecek çünkü küçük görseller çok az yer kaplıyor ve boyutlarını %30 oranında büyütürseniz herhangi bir değişiklik farketmeyeceksiniz. Ancak kalite farkını görün.

Yeniden boyutlandırma yalnızca orijinal sürüm indirildikten sonra gerçekleştiğinden, programlı olarak sıkıştırılmış resimlerin yüklenmesi daha uzun sürer. Bu nedenle, görüntü boyutu genişlik veya yükseklik olarak 200 pikselden fazlaysa, sitenin daha hızlı çalışması için onu bir grafik düzenleyicide sıkıştırmak daha iyidir.

css kullanarak html resmini yeniden boyutlandırma

Html'de bir resmi yeniden boyutlandırmak için cssözellikler kullanılır genişlik(genişlik) ve yükseklik(yükseklik) stil özniteliği içinde. Yalnızca genişlik veya yükseklik yazabilirsiniz ve belirtilmemiş kalan değer, resmin en boy oranını korurken otomatik olarak değişecektir. Örneğin, genişliği kullanarak bir görüntünün yalnızca genişliğini belirtirseniz, yüksekliği en boy oranını koruyarak otomatik olarak değişir. Ve tam tersi, yalnızca yüksekliği (yüksekliği) belirtirken, genişliği de görüntünün en boy oranını koruyarak otomatik olarak değişecektir.

Görüntü boyutlarını belirtmeden kod örneği

Tarayıcıda sonuç

Sayfa Kodu

.css'de yeniden boyutlandırılan resim içeren örnek kod

Tarayıcıda sonuç

Sayfa Kodu

stil="genişlik:150 piksel; ">

Yukarıdaki örneklerin her ikisi de 300x184 piksel boyutunda (genişlik ve yükseklik) aynı görüntüyü kullanır. 1 örnekte, genişlik ve yükseklik css'de belirtilmediğinden, görüntü orijinal 300x184px boyutunda değişmeden tarayıcıda görüntülendi. Ve 2. örnekte, resim tarayıcıda 2 kat küçültülmüş olarak görüntülendi, genişlik 150 piksel olduğu için yükseklik buna göre otomatik olarak 92 piksel olarak değiştirildi. Gördüğünüz gibi, yükseklik özelliği, genişlikle orantılı olarak otomatik olarak değiştiği için hiç belirtilmeyebilir.

Her iki seçeneği de sağlarsanız: genişlik(genişlik), yükseklik(yükseklik) ve oranlara karşılık gelmeyecekler, o zaman resim tam olarak bu boyuta sahip olacak, ancak değerlere bağlı olarak sıkıştırılmış veya uzatılmış bir biçimde olacaktır.

Resimleri büyütmek neden istenmiyor?

Önemli: Görüntü boyutunun artması, kalite kaybıyla birlikte görülür. Herhangi bir şekilde değiştirirken değerleri orijinal görüntüdekinden daha az ayarlamak, yani sadece azaltmak önemlidir.

Piksel boyutunu orijinal görüntüden daha büyük olacak şekilde ayarlarsanız kalite bozulur. Ve kalite kaybı açıkça görülecektir, çünkü bilgisayar yeni piksel ekleyemez, yalnızca mevcut olanların boyutunu artırabilir. Orijinal değerden görüntü büyütme oranı ne kadar büyük olursa, kalitesi o kadar kötü olur ve kare pikseller o kadar net görünür.

Talimat

İlk olarak, arama motorlarını kullanarak resmi bulmaya çalışın. Bir sorgu girin ve ardından arama ayarları sekmesini seçin. Örneğin, Google'da bir "Arama Araçları" düğmesi bulunurken, Yandex'de kaydırıcılı bir simge bulunur. "Boyut" öğesini seçmeniz ve kesin değerleri belirtmeniz gerekiyor. Veya, örneğin, iyi çözünürlüğe sahip bir fotoğrafa ihtiyacınız varsa, "Büyük" seçeneğini seçin.

İstenilen boyutta resim yoksa, çerçeveye kendiniz ayarlanabilir. yollar var Birincisi, önce istediğiniz boyutta bir belge oluşturmanız ve ardından resmi değiştirmenizdir. İkincisi tam tersi - resmi açın ve boyutunu değiştirin. Esasen hiçbir fark yoktur: hepsi tercihlerinize ve hedeflerinize bağlıdır. Örnekler Adobe Photoshop'ta ele alınacaktır, ancak diğer grafik editörlerini kullanabilirsiniz.

İlk yol. "Dosya" - "Oluştur ..." veya Ctrl + N tuş kombinasyonunu tıklayın. Ayarların olduğu bir pencere önünüzde görünecektir. Orada genişlik, yükseklik ve gerekli renk çözünürlüğü parametrelerini belirtin. Ardından beğendiğiniz görseli tarayıcıda açın, sağ tıklayın ve "Resmi Kopyala"yı seçin. Ardından programa dönün ve Ctrl + V kombinasyonuna basın.

Resim, grafik düzenleyici penceresinde görünecektir. Ardından "Düzenleme" - "Serbest Dönüşüm" veya Ctrl + T kombinasyonunu tıklayın. Görüntüyü çalışma penceresinin boyutuna sığdırabileceğiniz anahtar noktalar görünecektir. İstediğiniz sonucu alır almaz (bu arada, çalışma alanının sınırlarını aşabilirsiniz), "Dosya" - "Farklı kaydet ..." veya Ctrl + S tuş kombinasyonunu tıklayın.

İkinci yol. Önce bilgisayara gitmeniz, ardından "Dosya" - "Aç ..." (veya Ctrl + O kombinasyonu) tıklamanız ve istediğiniz görüntüyü seçmeniz gerekir. Ardından "Görüntü" - "Görüntü Boyutu ..." öğesini seçin veya Alt + Ctrl + I tuşlarına basın. "En boy oranını koru" seçeneğinin işaretini kaldırın ve istediğiniz boyutu seçin. Ardından OK tuşuna basın.

Resmin boyutunu nasıl büyüteceğinizi bilmiyor musunuz? İhtiyacınız olan her şey bilgisayarınızda zaten yüklü olduğundan, bu çok basit bir iştir. Bu kılavuzu okuyun ve 5 basit araçla bir fotoğrafı nasıl yeniden boyutlandıracağınızı öğreneceksiniz.

Yöntem 1: Microsoft Paint'te bir görüntüyü yeniden boyutlandırma

1. MS Paint'i bulun ve başlatın. İşletim sisteminin tüm sürümlerinde önceden kuruludur. Pencereler. Başlat > Tüm Programlar > Donatılar > Paint:

1. Resmi Paint penceresine sürükleyin veya Menü > Aç (Ctrl+O).
2. Programın ana menüsünde " Yeniden boyutlandırmak"Ve onu seçin:

1. Görüntü yeniden boyutlandırma ve en boy oranı paneli açılacaktır. Değeri piksel cinsinden belirtebilirsiniz. kutucuğu işaretlemeyi unutmayın" orantıları koru". Aksi takdirde, görüntü deforme olacaktır:

1. Resmin boyutunu büyütmek için OK butonuna tıklayın ve fotoğrafı kaydedin.

tavsiye:

• Fotoğrafınızı uzatmadan boyutlandıramıyorsanız, istenmeyen kenarları kaldırmak için Kırpma aracını kullanabilirsiniz. Bunun nasıl yapılacağı paragraf 3'te açıklanmaktadır;
• Bir fotoğrafı daha hızlı açmak için üzerine sağ tıklayın ve " Paint ile aç»;
• Görüntüyü orijinaliyle aynı biçimde kaydetmek en iyisidir.

Yöntem 2. MS Fotoğraf Galerisi'nde bir görüntü nasıl yeniden boyutlandırılır

1. Bilgisayarınızda Microsoft Fotoğraf Galerisi yüklü değilse ( Başlat > Fotoğraf Galerisi), Windows Essentials 2012'nin bir parçası olarak indirip yüklemeniz gerekir;
2. MS Fotoğraf Galerisi'ni başlatın ve grafik dosyanızı bulun;
3. Üzerine sağ tıklayın ve "Yeniden Boyutlandır ..." seçeneğini seçin:

1. Bir hazır ayar seçin: " Küçük 640 piksel”, “Orta 1024”, “Büyük 1280” vb.

1. Tıklamak " Yeniden boyutlandır ve kaydet". Resmin boyutunu büyüttükten sonra, resim aynı klasöre yerleştirilecek, orijinali de içinde kalacaktır.

tavsiye:

• Görüntünün tam boyutunu ayarlamak istiyorsanız açılır menüden " Gelenek» ve fotoğrafın daha büyük tarafı için boyutu ayarlayın;
• Birden çok fotoğrafı aynı anda yeniden boyutlandırmak için Ctrl tuşunu basılı tutarken fotoğrafları seçin.

Yöntem 3. Photoscape'te bir görüntüyü yeniden boyutlandırma

Photoshop'ta bir görüntüyü yeniden boyutlandırabilirsiniz. Veya bunun için Photoscape'i kullanın.

1. Photoscape'i indirin ve kurun. Programı çalıştır;
2. "Düzenleyici" sekmesine gidin ve düzenlemek istediğiniz fotoğrafı bulun:

1. Resmin altında " Yeniden Boyutlandır " düğmesi var, üzerine tıklayın.
2. Yeni bir fotoğraf boyutu ayarlayın. seçeneğinin olduğundan emin olun " En boy oranını koru etkinleştirildi ve OK düğmesine basın:

1. Düzenlenen görüntüyü kaydedin.

tavsiye:

• Birden çok görüntüyü yeniden boyutlandırmanız gerekirse, " Toplu düzenleyici". Bir klasör ekleyin ve içindeki tüm fotoğrafları yeniden boyutlandırın;
• Tam boyutu bilmiyorsanız, orijinal boyutun "Yüzdesini" ayarlayabilirsiniz.

Yöntem 4. IrfanView'da bir görüntü nasıl yeniden boyutlandırılır

1. Bir resmin boyutunu görüntülemek ve büyütmek için harika bir araç olan IrfanView'ı kurun;
2. Program penceresine sürükleyerek veya araç çubuğundaki ilk düğmeye tıklayarak bir fotoğraf ekleyin:

1. "Görüntü" sekmesine gidin, " yeniden boyutlandırma/oran» ( ctrl+r);
2. Yeni boyutu piksel, santimetre, inç veya orijinal görüntünün yüzdesi olarak ayarlayın:

1. Resmi kaydedin.

tavsiye:

• Standart boyutları kullanabilirsiniz: 640 x 480 piksel, 800 x 600 piksel, 1024 x 768 piksel vb.;
• Yüksek kaliteli fotoğrafları korumak için DPI ayarının en az 300 olarak ayarlandığından emin olun.

Yöntem 5. Çevrimiçi bir görüntü nasıl yeniden boyutlandırılır

1. Çevrimiçi bir resmin boyutunu büyütmek için PicResize web sitesine gidin.
2. Düğmeye bas Araştır” ile bir fotoğraf seçin. Tıklamak " Devam etmek»:

1. %50 daha küçük gibi, orijinal görüntünün bir yüzdesini seçin. Araç, çıktı görüntü boyutunu görüntüler. Alternatif olarak, " seçerek tam boyutu girebilirsiniz. özel boyut»:

Bir etiketi HTML kullanarak bir resmi yeniden boyutlandırmak için genişlik (genişlik) ve yükseklik (yükseklik) nitelikleri sağlanır. Değer olarak pikseller kullanılır ve bağımsız değişkenler görüntünün fiziksel boyutlarıyla eşleşmelidir. Örneğin, Şek. 10.6, 100x111 piksel boyutlarına sahip bir görüntüyü gösterir.

Pirinç. 10.6. orijinal boyutta resim

Buna göre, bu şekli yerleştirmek için HTML kodu örnek 10.4'te gösterilmiştir.

Örnek 10.4. Çizim boyutları

Görüntünün boyutları açıkça belirtilirse, tarayıcı bunları belgenin yüklenmesi sırasında görüntüye karşılık gelen boş alanı görüntülemek için kullanır (Şekil 10.7). Aksi halde tarayıcı görüntünün genişliğini ve yüksekliğini değiştirmeden önce görüntünün tamamen yüklenmesini bekler (Şekil 10.8). Bu durumda, başlangıçta resmin boyutu bilinmediğinden ve otomatik olarak küçük olarak ayarlandığından metin yeniden biçimlendirme meydana gelebilir.

Pirinç. 10.7. Resmin boyutu belirtilmedi ve henüz yüklenmedi

Pirinç. 10.8. Resim yüklendi, metin yeniden biçimlendirildi

Görüntünün genişliği ve yüksekliği hem yukarı hem de aşağı değiştirilebilir. Ancak, dosya boyutu değişmeden kaldığı için bu, resmin indirme hızını hiçbir şekilde etkilemez. Bu nedenle, görüntüyü dikkatli bir şekilde küçültün, çünkü. bu, okuyucular arasında, bu kadar küçük bir çizimin yüklenmesinin neden bu kadar uzun sürdüğü konusunda kafa karışıklığına neden olabilir. Ancak boyutu artırmak, ters etkiye yol açar - görüntünün boyutu büyüktür, ancak dosya aynı boyuttaki görüntüye göre daha hızlı yüklenir.

Şek. 10.9, şekil 2'de gösterilenle aynı görüntüyü gösterir. 10.6, ancak genişlik ve yükseklik olarak iki katına çıktı.

Pirinç. 10.9. Resmin tarayıcıda büyütülmüş görünümü

Böyle bir çizimin kodu neredeyse değişmeden kalacaktır ve Örnek 10.5'te gösterilmiştir.

Örnek 10.5. Bir resmi yeniden boyutlandırma

Bu tür yeniden boyutlandırmaya yeniden örnekleme denir ve tarayıcı algoritması, grafik düzenleyicilere göre yetenekleri açısından daha düşüktür. Bu nedenle sadece özel durumlarda bu şekilde görüntüyü büyütmek gerekir aksi takdirde görüntü kalitesi çok fazla bozulur. Bir tür grafik programı kullanmak daha iyidir. İstisna, dikdörtgen alanlar içeren çizimlerdir. Şek. Şekil 10.10, 54 baytlık ve orijinal boyutu 8 x 8 piksel olan, 150 piksele kadar ölçeklenmiş bir model dosyasını göstermektedir.

Pirinç. 10.10. Büyütülmüş Resim

Tarayıcılar, yeniden örnekleme için iki algoritma kullanır - bikübik (düz kenarlar ve yumuşak bir ton renk aralığı verir) ve en yakın noktalar (orijinal renk kümesini ve keskin kenarları korur). Tarayıcıların yeni sürümleri çift kübik bir algoritma kullanırken, eski tarayıcılar bunun tersine en yakın nokta algoritmasını kullanır.