Кнопки соцсетей / поделиться

Щас кстати проверил вес страницы одной и той же с разных кнопок..
Это кнокпи эдинтичные по размеру с PLUSO

Размер страницы:3 536 байт
Количество встроенных элементов:48 (263 637 байт)

А это вес и встроеные элементы той же страницы с этого архива, при чем картинка тут конечно оромная и ее мона и нужно уменьшить..
Вот какой вес получается тут..
Размер страницы:3 488 байт
Количество встроенных элементов:31 (206 432 байт)

То есть, если уменьшить эту картинку что сейчс в архиве, мы получим еще более меньший вес...там гавна много ненужного...собна 6 иконок нужно и все то...так что будет все пучком..

Tor, тока кусочек..
То есть грузить как бы все но один раз...так как все арбузы сейчас благополучно кешируют картинки а можно и этот спрайт собна закешировать принудительно на год скажем ели надо - вобщем так лучше и быстрее будут странички грузится... плюс кнопки то свои а не стороннии где хз что за код на их стороне...у меня например с некоторых подгружается всегда разные реурсы какие то...тоесть в кнопках сторонних стоит по сути ифрейм и он собирает траффик со всех сайтов участников кнопочного бизнеса... а поисковики тоже хз как к такому отнесутся...плюс скорость загрузки точно больше чем даже если просто свои иконки тыкнуть вот так <img src="бла бла бла" alt="" />

Tor, Тут кнопок полно на форуме.. есть в разных вариантах..

# Tor (16.11.2014 / 21:22)
Fublin, Что то я не совсем понял, спрайт(картинку)грузит целиком но отображает только указанный в стиле фрагмент,или грузит только фрагмент?.

те собна надо сделать в ряд одну картинку из иконок..чтоб между ними было растояние в пиксель де то..
там штук 6 - 8 всего будет...
Тут на картинке их штук 20 - 30...вот и считай во сколко еще вес уменьщится...

Потом когда сделали картинку...надо оптимизировать вес этой картинки.. вес еще уменьшится..
Вот сервис для пнг
http://www.punypng.com

вот для всех расширений...
http://www.jpegmini.com

Вот собна уменьшил..тока надо сделать прозрачный фон а я не умею...с таким же качеством конечно..

Вот нужные иконки с прозрачнм фоном в пнг опять жеж..
Там яндегс еще..сами допишите по аналогии...просто найдите адресс закладок яндекса потому что я.ру уже перестало существовать...

# Tor (16.11.2014 / 21:43)
Fublin, Ну меня не столько заинтересовали , а сама "технология" спрайтов.

Олег же в теме о Векторных иконках написал и про спрайты

Вот под последнюю картинку цсс
Просто закидываем в папку картинку последнюю которую я тут крепил и пишем это в цсс заместо тово

.sozmenu {
    width:100%;
    padding:10px;
    padding-left:2px;
    display:inline-block;}
.od {
  background-image:url(../knop/knop_7.png);
  background-position:0px -42px;
  background-repeat:no-repeat;
  width:40px;
  height:40px;
  float:left;}
.ma {
  background-image:url(../knop/knop_7.png);
  background-position:-50px -138px;
  background-repeat:no-repeat;
  width:40px;
  height:40px;
  float:left;}
.f {
  background-image:url(../knop/knop_7.png);
  background-position:-50px -87px;
  background-repeat:no-repeat;
  width:40px;
  height:40px;
  float:left;}
.t {
  background-image:url(../knop/knop.png);
  background-position:-20px -185px;
  background-repeat:no-repeat;
  width:40px;
  height:40px;
  float:left;}
.vk {
  background-image:url(../knop/knop_7.png);
  background-position:0px 5px;
  background-repeat:no-repeat;
  width:40px;
  height:40px;
  float:left;}
.g {
background-image:url(../knop/knop_7.png);
  background-position:-52px 5px;
  background-repeat:no-repeat;
  width:40px;
  height:40px;
  float:left;}