Astăzi vă voi spune cât de repede puteți optimiza imaginile site-ului dvs. pentru afișarea de înaltă calitate pe afișajele Retina utilizate pe noile MacBooks, iMacs, iPhones, iPads etc. Ca de obicei, înainte de asta este un pic de teorie și sfatul meu practic.
Să începem cu definiția:
Retina (din Retina Latină -. Retina) - comune de marketing afișează numele LCD folosite în dispozitivele Apple, și densitatea pixelilor este diferită atât de mare încât ochiul uman nu este în măsură să observați că imaginea este una dintre ele.
Poate că, pe această parte teoretică este terminată. Cui îi pasă de dispozitivul de afișare a retinei, se pot găsi cu ușurință informații mai profunde despre resursele specializate.
Deci, probabil ați observat că partea de retină din grafica celor mai multe site-uri sa răspândit. Mai corect, nu pare foarte clar în comparație cu alte elemente ale interfeței. Ce se poate vedea chiar și cu ochiul liber. Nu este greu de înțeles - graficele raster plutesc. Cu vectorul totul este bine, se măsoară perfect la orice rezoluție și cu orice densitate pixel. Există o serie de modalități de combatere a acestei probleme, au fost dezvoltate întregi biblioteci, cu care vă puteți adapta pe deplin site-ul dvs. la Retina. Dar astăzi va fi un pic de altul.
În opinia mea, adaptarea unui raster nu este o abordare destul de sensibilă. Cred că de mult timp este timpul să scăpăm de ea în interfață și să transpunem complet elementele în grafice vectoriale. De exemplu, în SVG. În plus, utilizând noile stiluri CSS3, puteți scăpa de liniuțele raster în gradienți, umbre pe butoane și alte elemente ale interfeței. Odată popular la începutul secolului, icoanele bitmap au murit de mult și sunt folosite numai de către iubitorii înapoiați. Au fost înlocuite de același vector SVG și de biblioteca de icoane de fonturi atât de iubită de dezvoltatorii web. Veți fi surprins, dar interfața aproape a oricărui site poate fi eliminată de raster fără prea multă hassle. Acest lucru îl elimină permanent din cauza problemelor legate de afișarea pe afișaje de înaltă definiție.
Dacă nu puteți scăpa complet de raster, nu vă faceți griji! O pereche de imagini raster în interfața site-ului - nu este o problemă și nu o problemă. Vă voi spune cum să utilizați cu ușurință și corect mai multe linii de CSS pentru a vă adapta bitmap-ul pentru afișarea corectă pe ecranul retinei.
Fără a intra în detaliile situației, să luăm un exemplu simplu. Site-ul dvs. are un logo grafic complex, care este imposibil sau dificil de convertit în format vectorial. Să omitem întrebările logice: cum sa întâmplat că nu există logo-ul vectorului și ce fel de logo este care nu poate fi afișat în vector. Sarcina noastră este să facem afișarea siglei pe Retina clară, scăpând de săpun.
Trebuie doar să finalizăm solicitarea mass-media, astfel încât pentru afișajele cu un raport de pixeli fizici și CSS mai mari de 1,5, noua noastră imagine a fost încărcată logo2x.png
Acest lucru se face foarte simplu:
Nu uitați să setați dimensiunea fundalului la fel ca în cazul imaginii originale. În cazul nostru, 300x100 px.
<
?php include ($ _SERVER ["DOCUMENT_ROOT"]. "/ vstavki / blokvtext2.php"); ?>
Este clar că această metodă este utilă pentru un număr mic de imagini specifice. Dacă doriți să aveți suport pentru Retina, inclusiv în conținut, utilizați alte metode. Vom vorbi despre ele o altă dată.
Trimiteți-le prietenilor: