.

etiket Anlamı mutlak veya görüntüye göreli olan bir src dil özelliği vardır:

etiket için Mevcut mevcut özellikler:

Tablo 1. Etiket özellikleri

Bağlanmak	Açıklama, anlamı kabul et
alternatif	alt özelliği görsel için alternatif metin sağlar. Tıklamadan önce veya grafikleri açtığınızda görselin göründüğü noktada görüntüleneceği gibi, farenizi görselin üzerine getirdiğinizde de bir uyarı olarak görüntülenecektir. Sözdizimi: alt = "(! LANG: resim açıklaması" . !}!}
çapraz köken	Crossorigin özelliği, CORS isteklerini kullanarak başka bir alandaki kaynaklardan görselleri içe aktarmanıza olanak tanır. CORS istekleri kullanılarak tuvale aktarılan görseller yeniden ziyaret edilebilir. Kabul edilebilir değerler: anonim - Çapraz Kökeni, hiçbir verinin aktarılmayacağı ek bir HTTP başlığı izleyecektir. Sunucu, içeriğin alındığı sunucunun bulut verilerini sağlamıyorsa görseller sıkıştırılacak ve içerik çerçevelenecektir. use-credentials - Çapraz kaynak, bulut verilerinin aktarılmasını gerektirir. Sözdizimi: crossorigin = "anonim".
yükseklik	Height özelliği görüntünün yüksekliğini px cinsinden belirtir. Sözdizimi: yükseklik = "300".
ismap	ismap özelliği, görüntünün sunucuda oluşturulan bir görüntü haritasının parçası olduğunu belirtir (image-map - etkileşimli alanlara sahip görüntüler). Bir görüntü haritasına basıldığında koordinatlar bir URL ile birlikte sunucuya iletilir. ismap niteliğine yalnızca öğe şu durumlarda izin verilir: є eleman üzerinde etkin bir href özelliği ile. Söz dizimi: ismap.
uzun tanım	Alt özelliğini tamamlayan görselin genişletilmiş açıklamasının URL'si. Söz dizimi: longdesc = "http://www.example.com/description.txt".
kaynak	Src özelliği görüntünün yolunu belirtir. Sözdizimi: src = "çiçek.jpg".
boyutlar	Görüntü ayarlarında görüntünün boyutunu ayarlar. Yalnızca srcset niteliği belirtildiğinde çalışır. Özellik değerlerinin virgülle atanan bir veya daha fazla satırı vardır.
kaynak seti	Ekranda görüntülenmesine izin verilmeyen görüntüler için seçeneklerin bir listesini oluşturur. Tek seferde kullanabilir veya src niteliğini değiştirebilirsiniz. Öznitelik değerlerinde birer satırla ayrılmış bir veya daha fazla satır bulunur.
kullanım haritası	Usemap özelliği, görüntü haritası alanındaki görüntüleri ifade eder. Obov'yazkovo değeri # sembolüyle başlayabilir. Değerler, name özelliğinin değerleriyle veya etiketin kimliğiyle ilişkilendirilir
Genişlik	Widget özelliği görüntünün genişliğini px cinsinden belirtir. Sözdizimi: genişlik = "500".

1.1. Resim adresleri

Resim adresleri tam olarak (mutlak URL) belirtilebilir, örneğin:
URL'si (http://anysite.ru/images/anyphoto.png)

Veya su yolundan belge ya da başka kök diziniİnternet sitesi:
url (../ resimler / anyphoto.png) - belgenin ana yolu,
url (/images/anyphoto.png) - kök dizine giden ana yol.

Bu, yaklaşan siparişle yorumlanır:
../ - tepeden bir seviye yukarıya, kök dizine gitmek anlamına gelir,
resimler / - resimlerin bulunduğu klasöre gidin,
anyphoto.png - bir resim dosyasını belirtir.

1.2. Görüntü boyutu

Boyut belirtilmeden bebek resimleri sayfada gerçek boyutta görüntülenir. Genişlik ve yükseklik ek niteliklerini kullanarak görüntünün boyutunu ayarlayabilirsiniz. Niteliklerden yalnızca biri sağlanırsa, bebeğin oranını korumak için diğeri otomatik olarak hesaplanacaktır.

1.3. Grafik dosya formatları

JPEG formatı (Birleşmiş Fotoğraf Uzmanları Grubu). JPEG görüntüler fotoğraflar için idealdir ve milyonlarca farklı görüntü içerebilir. Sıkıştırılan görseller GIF'lerden daha küçüktür ancak güçlü bir renge sahip metin ve geniş alanlar alevlerle kaplanabilir.

GIF formatı (Grafik Değişim Formatı). Logolar gibi güçlü renklere sahip alanlardaki görüntüleri kabartmak için idealdir. GIF dosyaları renklerden birini ayarlamanıza olanak tanır, böylece web sayfasının arka planı görüntünün bir bölümünde görünebilir. GIF dosyaları ayrıca basit animasyonlar da içerebilir. GIF görselleri yalnızca 256 görsel içeriyor, bu da görsellerin düz görünmesine ve ağlamak gibi gerçekçi olmayan bir renge sahip olmasına neden oluyor.

PNG formatı (Taşınabilir Ağ Grafikleri). GIF ve JPEG formatlarındaki güzel resimleri içerir. Mevcut 256 renk vardır ve size şeffaf olacak renklerden birini oluşturma yeteneği verir; bu, görüntüyü daha küçük bir boyuta, daha küçük bir GIF dosyasına sıkıştırır.

APNG biçimi (Animasyonlu Taşınabilir Ağ Grafikleri). Resim formatı PNG formatına dayanmaktadır. Animasyonu kaydetmenize ve ayrıca netliği artırmanıza olanak tanır.

SVG biçimi (Ölçeklendirilebilir Vektör Grafiği). SVG-küçük olanlar XML formatında tanımlanan bir dizi geometrik şekilden oluşur: çizgi, elips, zengin kesim vb. Hem statik hem de animasyonlu grafikler desteklenir. İşlev seti çeşitli dönüşümleri, alfa maskelerini, filtre efektlerini ve şablonları değiştirme yeteneğini içerir. SVG formatındaki görseller parlaklık azaltılmadan yeniden boyutlandırılabilir.

BMP formatı (Bitmap Resmi). Şablonu piksellerden oluşan dikdörtgen bir ızgara olan, bozulmamış (orijinal) bir raster görüntüdür. Bitmap dosyası bir başlık, palet ve grafik verisinden oluşur. Başlık, grafik görüntüsü ve dosyalar hakkındaki bilgileri (piksel derinliği, yüksekliği, genişliği ve piksel sayısı) saklar. Palet yalnızca palet görüntüleri (8 veya daha az bit) içeren ve 256'dan fazla öğe içermeyen Bitmap dosyalarında gösterilir. Grafik verileri resmin kendisini temsil eder. Bu formattaki renk derinliği piksel başına 1, 2, 4, 8, 16, 24, 32, 48 bit olabilir.

ICO biçimi (Windows simgesi). Microsoft Windows'ta dosya simgelerini kaydetme biçimi. Ayrıca Windows simgesi internetteki web sitelerinde simge olarak kullanılmaktadır. Bu formattaki görüntünün kendisi sitenin adresiyle veya tarayıcıda yer imi olarak görüntülenir. Bir ICO dosyası bir veya daha fazla simge içerebilir; her simgenin boyutu ve rengi ayrı ayrı ayarlanır. Simgenin boyutu istediğiniz gibi olabilir ancak kenarları 16, 32 ve 48 piksel olan kare simgeleri seçebilirsiniz.

2. Etiket

etiket

Erişilebilirlik etiketi için name özelliği haritanın adını belirtir. Etiketin name özelliğinin değeri

eleman

3. Etiket

etiket istemci tarafında görüntülenen kart depolama alanında yalnızca bir aktif alanı tanımlar. Öğe etiketi kapsamıyor. Bir aktif alan diğeriyle örtüşüyorsa alanlar listesindeki ilk sıra uygulanacaktır.

Tablo 2. Etiket özellikleri

Bağlanmak	Kısa Açıklama
alternatif	Haritanın aktif alanı için alternatif metni ayarlar.
koordinatlar	Alanın ekrandaki konumunu belirtir. Koordinatlar dovzhiny birimlerinde belirtilir ve virgüllerle ayrılır: İçin Kola- kazık merkezinin ve yarıçapının koordinatları; İçin ortokütanöz- sol üst ve sağ alt köşelerin koordinatları; İçin kekik- origami köşelerinin koordinatları gerekli sırayla, şeklin mantıksal olarak tamamlanması için ilk koordinatlara eşit kalan koordinatların da belirtilmesi önerilir.
indirmek	href niteliğinin eklenmesi, tarayıcıya, örneğin önce kaynağı açmak (bir PDF dosyası gibi) yerine, kullanıcı isteği tıkladığında kaynağın tıklanacağını bildirir. Bir öznitelik için bir ad belirleyerek, yakalanan nesnenin adını da belirleriz. Bir niteliğin değerini eklemeden değiştirilmesine izin verilir.
href	Gönderilecek URL'yi belirtin. Mutlak veya belirli bir adres belirtilebilir.
hreflang	Bağlantılı web belgesinin dili anlamına gelir. Vikorist yalnızca href özelliğiyle çalışır. Kabul edilen anlamlar, dil kodunu temsil eden bir çift harften oluşan kısaltmadır.
medya	Bu, dosyanın belirli cihaz türleri için optimize edileceği anlamına gelir. Herhangi bir medya talebi önemli olabilir.
göreceli	Href özelliği, geçerli ve bağlantılı belge arasındaki bilgilerle desteklenir. Kabul edilen değerler: alternatif - belgenin alternatif bir sürümüne gönderilir (örneğin, farklı bir yan form, çeviri veya ayna). yazar - belgenin yazarı hakkında mesaj. yer imi - yer imleri için kullanılacak kalıcı URL. yardım - takip için gönderildi. lisans - bu web belgesinin telif hakkı bilgileri hakkında bir mesaj. sonraki / önceki - bitişik URL'ler arasındaki bağlantıları gösterir. Bu Google analizinden, bu sayfaların değiştirilmesinin mantıksal bir sırayla bağlantılı olduğunu görebilirsiniz. nofollow - ses sisteminin bu sayfadaki veya belirli mesajlara ilişkin mesajları takip etmesini engeller. noreferrer - tarayıcının, ziyaretçilerin siteye sayfanın hangi tarafından başvurduğuna ilişkin bilgileri kaydeden HTTP isteğine (Yönlendiren) bir başlık göndermesinin gerekli olmadığını belirtir. prefetch - arka plandaki tarayıcının sayfaları önbelleğine aktarabilmesi için belgenin tamamının önbelleğe alınması gerektiğini belirtir. arama - hedef belgenin bir arama aracı olarak kullanılması gerektiğini belirtir. etiketi - akış belgesi için bir anahtar kelime belirtir.
şekil	Haritadaki aktif alanın şeklini ve koordinatlarını ayarlar. Aşağıdaki anlamları alabilirsiniz: düz - dikdörtgen şekilli alan aktiftir; daire - kazık şeklindeki aktif alan; zengin bir pirzola şeklinde poli-aktif alan; varsayılan - etkin alan görüntü alanının tamamını kaplar.
hedef	Belge gönderildiğinde nereye gönderileceğini belirtir. Aşağıdaki değerleri üretir: _self - taraf tam pencerede görüntülenecektir; _blank - sayfa yeni bir tarayıcı penceresinde açılır; _parent - taraf, çerçeve babası tarafından beğenilecek; _top - taraf tarayıcı penceresinin dışında görünecektir.
tip	Gönderilen dosyanın MIME türünü ve ardından dosya uzantısını belirtir.

4. Resim-görüntü katlamanın ucu

1) Çıktı görüntüsü gerekli formun aktif alanına işaretlenir. Alanların koordinatları, fotoğrafların işlenmesi için ek programlar kullanılarak hesaplanabilir, örneğin, Adobe Photoshop ya da başka Boyamak.

Küçük

1. Kart oluşturmak için resim işaretleme ucu

name özelliği hakkında daha fazla bilgi için. Bu değer, etiketin usemap özelliğine atanır." width="680" height="383" usemap="#flowers"> !} !}
Lale

Küçük

2. Oluşturulan bir görüntü kartı örneği, kartın üzerinde fare imlecine bastığınızda açıklama içeren sayfaya gideceksiniz

İnternette kabul edilen çok çeşitli format ve protokollerde gezinmek ve İnternet'i kullanmak için, özel amaçlarınıza en uygun olanları seçmeniz gerekir. Bazı formatlar bir tarayıcıya özel olabilirken bazıları özel bir harici modül gerektirebilir. Çok çeşitli formatlar arasından yalnızca popüler sitelerin yazarları tarafından en çok tercih edilen ve gazeteciler tarafından kabul edilenleri seçtik.

GIF ve JPEG, uzun süredir WWW'deki içerik için fiili standartlar haline gelen en popüler iki grafik formatıdır. Bunlar evrenseldir, çoğu tarayıcı tarafından okunabilir ve özel yazılım (veya ek modüller) gerektirmezler. GIF ve JPEG, taramalı görüntü formatlarıdır; bu, bu tür görüntüler ekranda görüntülendiğinde açıkça sabit bir format (izin verilen) anlamına gelir. Ölçeklendirmeyi denediğinizde (bazı tarayıcılarda iletilir), raster (piksel) görüntülerin boyutu önemli ölçüde küçülür. 8 bitlik (256 renkli) GIF formatı için ayrıca renk paleti seçimi de ciddi bir sorundur.

Vektör grafik formatları Merezhi'deki araştırmalar için çok daha kullanışlıdır. Noktalı şekiller biçimindeki vektör grafikler matematiksel (geometrik) verilere dayanmaktadır. Bu tür görüntülerin kaydedilmesi/aktarılması önemli ölçüde daha ucuzdur, ölçeklendirilmesi kolaydır ve herhangi bir değişiklik durumunda neredeyse hiç yer kaybetmez. Ne yazık ki, vektör formatları internette hala çok az kullanılıyor, ancak standartlar zaten oluşturulmuş durumda ve tasarımcılara engel olabilir.

Yakın zamanda bir dizi vektör standardı güncellendi ve PGML ve VML formatları şu anda W3C (World Wide Web Konsorsiyumu) ​​tarafından inceleniyor. Ancak, VML satan şirket Macromedia, Shockwave Flash vektör formatını uzun süredir diğer satıcılara yayınladı ve popüler tarayıcılar için grafikleri bu formatta görüntülemek için eklenti modülleri uyguladı.

Ancak yeni özellikler herkese göre değil; daha güzeller. İnternette yayınlanan en yaygın görseller, elde edilmesi zor olan ve tamamen vektör formatına aktarılamayan dijital fotoğraflar, küçük görseller ve taranmış görsellerdir.

Format seçimi sonuçta hedeflerinize dayalı olacaktır ve görsellerin kendisi hedef kitlenizi daha iyi temsil eder.

GIF - tasarım formatı

CompuServe başlangıçta kişisel bilgisayardaki standart grafiklerin özelliklerini bir araya getirecek şekilde etkileşimli uygulamalar için GIF formatını benimsemiştir. Bu, 4 ile başlar ve ardından maksimum 256 rengi destekleyen, belirtilen renk paletine dayalı 8 bitlik tarama formatıyla başlar. Formatın ana avantajlarından biri, görüntülerin belirli bir palete (renk kümesi) endekslenebilmesi, JPEG görüntülerin ise bir palete "bağlanamaması" ve bunların "doğru" görüntülenmesinin hiçbir zaman mümkün olmamasıdır. Bu değer, renk şemasına bakılmaksızın tüm platformlar (PC, Mac, Web-TV veya diğerleri) için görüntü aktarımını optimize etmek amacıyla palet indekslemeyi kullanan geliştiriciler için özellikle önemlidir. Aynı sistemdir. Bu çok yönlülük, hem Windows'ta hem de örneğin MacOS'ta kullanılan tüm ortak renkleri içeren 216 renkten oluşan bir palet aracılığıyla elde edilir. Bir sitenin evrensel bir palette tasarlanması, aşırı tasarım yapılmamasını, platformlar arası olmayı garanti eder ve telif hakkıyla korunan görüntülerin etkisi altına girmez. Buna ek olarak, GIF formatı israfsız bir sıkıştırma şeması kullanır (basit bir tekrarlı kodlama algoritmasıyla: bir renkteki bir bayt dizisi, biri kodlamanın karakterini temsil eden, diğeri ise iki baytlık bir sözcükle değiştirilir). tekrar sayısı Evet), dolayısıyla bu formattaki grafik veriler sıkıştırma ve güncelleme sürecinde bilgi israfına neden olmaz.

Bununla birlikte, bu tür kullanılan renk sınırları nedeniyle, GIF formatı yalnızca siyah beyaz şemalar gibi çok sayıda renk içerebilen sessiz görüntüler veya karikatürler gibi tek rengin geniş alanlarını kapsayan sessiz görüntüler için kullanılabilir. Tek renkli dolgulu diğer çerçeveler veya dijital resimler. Elbette, renk tonlarının yumuşatılması (titreme) adı verilen işlemde sıkışıp kalan görüntüleri GIF formatında kaydedebilir ve böylece makul miktarda parlaklık ekleyebilirsiniz, aksi takdirde yukarıdakilerden sonra büyük boyutlu bir değer dosyasıyla "karşılaşma" riskiyle karşı karşıya kalırsınız. açıklanan sıkıştırma hafızaya alınan tekrarlardan donduruldu (ek olarak, sürekli bir tekrarın varlığının görüntüsü olduğundan, dosyada sıkıştırılmamış orijinalin tam iki katı kadar bir artış elde edersiniz).

Bu nedenle, GIF formatının temel avantajları, israf olmadan hızlı sıkıştırma ve net sınırlar ve katı renk geçişleri ile önemli renk alanlarından ekonomik olarak tasarruf edilmesidir. JPEG formatı, belirli bir düzeyde sıkıştırma olduğunda, önemli alanların bozulması ve keskin geçişlerin yumuşatılması veya bulanıklaştırılmasıyla açıklanandan farklıdır.

GIF formatını seçmenin ana kriteri: Photoshop veya Painter gibi tek renkli geniş alanlara sahip bir grafik paketinde kendiniz bir resim çizdiyseniz veya orijinal görüntüyü işlediyseniz ve yüksek kontrastı korumak istiyorsanız (gerekli) örneğin, metni görüntülerken), ardından kendinizi Hangi formatta kaydetmeye çalışın (öncelikle siyah beyaz veya açık renkli bebeklere ihtiyaç vardır).

Çeşitli yumuşak renk geçişlerine (gradyanlara) sahip fotoğraflar, video çerçeveleri veya diğer çok renkli görüntüler için JPEG formatını kullanın.

Şunu unutmamak gerekir ki, görüntüleri sürekli tonda GIF formatında kaydetmeye çalışıyorsanız, o zaman görüntüyü hazırlama sürecinde (sabit palete dönüştürürken) muhtemelen birçok bilgiyle karşılaşacaksınız ve sıkıştırma yöntemi GIF'te o kadar etkisiz görünecek ki, yine de mali açıdan kaybedeceksiniz (hem işçilik, hem maliyet hem de dosya açısından).

Ek olarak, GIF formatında, büyük kanallara sahip kullanıcıların görüntünün yer değiştirmesini en başta değerlendirmesine yardımcı olan (odak dışı bir görüntünün artan bulanıklığına benzer bir etki) Taramalı olarak aktarılır ve yeniden iletim için gereken saat, sonuç olarak almaya devam etmeniz gerektiğine dair bir karardır, yoksa daha iyi bir şey göreceksiniz. Ancak, aşamalı JPEG'in aksine, buradaki etki gerçek olmaktan çok psikolojiktir (böl. Şek.).

Ayrıca, GIF formatının önemli bir avantajını da unutmayın; bu olmadan, bazı durumlarda tüm eksikliklerle başa çıkmak imkansızdır - bu, silüetlerin dikdörtgen konturlarla aynı anda görüntülenmesini mümkün kılan netlik desteğidir (GIF89a'nın uzantısı). gerçek yaprak bitine gelince. GIF formatındaki görünürlük ilkel olarak uygulanır - bir renk (yani arka plan rengi) şeffaf olarak kabul edilir. Bu avantaj genellikle sayfa tasarlarken butonlar ve simgeler açıldığında vurgulanır (JPEG netlik konusunda herhangi bir destek sağlamaz).

Sonuç olarak, artık şunu söyleyebiliriz: GIF, temel donanım ve yazılım ile 8 bitlik bir GIF görüntüsünü 216 evrensel renge kadar dizine ekleme yeteneği arasında etkili bir uzlaşma sağlamak için en iyi seçimdir. farklı tarayıcılarda ve bilinmeyen platformlarda görüntülenebilir.

JPEG - fotoğraflar ve video çerçeveleri için format

JPEG formatı, adını 80'lerin sonu ve 90'ların başında bu standardı oluşturan Joint Photographic Experts Group komitesinin kısaltmasından alır. JPEG formatı, görüntünüzün alanlara bölündüğü (8-8 piksel kareleri temsil eden) bir maliyet sıkıştırma algoritmasına (ayrık kosinüs distorsiyonu) dayanmaktadır ve bunların ortasında parçaların bölümlerinin yerini matematiksel bir fonksiyon alır. yalnızca bu fonksiyonun görünümünü yenilemenize izin veren katsayılarını korur. Doğal olarak, bir miktar yer israfıyla karşılaşacaksınız (görüntüyü değiştirmek için kullanılan işlevin karmaşıklığı nedeniyle) ve güncellemeden sonra artık gerçek resmi değil, onun matematiksel "vekilini" çekeceksiniz. Ancak orijinalinizin kalitesine ve sıkıştırma seviyesine bağlı olarak güç kaybı gözler için tamamen anlaşılmaz olabilir. JPEG formatının GIF'e kıyasla ana avantajı, GIF'in yalnızca 8 bit (256 renk) olmasına rağmen JPEG'in 24 bit olması ve 16,7 milyona kadar renk görüntüleyebilmesidir.

Bu nedenle, yüksek renkli bir JPEG elbette GIF'ten daha az miktarda video bilgisini temsil eder. Bu format, gerçek hayattaki taranmış resimler veya dijital fotoğrafların yanı sıra dijitalleştirilmiş video çerçeveleri veya önemsiz bilgisayar grafiklerinin işlenmiş sahnelerini tasvir etmek için en uygunudur.

JPEG'in bir başka avantajı da anındadır: GIF girişi, çıktı görüntüsüne ayarlanacak sıkıştırma düzeyini bağımsız olarak ayarlamanıza olanak tanır, bu da huzur ve neşe renkleri arasında gerekli dengeyi elde etmeyi mümkün kılar.

Sıkıştırma oranları JPEG için geniş bir aralıkta değişiklik gösterir - kullanılan görüntü düzenleme programına bağlı olarak, Web sitelerinde oran 10: 1 veya 20: 1 olacaktır (çıkış görüntüsüne göre toplamla orantılı olarak ifade edilir). hoş bir parlaklık sağlayacaktır. Görüntü sıkıştırmasını 100: 1 gibi aşırı değerlere kadar (tabii ki önemli bir parlaklık kaybıyla) koruyabilirsiniz.

Ayrıca, JPEG formatında bir fotoğrafla çalışırken, 16,7 milyon renkten 24 bit görüntüler kaydedebilirsiniz ve sıkıştırıldığında parlaklık kaybına bakılmaksızın, 256 renkli GIF'in altında orijinaline karşılık gelen çok daha fazlası vardır. tezahürü. Bu durumda çıktı görüntüsünün boyutuna, gücüne ve türüne bağlı olarak güç kaybı kaçınılmazdır.

Ek olarak, JPEG, sözde aşamalı görüntüleri görüntülemenize olanak tanır, böylece ekrana odaklandığınızda, dünya ek bilgileri kaldırdıkça "kaba" bir resim görünür, yavaş yavaş kaybolur ( bununla gerekli ifadeleri reddedebilirsiniz) İşlemenin tamamlanmasından önce telaffuz materyalinin özü hakkında bilgi verin ve süreci herhangi bir aşamada kesintiye uğratın; bu, ara içeriğin incelenmesinden bir saat önemli ölçüde tasarruf sağlayacaktır).

Yapabileceğiniz şey kanalın önemine dikkat etmektir ve benzer bir adım, kanal takıntısıyla mücadelede çok yardımcı olabilir. Aşamalı JPEG ile ilgili bir sorun (titreşimli GIF'in aksine), tarayıcıların eski sürümlerinin bunu desteklemeyebilmesidir.

PNG - evrensel raster yeni ürün

Yeni nesil raster formatları PNG'nin bir temsilcisi, hem JPEG hem de GIF'ten en iyi gücü alarak ve görüntüyü göndermeye kendi benzersiz yaklaşımını ekleyerek, aynı görüntünün farklı sürümlerinden oluşan bir dosyaya düşük maliyetle dahil edilmesini sağlar. orta ve yüksek çözünürlük.

PNG (Taşınabilir Ağ Grafikleri) formatı, W3C konsorsiyumu tarafından standart olarak övülen ve yavaş yavaş "eski" formatların (hem GIF hem de JPEG) yerini alan tamamen yeni bir raster grafik formatıdır. PNG, renk indeksleme (256 renge kadar), hem 24 hem de 48 bit renk desteği (Gerçek Renk) sunar ve bir şeffaflık kanalıyla (alfa kanalı) çalışır ve ayrıca geleneksel formatlardan önemli ölçüde daha etkilidir. .

Tam renkli görüntülere yönelik sıkıştırma algoritması piksel başına JPEG'i dönüştürür ve kenarlıklı indekslenmiş palet (256 renge kadar) yardımıyla yeni format, GIF'te uygulanandan %10-30 daha hızlı, ücretsiz sıkıştırma sunar. Her türlü durumda Wikoristan için ideal hale getiren formatlar. Ne yazık ki yeni format, JPEG formatında olduğu gibi daha yüksek düzeyde sıkıştırma karşılığında görüntü canlılığından ödün vermenize izin vermiyor.

VIDMINA VID GIF formatında PNG formatında PIDRIMMA PROZOSTISTIS bir ponocinna'dır, Tobto abo cordon'un il zytroznnya'sı tarafından görülebilir, bu “saf” cordonov sorunudur, dolayısıyla GIF dosyalarındaki vicoristan'da viriyshu'dur, var kolayca peregon.

Bununla birlikte, PNG'de sunulan tüm iyileştirmelerden bağımsız olarak, yeni format ancak web sitesi tasarımcıları ve yazılım geliştiricileri görüntüleri görselleştirme için yeni formatta görüntüleyebildikten ve yayına hazır hale getirdikten sonra "yaşayacaktır". Bu arada, hem Netscape Navigator'da hem de Microsoft Internet Explorer'da yakın zamanda bu format için destek eklenmesine rağmen, İnternette PNG görselleri bulmak önemlidir.

Geriye kalan sürümlerinin PNG'yi desteklemesini istiyorsanız bunu farklı bir şekilde yapmalısınız. Şu anda, tam PNG dosyasını indirmek isteyen geliştiriciler için tek çözüm, harici bir modülü (PNG Live'a benzer) bağımsız olarak kurmaktır.

Belki dağıtımcılar isteklidirler ve gazetecilerin kalıcı olarak yeni formatlara geçiş yapmalarını beklemektedir. Sağlıklı muhafazakarlık hiçbir şekilde aşılanmaz, ancak yine de GIF formatını değiştirerek adım adım PNG'ye geçmenizi şiddetle tavsiye ederiz.

vektör vadesi gelmedi

JPEG, GIF ve PNG, ayrık (piksel veya nokta) görüntü verilerine dayanan raster formatlardır; vektör formatları ise matematiksel formüllere (geometrik şekil verileri) dayanmaktadır. Vektör grafikler, özellikle diyagramlar, metinler ve ticari grafikler söz konusu olduğunda raster grafiklere kıyasla önemli avantajlar sağlar (ve formatların maliyet etkinliği İnternet için büyük önem taşır).

Bununla birlikte, ilk avantaj, vektör görüntülerinin boyutunun noktalı olanlara kıyasla önemli ölçüde daha küçük olmasıdır, böylece açıklanan görüntünün her bir pikseli değil, tüm şeklidir (örneğin, bir daire tanımlamak için 3-4 sayıyı iletmek için gereklidir: yarıçap, koordinatlar ve merkez i, belki tür veya çizgi türü ve nitelikleri). Vektör verilerini tanımlayan matematiksel formüller, tek tek piksellerden ve bunların niteliklerinden çok daha az yer kaplar.

Vektör olgusunun bir diğer önemli avantajı, görüntünün ayrıntısında veya netliğinde herhangi bir kayıp olmaksızın, görüntünün pratik olarak sınırsız bir ölçeklendirmesini (veya parçalarının detaylandırılmasını) oluşturma yeteneğidir. Vektör gösterimini diğer herhangi bir palete, platforma veya tasarım özelliğine uyarlamak için hiçbir çabaya gerek yoktur; ve sıkıştırma ve titreşim şemalarının kullanımı sorunsuz bir şekilde gerçekleştirilebilir.

Ancak her taramalı görüntü vektör biçimine dönüştürülemez (örneğin, fotoğraflar, taranmış görüntüler veya taramalı görüntüler vektörleştirmeye pek uygun değildir). Özel olarak hazırlanmış vektör grafikleri (tarihsel olarak vektör olan çizgi grafikler, piktogramlar, teknik resimler, haritalar, bilgi grafikleri ve diğerleri gibi) bugün her yerde bulunan İnternette yayınlanmak üzere basitçe raster biçimine dönüştürülmedikçe.

World Merezh'de vektör grafiklerinin görüntülenmesiyle ilgili sorunlar, kayıt dışında başka görüntüleme yolunun olmaması ve dosyaları PDF formatında görüntülemek için bir modülün sağlanmaması nedeniyle ortaya çıktı. Çalışma esnekliği ve tüm içeriği kaydetme yeteneği. tek form - PDF.

Vektör grafiklerini herhangi bir ek yazılıma ihtiyaç duymadan geleneksel HTML formatına sorunsuz bir şekilde dönüştürme olasılığını sağlamak için şu anda W3C Standartları Komitesi tarafından incelenmekte olan iki yeni vektör standardı bulunmaktadır: PGML (Hassas Grafik İşaretleme Dili) ve VML (Vektör İşaretleme) Dil). PGML Adobe Systems, IBM, Netscape ve Sun Microsystems tarafından desteklenirken, VML Microsoft, Hewlett-Packard, Autodesk, Macromedia ve Visio tarafından desteklenmektedir. Bu iki standart, ileri XML biçimlendirmesini temel alır ve gelecekte yayınlanıncaya kadar HTML ve W3C önerileriyle tutarlı olacak şekilde tasarlanmıştır.

Ancak şu anda tarayıcılar herhangi bir vektör grafik standardını desteklememektedir, ancak ek modüller (Eklentiler) artık mevcut değildir. Günümüzde Web'de statik vektör görsellerini görüntülemenin en popüler yolları arasında Macromedia SWF (Shockwave Flash) formatını ve yeterince önemsenmeyen Xara Flare formatını görebilirsiniz.

Flare, boyutları Shockwave Flash'takiyle aynıyken, sayfadaki ayrıntı düzeyini pratik olarak anında artırmanıza olanak tanıyan vektör görüntülerinin dahil edilmesine olanak tanıyan harika bir çözümdür. Görüntülemek için ek modüller kurmanın artık kolay olmadığını söyleyemem ama sayfalarınızda bu tür özellikler kullanıyorsanız, ek modülü almadan önce muhasebecinize bilgi vermeyi unutmayın, ilk önce buna gideceksiniz Sayfada bu unsurları dahil edeceksiniz. Yakın gelecekte, yeni kullanıcılar için inceleme sürecini kolaylaştırmak önemlidir, aksi takdirde, tümü tarayıcının son sürümüne dahil edilene ve Vachkas eklenti modülüne dahil edilene kadar giderek daha fazla yeni kullanıcı ekleyeceksiniz. artık buna ihtiyacım yok.

Animasyon, etkileşim ve etkileşim

Nitekim GIF görüntüleri tek dosyada özel bir yığın halinde oluşturulabileceği gibi, basit bir raster animasyon oluşturularak flipbook'lar da oluşturulabilir. Hem Netscape hem de Microsoft, tarayıcılarının üçüncü sürümünden bu yana GIF formatının "beğenmeleri" için destek sağladılar, dolayısıyla bunların Web'deki varlıklarının ortadan kalkması artık önemli. Benzer GIF yığınları oluşturmanıza olanak tanıyan GIF animatörlerinin sayısı oldukça yaygındır (hem ticari hem de yasa dışı olarak mevcuttur). Bununla birlikte, GIF formatının "tercihi" sansürsüz dosya boyutlarına yol açabilir, çünkü böyle bir yığının "raventi" tek bir GIF görüntüsü değildir, dolayısıyla bilgisayar animasyonu için tipik olarak saniyede 15 kare, tanımlanamayan bir sayı "üretebilir". bir kilobayttır.

Java veya JavaScript ile birlikte kullanıcıya yanıt veren etkileşimli animasyonlar oluşturabilirsiniz.

Şimdi Web animasyonu ve bilgisayarla etkileşimli etkileşim için diğer çözümlere bakalım ve burada ana rol, Shockwave ve Flash programlarıyla uzun süredir pazara giren ve ürünlerini kesintisiz olarak geliştiren Macromedia tarafından oynanmaya devam ediyor. sanayici ve tasarımcıların girdileri doğrultusunda etkinliklerinin arttırılması.

Temel olarak, Macromedia Director için bir format olarak Shockwave, öncelikle internette kullanılmak üzere özel olarak oluşturulmuş, etkileşimli ve grafiksel bir alan yaratmayı amaçlayan bir protokol ailesidir. Shockwave Flash benzersiz bir araçtır ve animasyon oluşturmanın ve bunu bir Web sayfasında yayınlamanın en iyi yollarından biridir. Shockwave Flash çok küçük dosyalar oluşturur (vektör formatı önemli olduğundan) ve diğer formatlarla karşılaştırıldığında hazırlık açısından en uygun olanıdır.

Bu tür animasyonları sayfalarınızda yayınlarken, eklenti modülünü önceden stoklayabilmeniz ve uzun vadeli bir takıntıya hazırlanabilmeniz için tedarikçinizi bilgilendirmeyi unutmayın. Ancak geri kalan sürümlerde (hem Netscape Navigator hem de Internet Explorer) temel pakette Flash animasyonu için görüntüleme modülleri bulunur. Netscape, Navigator'ın gelecekteki sürümlerinin Flash için kod olarak aynı desteği sağlayacağını doğruladı.

Kararın geri kalanı size kalmış

Ayrıca Web içeriği gönderme ayarları da değişiyor, yeni veri formatları tanıtılıyor ve bunların geliştirme özellikleri destekleniyor. Ancak eski formatlar (grafikler için - GIF ve JPEG) hala daha popüler. Neredeyse tüm tarayıcılar tarafından desteklenirler ve çoğu tarayıcının çalışmalarına dair büyük kanıtlar vardır. Görüntü kalitesi ve dosya boyutları arasında tutarlılık sağlamak amacıyla belirli amaçlar için doğru formatın seçilmesi önemlidir. Örneğin, GIF formatındaki bir görsel, JPEG formatındaki bir görsele göre daha fazla yer kaplayabilir ve daha düşük net sonuç verebilir, ancak aksi takdirde her şey aynı olacaktır.

Bununla birlikte, taramalı görüntüler gönderirken PNG olduğu ortaya çıkıyor ve daha da ileri gidip vektör görüntüleri dönüştürmeye çalışırsanız, Macromedia'nın Shockwave Flash formatı hala kullanımınıza sunuluyor.

SWF (Shockwave Flash) formatı standart bir format değil, Macromedia'daki Flash programının dahili bir vektör formatıdır (CD-ROM'daki "Macromedia Flash Lessons" bölümü), dolayısıyla videodaki görüntüleri veya animasyonları yakalamak için, Macromedia şirketinden uygun bir multimedya paketi almanız gerekecek ve kullanıcıların sonucu görselleştirmek için ek bir modül yüklemeleri gerekecek. Bu nedenle, Web sayfanıza basitçe bir vektör bebeği yerleştirmek için bir dizi karmaşıklığın üstesinden gelmeniz gerekecektir.

Diğer vektör formatları da yolda ve yakında standart hale gelecek.

BilgisayarBasın 5 "1999

Çoğu Web sayfası daha hızlı grafiklere sahiptir. Vaughn, bilgileri hızlı ve resmi bir şekilde sunmanıza olanak tanır. Çoğu durumda, bir resim göstermek, hatta bir metin açıklaması vermek daha iyidir.

Grafik görsellerini sayfaya yerleştirmenin iki yolu vardır:

• rastgele resimler ekleme;
• arka planı bir resimle doldurmak.

Grafik görsele ihtiyaç varsa dosyayı alın.

Grafik ekleme

Bir grafik dosyasından bir grafik görüntüsünün yan tarafa eklenmesi, ek bir etiket kullanılarak gerçekleştirilir. (İngilizce, resim - resimler) Atanan adresten SRC öznitelik argümanındaki dosyaya:

< IMG SRC = "адрес_графического_файла" >

Grafik dosyasının adresleri - muhtemelen belirlenen yola göre URL'ye veya dosya adına. Örneğin, logotip.jpg grafik dosyasını görüntülemek için aşağıdaki etiketi yazın:

< IMG SRC = "logotip.jpg" >

Metindeki grafik görüntülerin aktarım hızını artırmak Grafik dosyasının adresine argüman olarak alınan LOWSRC niteliğini (eklenti parametresi) kullanabilirsiniz. İki grafik dosyası oluşturabilirsiniz: biri (örneğin, logotip.jpg dosyasını kullanın) yüksek çözünürlükte çekilmiş bir resim ve diğeri (örneğin, logotip.gif) düşük çözünürlükte çekilmiş bir resimdir. Todi etiketi:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

... tarayıcıya ilk olarak logotip.gif dosyasını yüklemesini söyleyin, ardından dünya bunu logotip.jpg dosyasıyla değiştirmeyi kabul edecektir.

Hızlı bir şekilde grafik eklemenin başka bir yolu da, grafik görüntüsünün yerleştirileceği dikdörtgen alanın boyutlarını ek niteliklerle ayarlamaktır. GENİŞLİK(Genişlik) i YÜKSEKLİK(Yükseklik), piksel cinsinden görüntülenir. Bu nitelikleri belirttiğinizde tarayıcı hemen grafiğin altındaki alanı görür, belge düzenini hazırlar, metni görüntüler ve ardından grafiği görüntüler. Tarayıcının görüntüleri sıkıştırdığını veya genişlettiğini, bunları belirlenen boyuttaki çerçevelere yerleştirdiğini lütfen unutmayın. Resim boyutları ekleme örneği:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Grafiklerin metinle birleştirilmesi gerekir, bu da metin ve grafik görüntüleri dengeleme görevini ortaya çıkarır. Bu değer ek öznitelik tarafından belirlenir HİZALAMA etiket Çeşitli argümanlara dayanmaktadır. Örneğin metnin resmin etrafında sağa veya sola doğru akmasına yardımcı olabiliriz. Resmin metnin hemen yanında göründüğünden emin olun, bu çirkin olabilir. Bunu benzersiz kılmak için illüstrasyonun yanında boş alanlar ayarlayabilirsiniz. Alanlar ek özelliklere göre oluşturulur VSPACEüst ve alt alanlar için ve UZAY bu bölgedeki atık alanları için . Bu niteliklerin argümanları, alanların boyutlarını piksel cinsinden gösteren sayılar biçiminde gösterilir. Metni grafiklerin etrafına sarmak için etiket kullanma
.

Yaklaşma etiketi, sağdaki logotip.jpg dosyasındaki grafiklerin sarılmasıyla ayarlanır (resim metnin yanında görünecektir):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Resmi sağ elle metne taşımanız gerekiyorsa, bu özelliğe ihtiyacınız vardır. HİZALAMA tartışma yapmak SAĞ:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Resmin yanındaki alanları ayarlamak için şöyle bir etiket yazmanız gerekir:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Burada 20 ve 10 sayıları alanların büyüklüğünü göstermektedir.

Kapsamlı bir grafik ve metin seçimi örneğine bir göz atalım. Not Defteri'ni (metin düzenleyicisi Not Defteri) Windows'u açın. Yenisinde seçilen etiketleri kullanarak HTML kodunu yazın. Aşağıda metin ve grafikleri görüntüleyen bir program bulunmaktadır. Bir grafik dosyası bağlamında sahip olduğunuz dosyalardan herhangi birini seçebilirsiniz. Logotip.gif dosyası burada vikorize edilir.

< HTML >

< HEAD >

< TITLE >Sağ 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >Metin sağ taraftaki grafiklerin etrafına sarılır< / H1 >

Küçük 657

. Metin sağdaki resmin çevresine sarılır Görüntülerin (ve diğer öğelerin) sayfa üzerinde hassas şekilde konumlandırılması için geniş olanaklarі tablolar stiller