Форматы графических файлов | Информатика 7 класс #20 | Инфоурок
Видеоуроки являются идеальными помощниками при изучении новых тем, закреплении материала, для обычных и факультативных занятий, для групповой и индивидуальной работы. Они содержат оптимальное количество графической и анимационной информации для сосредоточения внимания и удержания интереса ребят без отвлечения от сути занятия. Каждый видеоурок озвучен профессиональным мужским голосом, четким и приятным для восприятия..
Ученики ценят оригинальность подачи материала, родители радуются повышению отметок детей, а учителя в восторге от эффекта и экономии времени и денег при подготовке к урокам..
★Инфоурок★.
Крупнейший в России образовательный онлайн-проект.
МЫ ПРЕДЛАГАЕМ:
✓ Курсы дополнительного образования детей и взрослых: https://infourok.ru/.
✓ Тесты для учителей и воспитателей: https://infourok.ru/tests.
✓ Самые массовые международные дистанционные олимпиады: https://infourok.ru/konkurs.
✓ Видеоуроки по 14 предметам: https://infourok.ru/videouroki.
✓ Каталог репетиторов: https://infourok.ru/tutor/ru.
✓ Библиотека методических материалов для учителей: https://infourok.ru/biblioteka.
Адрес редакции и издательства: 214011, РФ,.
г. Смоленск, ул. Верхне-Сенная, 4..
info@infourok.ru.
© 2012–2017 Издатель: Проект «Инфоурок»
Видео взято с канала: ИНФОУРОК
Форматы изображений, часть 1
Любое устройство с экраном должно показывать картинки. Картинки для цифровых устройств — это описывающий их код..
Разнообразные способы кодировать изображения превратились в готовые форматы, а некоторые форматы стали популярными в повседневном и профессиональном обиходе..
Это первая часть видео о форматах изображений. О растровых и векторных форматах, их задачах и особенностях..
Музыка:
THBD Lost In The Night (ft. Pipa Moran).
Мы в ВК: http://vk.com/slylama.
Мы в Телеграме: https://t.me/slylama.
Мы на Patreon: https://www.patreon.com/slylama.
Наш Яндекс.Кошелек 410017291235970.
Наш сайт не о фото http://brainsly.net
Видео взято с канала: SlyLama TV
Форматы изображений в веб-разработке и виды графики сайта за 7 минут. + Создаем favicon.
Всю компьютерную графику можно разделить на две большие части – это растровая и векторная графика. Так же существую несколько видов графики на сайте..
Первый вид иконки. Как правило это небольшие простые контурные картинки, которые всячески улучшают восприятие информации. Ими могут сопровождаться текстовые надписи и заголовки, а также элементы управления и навигации. Тут идеально подойдет как раз векторный формат графики..
Второй вид это фоновые изображения и элементы дизайна веб приложения. Они могут быть частично прозрачными и даже содержать анимацию. Тут в основном используется растровый формат графика и иногда векторный..
Ну и третий вид это непосредственно изображения контентной части сайта, то есть картинки которые находятся в статьях, различных фото галереях слайдерах и так далее. Тут у нас только растровые изображения..
Первый и наверное самый известный это формат JPEG/JPG (Joint Photographic Experts Group)..
Следующий формат PNG (Portable network graphics) – это тоже растровый формат, но у него есть супер способность – отдельные его части могут быть прозрачными..
Наконец то мы добрались и до векторного формата это SVG (Scalable Vector Graphics). Ну а сейчас нам достаточно знать файл в таком формате отлично подойдет для иконок нашего сайта..
А мы движемся вперед и сейчас я хочу тебя познакомить с форматом который приходит на замену всем растровым форматам о которых мы говорили ранее. На самом деле их есть несколько это и JPEG 2000 и JPEG XR но самый крутой это WebP!
.ico (favicon.ico) поддерживает прозрачность и используется для указания графической иконки нашего сайта во вкладке браузера. А так же для отображения иконки веб приложений..
�� Онлайн декодер WebP https://squoosh.app/.
�� Сервис создания favicon https://www.favicon.by/.
�� Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle.
�� Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle).
�� Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat).
�� Facebook: https://www.facebook.com/freelancerlifestyle.
�� Instagram: https://www.instagram.com/freelancer.lifestyle.
�� Меня зовут Женя Андриканич, я IT специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle.
�� Живи, а работай в свободное время! ©
Видео взято с канала: Фрилансер по жизни IT и фриланс
Файл не явлеяется правильным точечным BMP. JPG не открывается в Paint
Видео взято с канала: Сисадмин канал
Оптимизация фото для сайта онлайн и пакетная конвертация в JPG,PNG,WEBP и изменение размера
http://www.azoogle.ru/image-optimization-online/.
Первоисточник видео: https://www.youtube.com/watch?v=1QxgSOuAB1Q.
Если у Вас возникли вопросы по этому видео, нужны ссылки на упоминаемые ресурсы, текстовый транскрипт данного видео или совет – перейдите на мой блог по ссылке выше и оставьте комментарий внизу статьи. Я не имею возможности отвечать на все комментарии на YouTube, и вы гораздо быстрее получите ответ на свой вопрос, если оставите его в виде комментария на моем блоге. Плюс можно настроить уведомление на почту об ответе..
Если вам необходима помощь в создании, продвижении сайта, увеличении трафика, продаж и росте вашего бизнеса перейдите по ссылке ниже на страницу «Контакты» и оставьте заявку на конфиденциальную консультацию. Мы обсудим, как я могу помочь вашему бизнесу и если мы подходим друг другу, то мы сразу же приступим к работе по увеличению вашего дохода и прибыли..
http://www.azoogle.ru/contact/.
=.
Мой Инстаграм: https://www.instagram.com/idamvitrotana/.
Мой Фейсбук: http://www.facebook.com/dmtriitatarinov.
=.
Текстовый транскрипт видео:
В данном видео мы разберем:.
• как оптимизировать изображения/фото он-лайн, с возможностью пакетной конвертации в JPEG, PNG или в WEBP;.
• параллельное изменение размера и пропорций изображений..
Пакетная оптимизация изображений для сайта интернет магазина.
Рассмотрим на примере импорта товаров для интернет-магазина. Разные поставщики могут выдавать фотографии товаров в разном формате:
• Картинки в формате PNG с прозрачностью. Одно такое квадратное изображение 900*900 пикселей весит почти 1,5 Мб..
• Картинки в формате JPEG. Они могут быть очень большого размера (разрешение 3000*3000 пикселей);.
• Картинки, которые идут с вертикальной или горизонтальной ориентацией..
Для чего необходимо оптимизировать изображения.
Начнем с того, что все это очень неудобно. Если их импортировать на сайт, как есть сейчас, то они будут занимать гораздо больше места на сервере. Потому что картинка разрешения 900*900 пикселей не должна весить 1,5 Мб. Она может весить в несколько десятков раз меньше, если ее конвертировать и оптимизировать. Нет смысла заливать на сайт картинки размером 3000 на 3000 пикселей, если вы не хотите показать очень маленькие детали. Или если это не макросъемка. Потому что с телефона их вряд ли кто-то увидит..
Есть такие большие картинки, вес которых неоправданно раздут, они просто будут увеличивать время загрузки страницы, соответственно будет страдать конверсия, будут потребляться больше ресурсов сервера, и будет больше не довольных пользователей..
Картинки, которые ориентированы вертикально, скорее всего, будут смотреться не очень хорошо. Они будут обрезаться и масштабироваться не так, как вам хотелось бы. И когда люди захотят поделиться картинкой или вашей страницей в социальных сетях, лучше чтобы картинки были оптимизированы для социальных сетей и хорошо там смотрелись..
Конвертация изображений + изменение размера и пропорций.
Сейчас у нас есть 150 картинок общим размером/весом порядка 96 мегабайт. Тут есть картинки с вертикальной ориентацией, квадратной ориентацией, картинки с прозрачностью в PNG и картинки очень большого размера в JPEG..
Для их оптимизации, конвертации и изменения размера мы воспользуемся онлайн сервисом, называется он «bulkresizephotos» или сайт bulkresizephotos.com. Это абсолютно бесплатный сервис, то есть не нужно ничего покупать и не нужно устанавливать какое-то программное обеспечение..
Настройки конвертации изображений.
Для конвертации изображений можно просто «закинуть» картинки и выбрать нужные настройки:
• Мы выделяем все наши картинки;.
• Перетаскиваем их на сайт;.
• Выбираем, какие операции нам нужно произвести..
В данном примере я хочу привести эти картинки к точным размерам, сделать размером 900 на 900 пикселей, квадратные. При этом я хочу у картинок, с вертикальной ориентацией, чтобы задний фон, был дополнен. Например, картинка с вертикальной ориентацией размером 750 на 1000 пикселей, должна ужаться до квадрата 900 на 900 пикселей, с дополнением заднего фона до квадрата..
Далее мы выбираем формат изображения: JPEG, PNG и WEBP. Формат PNG нам не нужен, потому что нас не интересует прозрачность. Нас интересует минимальный размер картинки, поэтому я выберу JPEG, как наиболее популярный..
Таким образом, на выходе мы получим следующее:
• Картинки, которые были в PNG с прозрачностью, сейчас конвертируются в JPEG и преобразуются в квадрат с изменением размера..
• Вертикальные картинки преобразуются в квадрат, уменьшатся и задний фон дополнится до квадрата..
• Картинки, которые были очень большого размера 3000 на 3000 пикселей, но подходящих пропорций, просто масштабируются/уменьшаться..
Экспертный режим настроек.
Первоисточник видео: https://www.youtube.com/watch?v=1QxgSOuAB1Q
Видео взято с канала: Dmitry Tatarinov
Как Конвертировать Фото в JPG из PNG? | Конвертация Картинок из Одного Формата в Другой
Конвертация jpg в png пройдет легко и быстро, об этом я расскажу в видео. Программа позволяет преобразовывать картинки из одного формата в другой, так же поддерживает пакетное переименование, то есть сразу несколько картинок. Приятного просмотра!
=
На создание видео и работу с каналом требуется значительное время, а выкладывать бессмысленные ролики ради просмотров я не буду, сам люблю качественный контент и предпочитаю отдавать так же, качественно. Возможно вы заметили, как подробно я объясняю каждую деталь в своих видео. Потому что я сам начинал с нуля и прекрасно понимаю тех, кто только начал заниматься сайтами..
На канале только база, нужны уроки типа «помогите натянуть вёрстку на Вордпресс» или что то по программированию, ищите другие ролики, у меня этого нет. Не то что я против этого, просто у каждого свои интересы и другие пути развития. Уж если мне «приспичит», я просто закажу эту вёрстку, но за 10 лет работы с сайтами такое не случалось, всегда находил решение сам..
А те, кто пишет в комментариях «что за фигня, ну и затянул видео, а можно было вот так…»… смотрите другие каналы. Или вы решили как то самоутвердится за счёт моих видео написав подобный комментарий? ) Типа «Я умею, а ты нет..» =) Да пожалуйста, умейте ) А я умею, так как я умею. Надеюсь на понимание. Всем удачи!
Автор канала и видеороликов Александр Соловьёв.
VK http://bit.ly/2CfTO0N.
Facebook http://bit.ly/2Us5zs1.
Эти Плейлисты Могут Быть Вам Полезны.
=
Создание сайта на WordPress: https://www.youtube.com/playlist?list=PLXVt-JHK3WKd2cCkzlPAulcYs1r7GDmyj.
Плагины WordPress: https://www.youtube.com/playlist?list=PLXVt-JHK3WKex4GWW227X8qacnFjIJMFr.
Работа с Базой Даных Сайта: https://www.youtube.com/playlist?list=PLXVt-JHK3WKe4AkLUQS4tgV9-ZZzJkVFi.
Полезные Программы и Сервисы: https://www.youtube.com/playlist?list=PLXVt-JHK3WKeb85Q2ExmJKCLYy9N02kN
=
Создание Сайтов На Joomla (уроки по старой версии Joomla 1.5): https://www.youtube.com/playlist?list=PL921803DFC97EADA5.
=
#конвертация_картинок
Видео взято с канала: Создаём сайты самостоятельно
Как изменить формат изображения из JPEG в PNG
Видео взято с канала: NouMo YT
Нет похожих статей
Как всегда все понятно и ясно вот про оптимизацию очень жду так как есть готовые сайты старые и их картинки сделаны как попало и нужен совет как их оптимизировать помимо пропуска через tinypng ну и самый новый вариант WebP(не очень ясно что это и зачем делал на сайт в этом формате но вот при адаптации на мобилах они не работали).
Ты как всегда вовремя) я недавно поюзал svg, и влюбился в этот формат, а именно то что с ним можно делать. Анимации с помощью css, js. Я только за видео по графике. И ещё буду благодарен за информацию по верстке шаблонизатора ruby ERB, если тебе доводилось с ни работать. Мне дали проект, поправить вёрстку. Много времени отбирает разобраться. Всего хорошего тебе!
Про svg иконки в шрифтах хорошая тема однозначно нужно рассказать) порой находишь готовые наборы, такие как feather icons, но в них не хватает иконок. В таких случаях приходится разбираться как добавить свои иконки в набор, но интереснек было бы сразу замутить свой такой набор
Пнг не подходит для иконок/логотипов и прочих мелких элементов в интернете, на экранах смартфонов и маков просто будет мыльная картинка из-за высокого разрешения экрана, что б такого не было, нужно делать ну оочень высокое кач-во и маленький элементов будет весить в 50 раз больше чем SVG. Поэтому для веба используйте SVG
26 минут? Не совсем. Видео-контейнер содержит в себе слишком много информации, воспринимать которую потоком мой мозг не осилил..:) Дешифровка (методом многоступенчатого просмотра) заняла раза в 2-3 больше времени. В одни только анимации порчи изображения я залипал по две минуты. Большое спасибо за такой ФОРМАТ видео)
Вопрос в видео задан не корректно. Вы не рассказываете о том, как это делается, а показываете инструмент который реализует эти процессы. А сами процессы при этом остаются за кадром. Про формат webp не упоминули.
Отлично. Только вот насчет сжатия векторных файлов имхо неточность они обычно сжимаются стандартными паковщиками. А той же винде их еще полезно хранить с галочками сжатия средствами ОС. Более того тот же pdf ридер умеет и сам распаковывать сжатые сторонние стримы вложенные в основной файл
3:58 Привет Женя. Я кстати, нашел тебя то благодаря поиску информации по SVG. Интересует внедрение файла SVG на страницу html (кстати можешь сделать и ролик в своем стиле, о нескольких методах внедрения svg на страницу), и анимация тегов. То есть меня лично интересует возможность оцифровать электронные схемы, и выключать ненужные элементы на svg чекбоксами из страницы сайта.
Много инфы в англоязычном вебе, но я к сожалению не владею английским чтобы бегло читать статьи.
Жека, сделай плз видео, как правильно вставлять картинки. чтобы они масштабировались, обезопасить себя от больших картинок заказчика. Чтобы они нормально заменялись в зависимости от формата, 3*4 например на 16*10, или как то так.
Как правильно задавать ibg, в каких случаях. а то с картинками у меня постоянно беда.
А что если я отсканировала док в ворд а он не открываеться,и каким то образом отсканировался в раинте и неотправляеться в электр.почту, как теперь с паинта переключить чтоб сканированные доки сохранялись на ворде а не в паинте?
спасибо, для меня очень информативное видео!! как раз интересуюсь
opencart оптимизация изображений, если вам тоже интересно, заходите: https://neoseo.com.ua/google-page-speed-opencart тут так же много хорошей информации.))
что если в подробных своиствах фото нету вообще ни каких данных ни кода ни разрешения ни ширины ни высоты и тд и тп есть только имя тип элемента путь к папке дата созздания изменения размер и атрибуты как это все восстановить если это случилось после установки windows 7 на windows 10 и уцелела только малая часть из всех?
Про SVG однозначно нужен ролик. И, чем подробнее, тем лучше. Вот столкнулся с проблемой, как поменять цвет при необходимости, например. Да и вообще, узнать о его возможностях что и как с SVG можно делать. Спасибо за позитивные, содержательные и познавательные ролики! RESPECT
Ну по поводу причины я не соглашусь, потому что у меня изначально Paint открыл фото в большом разрешении, однако после того как я внёс изменения, сохранил и мне понадобилось чуть позже кое-что ещё подправить, тут то ошибка и появилась, хотя разрешения осталось не изменным.
Пример того, как рассказать поверхностно, ничего не объясняя. Например JPEG. За счет чего происходит сжатие? Какие механизмы задействованы?
Студенты на зачете/экзамене наслушаются, пойдут сдавать и получат неуд. С такими я регулярно сталкиваюсь.
Бывает и хлеще. Информацию такого уровня выдают за курсовые проекты и даже за дипломные проекты.
Png хорошо выглядит. А jpeg -мало весит, но с каждым изменением становится все хуже и хуже и выглядит отвратительно. Учитывая размеры современых хардов мы можем себе позволить пнг формат. У bmp неплохое качество. До ващего видео думал что есть только jpeg, bmp, png форматы фото.
Почему так мало просмотров у такого подробного и интересного ролика?
Подписывался на канал ради переводов видео Кая, и очень рад тому в каком направлении развивается канал.
Большое спасибо за интересный и качественный контент!
насчет гиф уже несколько лет жду внедрение apng, но с места это так и не двинулось,
в том же стиме нету поддержки apng
это печально еще потому, что когда кто-то просит сделать
гифку для витрины, а на бэкграунде есть градиентный переход, например с синего на черный, то цвета в этом месте
портятся и видно все косяки данного формата
Сжатие с потерями для векторных форматов существует. Его применяют, когда необходимо опубликовать векторное изображение на сайте. Векторные редакторы на выходе отдают крайне неоптимизированный файл, в том числе в файлах содержатся координаты для кривых это числа с большим количеством знаков после запятой. Оптимизатор округляет эти числа, и при этом вектор едва заметно, но изменяется.
C:\Windows\System32\msdt.exe Не удается прочитать файл.Файл не является правильным точечным рисунком (BMP),или этот формат не поддерживается.
Такую ошибку выдает у меня при открытии любых проблем.
и даже regedit стал точечным рисунком))
как изменить?
Для людей не в теме малопонятно, но сам, как человек, снимающий и редактирующий видео, понимаю сколько УСИЛИЙ было приложено для создания этого видеоролика. Автору респект в полной мере (если бы мог, поставил бы два лайка).