0

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

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

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

➤второто за позицията "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');

}

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

Изображение по подразбиране Изображение за позицията "hover"

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



Изображението по подразбиране, което потребителят вижда, е оранжевото изображение (в кода-файл 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;

}

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

само едно изображение


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




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


Продължение

Няма коментари :

Публикуване на коментар


Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита