В этом небольшом уроке давайте коснемся темы просмотра изображений, а конкретно поговорим о просмотре gif изображений в операционной системе Windows 7.
Почему именно формат gif и почему именно в Windows 7 ?
Дело в том, что в более ранних операционных системах (например, в Windows XP) файлы этого формата открывались стандартным средством для просмотра изображений и их просмотр не вызывал никаких затруднений и вопросов, а уже начиная с Windows Vista ситуация изменилась. В этой и последующих операционных системах gif файлы по умолчанию открываются в браузере Internet Explorer.
Для многих пользователей перешедших на новую Windows это нововведение оказалось, по меньшей мере, странным и неудобным и поэтому в данном уроке мы рассмотрим парочку вариантов выхода из данной ситуации.
Итак, если не вдаваться в тонкости, GIF – это популярный формат графических изображений, который может поддерживать прозрачность и анимацию.
Вот простой пример:
Как видите, оба файла имея один (одинаковое расширение gif), в то же время отличаются друг от друга (в одном из них присутствует эффект анимации в другом нет). Вы должны это понимать!
Если мы, находясь в операционной системе Windows 7, щелкнем значок анимированного gif файла, то он по умолчанию будет открыт в браузере (как было сказано выше) и его анимация будет сохранена.
Теперь давайте сделаем так, чтобы файлы формата gif открывались привычным способом (стандартным средством для просмотра изображений). Сделать это довольно просто – щелкаем любой gif файл правой кнопкой мыши и в контекстном меню выбираем пункт Открыть с помощью – Выбрать программу :
После этого находим в этом разделе необходимый пункт, выбираем его и щелкаем Ok . Если хотите, чтобы данный тип файла (gif) всегда открывался стандартным средством просмотра, то предварительно поставьте галочку Использовать выбранную программу для всех файлов такого типа :
После этого наш файл будет открыт привычным средством просмотра, но…
Имейте в виду, что в Windows 7 просмотр анимированных gif файлов таким способом будет некорректным - вместо анимации мы будем видеть статическое изображение (первый кадр). Т.е. если ёлочку с мигающими гирляндами открыть таким способом, то никаких мигающих гирлянд мы не увидим – картинка будет неподвижной.
Вот такой нюанс.
Если для вас анимация gif файлов не важна, то можно смело использовать такой вариант просмотра, в противном случае надо оставить всё как есть и просматривать gif анимацию в браузере (как это задумано разработчиками Windows). Со временем к этому можно привыкнуть.
В данной ситуации я обязательно должен упомянуть о том, что есть и третий (альтернативный) вариант просмотра – использовать сторонние программы для просмотра изображений.
Таких программ много и у каждой есть свои плюсы и минусы. Я в качестве такой альтернативы могу порекомендовать бесплатную программу FastStone Image Viewer, скачать которую можно .
Это небольшая и довольно приятная программа, которая помимо просмотра большого количества графических форматов также позволяет редактировать изображения и добавлять к ним различные эффекты. 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 голос(ов)
Объявление
Формат файлов GIF Raster image
GIF - самый популярный тип файлов в Интернете благодаря тому, что он позволяет создавать анимированные изображения. Файлы GIF используют растровые изображения до 8 бит/пиксель. Такое разрешение позволяет использовать 256 цветов палитры RGB. Следует отметить, что далеко не все изображения GIF являются анимированными. Большое количество логотипов и изображений с четкими, хорошо очерченными линиями, а также прозрачные фоны сохраняются именно в формате GIF. Сжатие файлов в формат GIF происходит без потерь, т.е. размер уменьшается без снижения качества изображения. Это позволяет конвертировать файлы в другие форматы без каких-либо существенных потерь качества.
Технические сведения о файлах GIF
Компания Compuserve создала формат GIF (Graphics Interchange Format - формат графического обмена) для использования в Интернете. Именно поэтому данные о нем были открыты широкой общественности. 256 цветов файла GIF способны использовать алгоритм Лемпеля - Зива - Велча, который позволяет сжимать файлы с одновременным удалением участков с недостаточным кол-вом данных с целью минимизации потерь качества изображения. Растровая информация сжимается до минимальных размеров. Кол-во цветов, необходимых для построения изображения, снижается путем удаления цветов, которые при формировании изображения на используются. Максимальное кол-во цветов - 256, однако на изображении их может быть даже 2 - белый и черны (минимальное требование к кол-ву цветов файла GIF). Снижение кол-ва цветов уменьшает общий размер файла.
Дополнительная информация о формате GIF
| Расширение файла | .gif |
| Категория файлов | |
| Файл-пример |
(5,6 MiB) (7,7 MiB) (141,77 KiB) (118,95 KiB) |
| Связанные программы | Adobe Photoshop Microsoft Windows Photo Gallery Viewer Apple Preview Corel Paint Shop Pro |
