Делаем картинки «не картинками»

Делаем картинки «не картинками»

Опции

k0ttee

Topic Starter сообщение

4.9.2014, 0:58; Ответить: k0ttee

Сообщение #1

Топовый постер

Группа: User
Сообщений: 12040
Регистрация: 2.5.2014
Поблагодарили: 0 раз
Репутация:

0

jpg, png, gif, svg это еще не все способы сохранить картинку, есть еще «велосипед» кодирования в bas64. На нем и прокатимся, только надо сначала его «изобрести».

Зачем это надо?
Чтоб было меньше запросов к серверу. По-любому сервер отдает HTML и CSS, а при необходимости еще и картинки. Много картинок — много запросов & много соединений & больше работы серверу. Если картинок отдается много, 50-100, то в браузере даже создастся очередь. Вы сами то любите в очередях стоять?

Можно конечно соединить горсть мелких картинок в 1 большую (спрайт), а потом средствами CSS брать из него нужное место. Зато через base64 можно «вшить» картинки прямо в CSS-файл. И сервер будет отдавать только HTML и CSS. А можно и то и другое. :)

Как конвертировать?
Заколдовать/расколдовать 64-магией можно сервисами найденными в гугле или скриптами.

На php таким (копипаста с хабра + добавил переменных для удобства):

<?php
$file='style.css'; //в каком файле взять
$output='output.css' //в какой файл запихнуть
$content=preg_replace('/images\/[-\w\/\.]*/ie','"data:image/".((substr("\\0",-4)==".png")?"png":"gif").";base64,".base64_encode(file_get_contents("\\0"))',file_get_contents($file));
file_put_contents($output,$content);
?>

Сделать нечто подобное на JS пока не получилось. Для своей CMS хотел конвертеть картинки на клиенте (в браузере до загрузки на сервер).

Можно сконвертеть и более простым способом. Пишем такой html:

Стиль и размер не важен, дело в атрибуте contenteditable. Чтобы сконвертировать: перетягиваете картинку на DIV, жмете F12 или Ctrl+Shift+I и смотрите исходник.

В исходнике будет безобразие вида

ru61.png ( 83,19 килобайт ) Кол-во скачиваний: 1357

Чтоб «велосипед ехал» надо прикрутить через CSS «педали» вида:

#some_div {
background: url(data:image/МИМЕТИП;base64,КОДКАРТИНКИ);
}

Следующий код покажет вам логотип RuSeo. Под спойлером заколдованная картинка.
Для расколдовывания сохраните "это" в html-файл и откройте браузером. Там же можно будет сохранить в нормальное png.
[spoiler=""]

[/spoiler]

А в чем отстой, если таковой есть?
Конечно есть, - вес мелких картинок станет чуть больше, а больших (если повезет) чуточку меньше. И редактировать картинки будет менее удобно, хотя их всегда можно будет открыть браузером и сохранить в нормальный файл.

P.S:
Если вы, мсье, велосипедист и хотите больших вело-решений, пихайте картинки прям в базу данных. А заодно и файлы шаблона и исполняемый код...

--------------------

Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9

0

Ответить с цитированием данного сообщения

airman airman 4.9.2014, 11:08; Сообщений: 9058 Поблагодарили: 251 раз Репутация: 33 Просмотр профиля	4.9.2014, 11:08; Ответить: airman Сообщение #2
Топовый постер Группа: Active User Сообщений: 9058 Регистрация: 26.1.2010 Из: Россия Поблагодарили: 251 раз Репутация: 33	А зачем себе так усложнять жизнь, я так и не понял. Ладно лет десять назад. когда интернеты были дюал-апами и грузились по пол часа. Но сейчас нормальные скорости и даже варезники обвешанные баннерами под завязку, типа зайцев все равно грузятся быстро. -------------------- Статья: мой опыт заработка на рефералах 100к в месяц \| Пасьянс Косынка

k0ttee Topic Starter k0tteeTopic Starter 4.9.2014, 13:08; Сообщений: 12040 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 4.9.2014, 13:08; Ответить: k0ttee Сообщение #3
Топовый постер Группа: User Сообщений: 12040 Регистрация: 2.5.2014 Поблагодарили: 0 раз Репутация: 0	А зачем себе так усложнять жизнь, я так и не понял. 1.) В своем движке позволило избавиться от картинок для админки: вшил в CSS и поднял текстовый файл выше document_root, чтобы у кого-папало не было доступа до картинок админки. Через права на сервере (обычно 751) можно либо запретить либо разрешить, но только всем (и админам и посетителям). 2.) Потоки сервера не бесконечны. Если каждому посетителю отдавать контент в 100 потоков, количество соединений при большой посещалке может даже кончиться... И длительный connection keep alive этому поспособствует. Мой NGINX трудится в 2 дочерних процесса, каждый из которых может создать до 1024 соединений. Сразу делим 2048 на 2, ибо как минимум каждому браузеру отдается HTML+CSS (2 соединения). 3.) Чтобы спрятать картинку от поисковиков. Можно подгружать её через JS, но она будет ниже корня и если забыть про disallow в robots.txt бот до неё скорее всего доберется. А так картинку можно сунуть выше корня и include'ить как текстовый файл. Подъем выше корня - хорошее решение для конфигов, которое даже в случае невыполнения php спасет пароли в php-файле. сейчас нормальные скорости Входящие через 3G икнули. Когда быстрый траф 3G кончается (остается медленный 64-128кб/сек) сжатие в Gzip и отключение картинок помогает, если страничка посещается впервые и еще не кэширована. Кто пытался войти в админку Wordpress на 64кб/сек тот знает что грузиться она будет д-ооо-лго, а поработать иногда хочется в пригородном автобусе/электричке (2-3 часа сидя на попе в пути). -------------------- Задонь кибер-коту на крипто-вискас btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9

TenDemon_rs TenDemon_rs 4.9.2014, 17:44; Сообщений: 3247 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	4.9.2014, 17:44; Ответить: TenDemon_rs Сообщение #4
Топовый постер Группа: Active User Сообщений: 3247 Регистрация: 29.12.2012 Из: с.Окунево Поблагодарили: 0 раз Репутация: 0	А у меня иногда вообще не отображаются картинки, кто виноват мой хостинг или движек джумло ? :blink: -------------------- Мой ютуб канал, подпишись не ленись / Как повысить иммунитет!

zhecka94 zhecka94 4.9.2014, 19:32; Сообщений: 793 Поблагодарили: 3 раза Репутация: 0 Просмотр профиля	4.9.2014, 19:32; Ответить: zhecka94 Сообщение #5
Завсегдатай Группа: Active User Сообщений: 793 Регистрация: 8.3.2011 Из: Бахмач Поблагодарили: 3 раза Репутация: 0	TenDemon, смотря что за хостинг у вас. Большинство ошибок возникает при неправильной настройке вашего движка.

marlen_dtrih marlen_dtrih 9.9.2014, 14:27; Сообщений: 9 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	9.9.2014, 14:27; Ответить: marlen_dtrih Сообщение #6
Новичок Группа: Viewer Сообщений: 9 Регистрация: 2.3.2016 Поблагодарили: 0 раз Репутация: 0	По-моему зря изобрели велик.. лишние хлопоты. Но если кому надо, мануал полезный конечно.

reds reds 10.9.2014, 9:08; Сообщений: 502 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	10.9.2014, 9:08; Ответить: reds Сообщение #7
Завсегдатай Группа: PreUser Сообщений: 502 Регистрация: 30.6.2010 Поблагодарили: 0 раз Репутация: 0	Есть сайт, на нем 200 страниц, по 50 картинок на каждой, люди быстро проматывают эти страницы, сайт на wordpress и где-то при 3000 хостах в сутки (в основном на эти картинки) хостинг начал жаловаться на нагрузку, сменил тариф, потом снова жалоба, когда было 8000 хостов даже самый крутой тариф не выдержил. Я думал картинки через base-кодирование пихнуть, но потом решил, что будет проще соскриншотить их и объединить в спрайты, а спрайты по-максимуму сжать в фотошопе, в итоге, из 10000 картинок получилось 40 и нагрузка упала. Я это к вопросу birds о том, зачем заморачиваться. Как уже писалось, у браузера есть очередь на сокеты и не грузится одновременно больше 10 картинок, и если даже интернет суперскоростной, скорость загрузки будет зависить от сервера, а он будет тормозить от тысяч просмотров. Брать сервер я боюсь, так как не понимаю что это такое и есть подозрение, что дешевый сервер ляжет еще быстрее, чем дорогой виртуальный хостинг.

4el

11.9.2014, 20:13; Ответить: 4el

Сообщение #8

клоновод

Группа: Banned
Сообщений: 151
Регистрация: 15.4.2013
Поблагодарили: 0 раз
Репутация:

0

Сегодня с таким кодированием в футере столкнулся. Автор сделал для того, чтоб такие как я, не смогли оттуда удалить ссылки.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

--------------------

клоновод

« Предыдущая тема · Веб-дизайн · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Кто и зачем покупает картинки обезьян по $200 тысяч? NFT	167	metvekot	27439	6.3.2024, 21:58 автор: Boymaster
Делаем локализацию сайтов с любого на любой язык. 10 лет успешной работы, 275 довольных клиентов. Быстро, качественно, грамотно	0	Borgula	840	16.3.2022, 15:27 автор: Borgula
Выравнивание картинки по центру между текстом	10	NikN	2637	6.1.2021, 23:24 автор: buypushplatform
Нужно добавить картинки на сайт И видео	2	Ksardas777	4094	17.11.2018, 10:41 автор: Intuit89
Как убрать полоски с картинками “PushDown”	4	mstdmstd	5754	8.10.2018, 17:31 автор: -Сабж-