Оптимизация. Да използваме едно изображение вместо две

Намерих в мрежата публикация, в която е описано как да използваме по-малко изображения в блога си. Този метод на оптимизация според мен е много оригинален и интересен, и искам да споделя информацията с читателите на моя блог. Не отричам, че има хора, които използват този метод от дълго време.
И ако вие, скъпи читатели, сте от тях, пропуснете този пост. Останалите нека прочетат и го използват.
И така...
За да получите ефекта от промяната на изображението при задържане на курсора върху него обикновено се използват две изображения:

➤едното за "по подразбиране";

➤второто за позицията "hover", когато курсорът се задържа върху изображението;

Независимо от това, има начин да се използва само едно изображение, което има своите предимства.
Ето как обикновено се осъществява този ефект.
HTML кодът може да изглежда по следния начин:

<a href="#" id=" my-button "></a> 

Съответните CSS стилове са следните:

a# my-button {

 width: 64px;

 height: 64px;

 background-image: url('my-button_bw.png');

 display: block;

 text-decoration: none;

}

a#my-button:hover {

 background-image: url('my-button_color.png');

}

Две отделни изображения за двете съответни състояния трябва да бъдат качени на сървъра и могат да изглеждат така например:

 

Крайният резултат е:



Изображението по подразбиране, което потребителят вижда, е оранжевото изображение (в кода-файл my-button_bw.png). Когато поставите курсора върху него, то се преобразува в синьо на my-button_color.png.

Въпреки това, когато потребителите за първи път посещават страница, на която се използва този ефект, синьото изображение не се кешира, и следователно може да бъде забелязано забавяне при превключване от оранжево към синьо изображение. Забавянето може да зависи от скоростта на интернет връзката и натоварването на сървъра.
Има няколко метода за зареждане на алтернативни изображения, с които да се избегне това неудобство. Но има и съвсем различен, не по-малко ефективен начин и той е изобщо да не използвате алтернативни изображения.

Можете да използвате едно единствено изображение, върху което се комбинират изображенията в двете състояния:

➤по подразбиране;

➤и когато задържите курсора на мишката върху него;

Как ще бъде реализирано

HTML кодът остава същият, само CSS се променя, като този път ще изглежда така:

a#my-button {

 width: 64px;

 height: 64px;

 background-image: url('my-button_bw_color.png');

 display: block;

 text-decoration: none;

}

a#my-button:hover {

 background-position: -64px 0;

}

Използва се само едно изображение:

Крайният резултат се получава, както следва:




По този начин използването на по-малко изображения може леко да ускори времето за зареждане на блога ви, като същевременно намали натоварването на сървъра. Друго по-малко значимо предимство е, че се нуждаете от по-малко на брой изображения, които да качите на сървъра.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:




Продължение