Teknolojilerin gün geçtikçe gelişim göstermesi ile birlikte web tasarım çalışmaları ve bunun gibi çalışmaların da önemi gittikçe artmaktadır. Bu gibi bir durumda ise yapılan kodsal düzenlemelerin önemi çok büyük olmaktadır. Bilindiği üzere cep telefonu ekran teknolojileri de bir artış göstermektedir. Bu alanda javascriptlerde büyük bir önem teşkil etmektedir. Javascript bu alanda zengin kütüphaneleri ile kullanıcıları kaliteli öğeler sunmaktadır. Özellikle retina.js ile çok kaliteli bir kaliteli görüntüyü tetiklemek mümkün olmaktadır. Optimizasyon çok önemli olmaktadır ki örneğin telefon ekranı retina olsun web sitesi optimize değil ise kaliteli bir görüntü alınmayacaktır. Yapılacak olan kodsal eklentiler ile kaliteli görüntüye sahip olunabilir.
Retina görünümler daha kaliteli bir görüntü imkanı sunmaktadır. Özellikle iphoneler de bu tasarımları görebiliriz. Retina ekranlar ile çok kaliteli görsellere sahip olunabiliyor. Fakat bunun içinde web sitesine retina.js adlı scriptti optimize etmek gerekmektedir. Yapılacak olan çalışma ile optimizasyon sürecini takip edebilirsiniz.
Html ve Css
Html ve css gibi öğelerden bu süreçte yardım alabilirsiniz. Bu süreçte en basitinden bir kod aşağıda verilmektedir. Örneğin 800×600 genişliğinde bir resim mobil tasarımlar 400×300 olmaktadır. Bunu da kod yapıları ile iyi bir şekilde optimize gerekmektedir.

Css’te ise bu iş classlar yöntemi ile yapılabilir. Resime ait özellikler tek bir çatı altında toplayıp istediğiniz resmi istediğiniz boyutlara getirebilirsiniz. Bu şekilde yapılan düzenleme daha hızlı ve daha verimli olacaktır.
.image{
background: url (myIMG@2x.png);
background-size: 300px 400px;
width: 300px;
height: 400px;
}
Javascript
Javascript ile de bu yapıları optimize edebilir. Mantık yine aynı olmaktadır fakat kodlar farklı olacaktır. Sonuçta her dilin kullandığı kodlar farklı olmaktadır. Yapı olarak birbirine benzemekte olsalar bile.

$(window).load(function() {
var images = $('img');
images.each(function() {
$(this).width($(this).width() / 2);
$(this).height($(this).height() / 2);
)};
)};
Medya Sorguları
Bunu yapmanın bir başka yolu aygıtı site retina donanımlı bir cihaz olup olmadığını görmek için kullanılan olmadığını dayalı görüntüleri verişi olduğunu bakmalısınız. Bu sayede görüntülerin iki takım iki kez boyutu düzenli görüntü ve bir olması sağlanır. Daha sonra bu retina display cihazı ise daha büyük görüntüyü kullanmak bu noktayı pin medya sorguları olarak kullanabilirsiniz.

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {

.image{
background: url (myIMG@2x.png);
}
}

Bu kod yapıları ile görüntüleriniz daha optimize bir hal alacaktır. Daha şık bir görsel için ve sitenizin de daha iyi bir kullanıcı kitlesi olması için bu optimizasyon çok önemlidir.