Альтернативный взгляд на смайлы

Опубликовано 1 Апрель 2012 - 23:40 пользователем biv
:-):-(;-):'(
:-DX-(:-p:">
:-S8-)>:-DO:-)
[-(:-*:-&|-)
:->8-0:-|@}->--

Скорость загрузки страницы сайта - один из параметров, который не следует недооценивать. Во-первых, думая о продвижении своего сайта, Нужно учитывать, что эта скорость влияет на позицию его в поисковых системах (В частности google весьма лоялен). Соответственно, чем быстрее, тем лучше. И во-вторых, не стоит забывать, что сайты предназначены в первую очередь для людей. Конечно, если предлагаемая информация настолько уникальна, что пользователям будет не лень дожидаться загрузки, то скорость загрузки не столь уж и принципиальна (Хотя если страница очень-очень не расторопна то в любом случае её ждёт не минуемое Ctrl+W). Но когда подобных сайтов тьма тьмущая, то большинству гораздо проще зайти и прочитать то, что ему нужно без излишнего ожидания. Поэтому оптимизация сайта обязательно должна включать ускорение страницы. Однако на эту тему существует довольно статей, но многие из них опускают тот факт, что есть еще контент создаваемый пользователями, которые что комментируют, общаются на форумах оставляя бесчисленное количество смайликов. О них и речь.

В среднем набор смайликом состоим где-то из двадцати штук, т.е. если на странице образуется весь набор, то произойдет 20 запросов к серверу. И проблема не столько в размере сколько в количестве этих самых запросов.

Дабы сократить таковые я решил использовать технологию css -sprite. Её суть заключается в объединение нескольких изображений в одно и с помощью стилей вызывать определенный кусок результирующего изображения дав координаты и размеры. (подробнее здесь, может пригодится вот этот инструмент)

Следующим шагом было позаботься о том, что бы даже с отключенными картинками отображались псевдографические смайлики. Помог атрибут тега img - alt.

В итоге результат выглядит вот так:

  1. <img class="s-smile" title=":-) Улыбка" src="/emot.gif" alt=":-)" border="0">

Отображение смайла на странице. (emot.gif в данном случае пустая прозрачная картинка с нужными размерами)

  1. img.s-angel{background-position:0 0;}
  2. img.s-angry{background-position:0 -33px;}
  3. img.s-badsmile{background-position:0 -66px;}
  4. img.s-blush{background-position:0 -99px;}
  5. img.s-confused{background-position:0 -132px;}
  6. img.s-cool{background-position:0 -165px;}
  7. img.s-crying{background-position:0 -198px;}
  8. img.s-devilish{background-position:0 -231px;}
  9. img.s-grin{background-position:0 -264px;}
  10. img.s-hmm{background-position:0 -297px;}
  11. img.s-kiss{background-position:0 -330px;}
  12. img.s-plain{background-position:0 -363px;}
  13. img.s-sad{background-position:0 -396px;}
  14. img.s-sick{background-position:0 -429px;}
  15. img.s-sleepin{background-position:0 -462px;}
  16. img.s-smile{background-position:0 -495px;}
  17. img.s-surprise{background-position:0 -528px;}
  18. img.s-tongue{background-position:0 -561px;}
  19. img.s-wink{background-position:0 -594px;}
  20. img.s-rose{background-position:0 -627px;}
  21.  
  22. .s-angel,.s-angry,.s-badsmile,.s-blush,
  23. .s-confused,.s-cool,.s-crying,.s-devilish,
  24. .s-grin,.s-hmm,.s-kiss,.s-plain,
  25. .s-sad,.s-sick,.s-sleepin,.s-smile,
  26. .s-surprise,.s-tongue,.s-wink,.s-rose
  27. {
  28.   background: url("smile.png") no-repeat top left;
  29. }

Плюс данного метода не только в ускорении загрузки, но и в возможности менять смайлы в связи с изменившимся дизайном без лишних телодвижений.

Минус в нереальности (на мой взгляд) анимации.