За последний год анимированные изображения стали неотъемлемой частью социальных сетей и развлекательных ресурсов. В связи с этим пользователей «ВКонтакте» и других социальных медиа заинтересовал вопрос о том, что такое гифка.
Понятие о формате
GIF можно расшифровать как «формат, предназначенный для обмена графическими изображениями». Его разработала компания CompuServe в 1987 г. для того, чтобы пересылать по сети.
Картинки с расширением.GIF могут храниться без ущерба для качества и насчитывать до 256 наиболее распространенных цветов. Есть возможность поддержки и большего количества оттенков в анимациях при наличии отдельной палитры у каждого кадра и нулевой задержке между показами. Формат подразумевает работу со стандартной цветовой палитрой. Картинка сохраняется построчно. Благодаря LZW-компрессии файлы с большим количеством однородных участков легко сжимаются. Изображение при этом не теряет четкости.
Усовершенствованные GIF-изображения
Что значит гифка для современного пользователя, если в ней нет анимации? Это совсем не то, что он хотел. Поэтому вскоре после создания формат был усовершенствован: с 1989 г. GIF-файлы могут быть динамичными и содержать прозрачные участки. Анимированная гифка - это изображение, которое содержит несколько кадров, а также сведения о частоте и порядке их вывода на экран. Как правило, процесс закольцовывается, и после окончания показа гифка запускается заново.
Среди цветов палитры можно объявить прозрачный. В таком случае современные браузеры будут отображать фон сквозь неокрашенные участки. Частичная прозрачность, поддерживаемая в PNG, для гифок не характерна: пиксель может быть либо заполненным, либо прозрачным.
Где применяется GIF-формат?
Выяснив, что такое гифка, можно сделать вывод: этот тип изображений очень удобно использовать там, где файл должен иметь минимальный размер. Такой областью является интернет: в погоне за скоростью загрузки страниц разработчики стараются использовать как можно меньше «тяжеловесных» картинок, отдавая предпочтение облегченным гифкам.
Формат GIF распространен в веб-дизайне. Он прекрасно подходит для передачи небольших картинок, в т. ч. содержащих текст. Красиво оформленные кнопки с разнообразными надписями - не что иное, как гифки. Тем не менее, GIF не годится для сохранения фотографий. Для такой цели идеально подходит JPEG (JPG): этот формат не ограничен в количестве отображаемых цветов.
Анимированные гифки часто применяются в оформлении сайтов. Благодаря возможности оставлять пиксели прозрачными, GIF-изображения идеально вписываются в череду прочих картинок.
Технические характеристики
Что такое гифка? Прежде всего, это уменьшенное по «весу» изображение. Формат предполагает LZW-сжатие, которое позволяет объединять повторяющиеся пиксели. Поэтому чем больше однородных участков, тем сильнее будет уменьшено изображение. Алгоритм позволяет сокращать размер восьмибитных картинок с палитрой без ущерба для качества: упакованные данные можно полностью восстановить. Что касается фотографий, то ограничение в 256 цветов будет необратимым.
Алгоритм LZW выискивает одинаковые участки файла, называемые фразами, присваивает им маркеры и заносит в таблицу. Например, в картинке есть 70 наборов пикселей, окрашенных в оранжевый, желтый и розовый цвета. Каждому из них будет присвоено одно и то же значение - например, 8. Данные будут сохранены 70 раз в виде записи с восьмеркой. Чем меньше шума на картинке, тем более качественным будет сжатие.
Еще одной особенностью формата является чересстрочный способ хранения информации. Строки делятся на группы, изменяется их порядок внутри файла. Пока изображение грузится, оно постепенно проявляется. Таким образом, пока гифка не загрузилась полностью, ее можно видеть, но только с меньшим разрешением.
Сначала записываются 1, 5, 9 и дальнейшие строки с интервалом «4», в таком же порядке они появляются при загрузке. Когда 25% будет загружено, можно увидеть размытую картинку. Далее появляются 3, 7, 11 и дальнейшие строки, изображение становится в 2 раза четче. Затем грузятся остальные ряды (2, 6, 10... и 4, 8, 12...) и картинка приобретает окончательный вид. Такой способ записи немного увеличивает размер гифки, но возможность увидеть ее до окончания загрузки полностью оправдывает этот маленький недостаток.
Что такое гифка «В Контакте»?
Загружаемые пользователями ВК, - это те самые подвижные изображения в формате GIF. Тем, кто уже знает, что такое гифка, будет интересно узнать о том, как разместить ее в социальной сети.
Чтобы вставить анимацию с другого сайта, нужно щелкнуть по ней правой кнопкой мыши и найти в меню пункт, позволяющий скопировать адрес (URL). Затем необходимо перейти на сайт «ВКонтакте» и вставить адрес в то место, в котором должна появиться гифка (например, в поле, где вы пишете текст поста на стене). Система автоматически загрузит картинку, после чего ссылку можно убрать. Нажмите Enter для публикации гифки.
Чтобы загрузить гифку с компьютера, ее нужно поместить в раздел «Документы» (сам раздел открывается в настройках). Нажмите «добавить документ», выберите уровень доступа. Чтобы поместить гифку в сообщение или пост, необходимо нажать кнопку «Прикрепить» и найти нужный файл.
Анимированные картинки, увиденные у друзей, можно сохранять себе. Для этого нужно развернуть изображение кнопкой «+», нажать на него правой кнопкой и выбрать в меню нужный пункт.
В ВК? Это прекрасный способ украсить свой профиль, выразить эмоции, развлечь себя и друзей. Добавляйте анимации в переписку или на стену с собственного компьютера или интернет-сайтов: теперь вы знаете, как это сделать!
Файлы GIF представляют собой графический формат растрового типа, который может применяться как для статических, так и для анимированных картинок. Посмотрим, в каких приложениях можно открыть гифки.
С гифками работают два типа ПО: программы для просмотра картинок и графические редакторы. Все они делятся на инсталлируемые приложения и встроенные в операционную систему.
Способ 1: XnView
Вначале разберемся, как посмотреть картинки GIF в просмотрщиках изображений, которые нуждаются в инсталляции на ПК, на примере XnView.
Существует также другой вариант просмотра объекта в данной программе. Для этого будем использовать встроенный файловый менеджер.
Как видим, наличие файлового менеджера значительно облегчает поиск и просмотр нужного объекта в XnView. Программа кросплатформенная, то есть, подойдет для просмотра гифок не только исключительно пользователям Windows. Кроме того, она обладает огромным количеством различных функций и инструментов, помогающих просматривать и обрабатывать рисунки, в том числе и формата GIF. Но в этом заключается одновременно и «минус» приложения. Большое количество редко используемых функций могут запутать неопытного пользователя, а также способствуют тому, что XnView занимает сравнительно много места на жестком диске.
Способ 2: Faststone Image Viewer
Ещё одной программой для просмотра изображений, которую нужно предварительно устанавливать, является Faststone Image Viewer. Какие же существуют варианты посмотреть в ней гифки?
Данное приложение также позволяет открывать рисунок GIF двумя вариантами: через меню и посредством встроенного файлового менеджера.
Теперь разберемся, как посмотреть гифку не через окно открытия, а исключительно при помощи встроенного файлового менеджера.
Как видим, Faststone не менее удобное приложение для просмотра гифок, чем XnView. Только у Faststone в любом случае, даже если запуск происходит через специализированное окно, для непосредственного открытия файла придется переходить в файловый менеджер, а у XnView эти варианты четко разделены. В то же время, интерфейс самого окна у Faststone более привычный, чем у предыдущей программы. У неё имеется не менее развитый функционал по просмотру и обработке гифок.
Способ 3: средство просмотра фотографий Windows
Теперь давайте разберемся, как просмотреть гифку стандартным средством для просмотра фотографий Windows, которое уже встроено в операционную систему по умолчанию. Рассмотрим вариант работы для операционной системы Windows 7 . В других версиях ОС действия могут немного отличаться.
Но, если на компьютере установлено другое приложение для просмотра изображений, которое ассоциируется с форматом GIF, а пользователь захочет запустить гифку именно с помощью стандартного средства просмотра, то сделать это будет довольно проблематично. Связано это с тем, что, как ни странно, стандартное средство просмотра не имеет собственного исполняемого файла. Тем не менее, задачу можно решить с помощью ввода кода в окно «Выполнить»
.
Как видим, открывать гифки стандартным средством для просмотра фотографий Windows довольно неудобно. В нём отсутствует возможность запуска объекта через интерфейс приложения. Поэтому приходится использовать ввод команды через окно «Выполнить»
. Кроме того, в сравнении с вышеописанными программами данное средство просмотра очень укороченное по функционалу, да еще и с минимумом возможностей по обработке картинок. Поэтому для просмотра картинок GIF все-таки рекомендуется установить специализированную программу, например, одну из тех, которые описаны выше.
Способ 4: Gimp
Теперь настало время перейти к описанию открытия картинок GIF в графических редакторах. В отличие от просмотрщиков, они имеют значительно больше инструментов для редактирования изображений, в том числе и гифок. Одним из лучших бесплатных графических редакторов является Gimp. Посмотрим, как в нем осуществить запуск объектов с названным расширением.
Кроме того, требуемый объект можно открыть, просто перетянув его из Проводника Windows
в рабочую область окна Gimp. Для этого отмечаем название рисунка в Проводнике
, производим зажим левой кнопки мыши и перетаскиваем гифку в окно Gimp. Картинка отобразится в программе, и будет доступна для обработки, как если бы она была открыта через меню приложения.
Как видим, запуск объекта GIF в редакторе Gimp не вызывает особых сложностей, так как он интуитивно понятен и схож с аналогичными действиями в большинстве других приложений. Кроме того, Gimp имеет в своем арсенале большой набор инструментов для редактирования гифок, который практически не уступает платным аналогам.
Способ 5: Adobe Photoshop
Но самым известным графическим редактором является все-таки Adobe Photoshop. Правда, в отличие от предыдущего, он платный. Посмотрим, как в нем открыть файлы формата GIF.
Открыть объект в Фотошопе можно перетягиванием из Проводника Windows
, придерживаясь тех же правил, о которых мы говорили при описании действий в приложении Gimp. Затем будет запущено знакомое нам сообщение об отсутствии встроенного профиля. После выбора действий откроется сама картинка.
Следует отметить, что Adobe Photoshop по функционалу и возможностям редактирования гифок все-таки немного превосходит бесплатный редактор Gimp. Но в то же время это превосходство не слишком существенное. Поэтому многие пользователи предпочитают обходиться бесплатным аналогом, вместо того, чтобы приобретать Photoshop.
Способ 6: Paint
В операционной системе Windows встроен собственный стандартный аналог двух предыдущих программ. Это графический редактор Paint. Посмотрим, как с его помощью можно открыть GIF.
Картинку можно перетянуть из Проводника
, как это выполнялось на примере предыдущих графических редакторов: отмечаем изображение в Проводнике
, жмем левую кнопку мышки и перетаскиваем его в окно Paint.
Но существует ещё вариант запуска гифок в Paint через Проводник Windows
, который недоступен для других программ. Этот способ наиболее быстрый. Переходим в Проводнике
в область размещения изображения на винчестере. Щелкаем по рисунку правой кнопкой мышки. В контекстном перечне выбираем вариант «Изменить»
. Картинка отобразится через интерфейс Paint.
В целом Paint, конечно, значительно уступает по функционалу Adobe Photoshop, Gimp и большинству других сторонних аналогов. В то же время, у него имеется необходимый базовый инструментарий, благодаря которому Paint можно считать полноценным графическим редактором, способным решить большинство задач по редактированию картинок формата GIF. Главным же преимуществом этой программы является то, что её не нужно устанавливать, так как она уже имеется в базовой комплектации Windows.
Способ 7: программы для просмотра файлов
Кроме того, существует отдельная группа приложений, целью которых является обеспечение возможности просмотра файлов разнообразных, не связанных друг с другом форматов (документы, таблицы, изображения, архивы и т.д.). Одно из таких приложений — File Viewer Plus. Определим, как посмотреть в нем гифку.
Рисунок можно перетащить из Проводника
в окно File Viewer.
Приложение хорошо тем, что его можно использовать не только для просмотра гифок и иных типов изображений, но и для просмотра документов, таблиц и других видов файлов. Его универсальность в то же время является и «минусом», так как функций по обработке конкретных типов файлов у File Viewer меньше, чем у специализированных программ. К тому же, бесплатно данным приложением можно пользоваться всего 10 дней.
Это далеко не полный перечень программ, которые умеют работать с форматом GIF. С этим могут справиться практически все современные просмотрщики изображений и графические редакторы. А вот выбор конкретной программы зависит от поставленной задачи: просмотр рисунка или его редактирование. В первом случае следует воспользоваться просмотрщиком, а во втором – графическим редактором. Кроме того, немалую роль играет и уровень сложности задачи. Для простых задач можно воспользоваться встроенными приложениями Windows, а для более сложных уже придется устанавливать дополнительное программное обеспечение.
Наиболее часто встречаемой проблемой, из-за которой пользователи не могут открыть этот файл, является неверно назначенная программа.
Чтобы исправить это в ОС Windows вам необходимо нажать правой кнопкой на файле, в контекстном меню навести мышь на пункт "Открыть с помощью",
а выпадающем меню выбрать пункт "Выбрать программу...". В результате вы увидите список установленных программ на вашем компьютере,
и сможете выбрать подходящую. Рекомендуем также поставить галочку напротив пункта "Использовать это приложение для всех файлов GIF".
Другая проблема, с которой наши пользователи также встречаются довольно часто - файл GIF поврежден.
Такая ситуация может возникнуть в массе случаев. Например: файл был скачан не польностью в результате ошибки сервера,
файл был поврежден изначально и пр. Для устранения данной проблемы воспользуйтесь одной из рекомендаций:
- Попробуйте найти нужный файл в другом источнике в сети интернет. Возможно вам повезет найти более подходящую версию. Пример поиска в Google: "Файл filetype:GIF" . Просто замените слово "файл" на нужное вам название;
- Попросите прислать вам исходный файл еще раз, возможно он был поврежден при передаче;
Тему оптимизации сайта сейчас затрагивают все чаще и чаще. И не зря, так как веб становится все более быстрым, а информации становиться все больше. Только посмотрите на количество сервисов оптимизации изображений, CSS стилей, JS стилей появилось в последнее время. Добиться быстрой загрузки сайта стало куда проще, чем это было раньше. Но даже здесь не все решается простыми сервисами. Сегодня мы рассмотрим простой способ загружать GIF только при клике.
Если вы хотите изучить более детально тему скорости загрузки, то рекомендую следующие статьи к прочтению:
Так как статья относится именно к GIF изображениям, то рекомендую изучить статью по созданию GIF онлайн:
Примеров до и после не будет, так как здесь все понятно будет на цифрах. А ниже вы можете посмотреть и скачать готовый пример загрузки GIF изображения при клике:
СКАЧАТЬ ДЕМО
Плюсы и минусы загрузки GIF при клике
Чтобы наглядно оценить все "за" и "против" данного способа я представил все наглядно в таблице:
Первый пункт немного спорный, потому что можно ведь было написать скрипт на чистом Javascript, тогда он бы отсутствовал, но вот остальные точно останутся в любом случае.
Пока что не до конца понятно в чем же тогда смысл данного способа, если же у него столько минусов. Но вот последний плюс для многих (и для меня в том числе) будет намного важнее всех минусов, которые указаны выше. Чтобы добиться хорошей скорости загрузки — необходимо кое-что сделать.
Сейчас хочу немного поговорить о последнем способе загрузки и показать на цифрах как сильно отличаются загружаемые объемы данных при простой вставке GIF, а также во втором случае. Я приведу на примерах тех GIF изображений, которые вы можете увидеть в .
Конкретно в данном примере отличия колоссальные!
Что нужно сделать до начала внедрения кода…
Допустим, вас воодушевил данный способ и вы понимаете, что на вашем сайте находится большое количество GIF изображений, а вот скорость загрузки страдает. И вы решили внедрить данный функционал у себя на проекте (возможно будущем). Есть небольшая предварительная процедура, при которой нужно подготовить preview изображения, которые необходимо показывать как только загрузился сайт. То есть это именно те изображения, которые пользователь видит пока не кликнул на кнопку Play.
Что можно поставить на preview изображение? Здесь есть 2 варианта: либо делать для каждого GIF изображения свое preview, которое является его первым кадром, либо сделать одно изображение, которое будет использоваться на всем сайте, вне зависимости от GIF изображения. Но, решить как будет лучше для вашего проекта, вам необходимо самостоятельно.
Итак, вы подготовили все preview изображения для каждого GIF изображения и сейчас готовы внедрить функционал, тогда переходим к самому интересному блоку! 🙂
Блок "СКОПИРОВАЛ-ВСТАВИЛ"
Здесь все будет действительно просто, а если нет, тогда просто скачайте демо пример и посмотрите как все устроено внутри и сделайте соответствующие действия для своего проекта.
Начнем, как обычно, с разметки:
1
этап. HTML разметка
| 1
2
3
| <div
class
=
"gif-with-play"
>
<img
src
=
"img/self-portrait.jpg"
alt
=
"Self Portrait"
data-srcgif=
"img/self-portrait.gif"
>
</
div
>
|
ВАЖНО:
все изображения должны находиться в блоке с классом "gif-with-play
". И второе важное замечание: необходимо указать адрес до preview изображения в атрибуте "src
" и ОБЯЗАТЕЛЬНО указать адрес до GIF изображения в атрибуте "data-alt
".
2
этап. CSS стили
На самом деле можно обойтись и без CSS стилей, а внедрить функционал и все. Но ведь человек вряд ли поймет, что можно кликнуть на изображение и просто проскроллит страницу далее. Поэтому все же нужны стили, которые помогут пользователю понять как работать с этим компонентом страницы:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| .gif-with-play
{
position
:
relative
;
background
)
transparent
no-repeat
center
center
;
}
.gif-with-play
:hover
{
cursor
:
pointer
;
}
.gif-with-play
:hover
:before
{
background-color
:
rgba(255
,
255
,
255
,
.56)
;
}
.gif-with-play
:after
,
.play
.gif-with-play
:after
{
content
:
""
;
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
margin
:
auto
;
height
:
120px
;
width
:
120px
;
-webkit-background-size
:
cover;
background-size
:
cover;
z-index
:
10
;
-webkit-transition
:
all .35s ease;
-o-transition
:
all .35s ease;
transition
:
all .35s ease;
opacity
:
1
;
}
.gif-with-play
:after
{
background-image
:
url
("../img/player-buttons/play_button.svg"
)
;
}
.play
.gif-with-play
:after
{
background-image
:
url
("../img/player-buttons/stop_button.svg"
)
;
}
.play
.gif-with-play
:
not(:
hover)
:after
{
opacity
:
.35;
}
.gif-with-play
:before
{
content
:
""
;
position
:
absolute
;
top
:
0
;
left
:
0
;
height
:
100%
;
width
:
100%
;
background-color
:
rgba(255
,
255
,
255
,
.7)
;
z-index
:
10
;
-webkit-transition
:
all .35s ease;
-o-transition
:
all .35s ease;
transition
:
all .35s ease;
opacity
:
1
;
}
.play
.gif-with-play
:before
{
background-color
:
rgba(255
,
255
,
255
,
0
)
;
}
.gif-with-play
img
{
opacity
:
1
;
-webkit-transition
:
all .35s ease;
-o-transition
:
all .35s ease;
transition
:
all .35s ease img
{
opacity
.play
.gif-with-play
:after
{
opacity
:
0
;
}
@media screen and (max-width: 768px) {
.gif-with-play
:after
,
.play
.gif-with-play
:after
{
height
:
60px
;
width
:
60px
;
}
}
|
Это самый базовый набор стилей, чтобы показать кнопку Play. Я их написал только для того, чтобы вы понимали принцип и смогли изменить кнопку (да и любые стили) под себя и свой проект. Если вы заметили, то для GIF изображения, которое будет подставлено с помощью JS вместо preview, блоку-контейнеру (в нашем случае блоку с классом "gif-with-play") добавляется класс "play
".
Кто-то скажет, что можно было добавить дополнительные теги в HTML разметку и к ним привязать событие воспроизведения и остановки GIF. Но я мне нравится формат с псевдоэлементами :before
и :after
.
3
этап. Javascript
Первым делом необходимо подключить библиотеку jQuery
. А затем расположить ниже следующий скрипт:
JAVASCRIPT КОД
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| (function
($)
{
$(".gif-with-play"
)
.on
("click"
,
function
()
{
var
$this =
$(this
)
,
$img =
$this.children
("img"
)
,
$imgSrc =
$img.attr
("src"
)
,
$imgSrcgif =
$img.attr
("data-srcgif"
)
,
$imgExt =
$imgSrcgif.split
("."
)
;
if
($imgExt[
1
]
===
"gif"
)
;
$img.attr
("src"
,
$img.data
("srcgif"
)
)
.attr
("data-srcgif"
,
$imgSrc)
;
$($img)
.load
(function
()
;
}
)
;
}
else
{
$img.attr
("src"
,
$imgSrcgif)
.attr
("data-srcgif"
,
$img.data
("srcgif"
)
)
;
}
$this.toggleClass
("play"
)
;
}
)
;
}
)
(jQuery)
;
|
Для владельцев WordPress
Для вас есть отличное готовое решение в виде плагина для WordPress. Плагин называется "WP GIF Player". Скачать его можно здесь — скачать плагин "WP GIF Player"
.
Основные преимущества и возможности плагина "WP GIF Player":
- "Проигрывание" одновременно только одно изображение GIF
- Автоматическое создание изображений для превью GIF (выше нам необходимо было это делать самостоятельно)
- GIF изображения добавляются очень легко, с помощью одной кнопки
- Есть возможность параллельной загрузки GIF изображений
- Можно выставить ограничение на максимальное разрешение GIF изображения
Для владельцев WordPress это хорошее решение, потому что постоянно проделывать все действия вручную может занять очень много времени, а свой плагин писать — это не каждому под силу.
Вывод
Сейчас GIF изображения — это отличный способ объяснить самый важный момент. Также многие документации делаются с помощью GIF изображений, так как можно наглядно показать использование какого-либо инструмента локально или с помощью горячих клавиш.
Но данный способ тяжело применить на больших объемах, когда вы используете практически на каждой странице, потому что придется доработать этот способ, чтобы сервер сам генерировал preview изображение из GIF.
Успехов!
Как сделать воспроизведение GIF по клику — ускоряем загрузку сайта путем загрузки GIF при клике
5.00
/5
(100.00%)
13
голос(ов)
