Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 77
Лучше по шагам распишите, что вы делаете для сжатия картинки. И как вы узнаете, что эту картинку можно еще сжать, а эту без потери качества нельзя. Так думаю будет больше пользы для общества.
Таких топиков полно, и они интересны в первую очередь верстальщикам. Простым людям некогда вдаваться в такие подробности.
Были бы достаточно простые инструменты с парой простых схем-объяснений — был вы выхлоп.
Скачал специально Paint.NET, т.к. знаю, что там можно поиграться качеством/объемом и вот что получил:
6.81 КБ
6.81 КБ
> и вот что получил:
И вы получили картинку с рваными краями.
И вы получили картинку с рваными краями.
И какие же края бывают, как не «рваные»? Ведь это пиксели…
Возможно, но с другой стороны когда вы смотрите баннер, вы же не увеличиваете его в 10 раз, чтоб узнать, рваные там края или нет.
С другой стороны вас то же понимаю, вам как профессионалу, хочется чтоб был «порядок». Но ведь не все являются верстальщиками и многим при написание статьи не столько важно, сколько будет весить картинка, важнее его содержимое. И часто не важно, размытые у картинки границы или нет.
С другой стороны вас то же понимаю, вам как профессионалу, хочется чтоб был «порядок». Но ведь не все являются верстальщиками и многим при написание статьи не столько важно, сколько будет весить картинка, важнее его содержимое. И часто не важно, размытые у картинки границы или нет.
Тут увеличение в 2 раза. На самом деле хорошо видно и без увеличения.
А без красного фона?
А без красного фона будет фон другого цвета. Если он совпадает с цветом крайних пикселей, рваные края будут невидны. Всегда знать, на каком фоне будет использоваться изображение, нельзя. Тем более, что он может быть неоднородным.
Вы же предлагаете подготовку картинок для статьи на Хабр. На Хабре фон белый. Вопросы?
А, дак вы не знаете предыстории. Этот персонаж известного фильма еще с утра использовался в рекламе на самом Хабре под каждой статьей. Сейчас её уже выключили. Фон там был, конечно, не красный, но и не белый.
А JPEG вообще прозрачность не поддерживает, насколько я знаю. Претензии не в тему. В одном случе теряем качество за счет искажений, в другом за счет палитры.
Я бы все-таки был очень признателен, если бы Вы написали такаю статью — я бы с удовольствием показал ее своему верстальщику.
Самые подробные и правильные собраны здесь:
www.artlebedev.ru/tools/technogrette/img/
www.artlebedev.ru/tools/technogrette/img/
На мой взгляд пережатие через Adobe Photoshop (инструмент «Save for Web and Device..» в меню «File») картинки даст хорошие результаты при минимуме затрат. Уверен есть утилиты или инструменты в различных просмоторщиках\редакторах, позволяющие делать аналогичное («Не всем нужен фотошоп»).
Из бесплатного — paint.net под винду и GIMP под линукс с GTK (чем пользуются приверженцы KDE и всего, что не использует GTK, уж извините, не знаю).
Не совсем. Подбор оптимального сжатия JPG методом тыка — иногда затратный по времени, на моём опыте гораздо быстрее и лучше результат получается если сохранить с качеством 100 и скормить jpegmini.com, а потом еще для надёжности вырезать метаданные например JPEG & PNG Stripper'ом.
Но иногда он фейлит, по моему опыту — например в изображениях с фокусом на переднем плане и размытым фоном, плохо получаются края контрастного объекта.
PNG-24 вообще без разговоров — на средних и крупных изображениях optipng + pngout дают сжатие в разы.
Но иногда он фейлит, по моему опыту — например в изображениях с фокусом на переднем плане и размытым фоном, плохо получаются края контрастного объекта.
PNG-24 вообще без разговоров — на средних и крупных изображениях optipng + pngout дают сжатие в разы.
Ох уж эти шрифто/картинко фаперы.
Даже в нашей глухой деревне интернет 20мбит везде.
Даже в нашей глухой деревне интернет 20мбит везде.
И вы наивно полагает, что любая страничка в любой момент готова прилететь к вам именно с такой скоростью, не взирая на загруженность канала сервера и то, что вы делите канал с соседями по подъезду?
Общежитие НГУ: 2 мбит/с — максимально быстрый тариф. Так где ваша деревня располагается?
Не поверите, Краснодарском крае куча народу пользуется dialup-ом и gprs не только дома, но даже и на работе
Мой мобильный GPRS огорчает ваш комментарий.
мне кажется, или тут помимо прочего полезного идет реклама сервиса peeep.us???
Раньше я просто минусовал такие статьи, полагая что так уменьшаю энтропию вселенной
Мы нашли этого засранца, вали его1!!!
По быстрой оптимизировать свои картинки
Вручную выполнять рутинную работу глупо. Разумнее прикрутить оптимизатор к habrastorage.org.
Раньше я просто минусовал такие статьи, полагая что так уменьшаю энтропию вселенной
Ну просто graphic nazi :)
А я всё-таки поддержу коммент господина AigizK, и попрошу статейку на тему сжатия, дабы не просить каждый раз чужого дядю и не ждать, пока у него будет время))
Я конечно понимаю, что канал у всех разный (кто-то вообще через gprs сидит иногда), но мне кажется что достаточно много статей просто не предназначены для просмотра на:
1. Мобильных устройствах, ибо статьи с большим кол-вом изображений/видео просто неудобно просматривать на маленьком дисплее (и не важно, какое там разрешение, дело не в нём)
2. Узких каналах, ибо содержат «тяжеловесные» примеры/ссылки на приложения/видео и т.п. увесистый контент, который, можно так сказать, обязателен к изучению, дабы полностью вникнуть в суть
Это, конечно же, скорее относится к профильным блогам и некоторым специфическим статьям, но всё же… Именно поэтому, как мне кажется, многие не затрагивают оптимизацию своих изображений. Кстати минусовать такие статьи за то, что автор упустил из виду оптимизацию изображений мне кажется вовсе неверным — всё же рейтинг не для того был сделан?
Впрочем, я согласен с тем, что в некоторых статьях для широких масс стоит заниматься оптимизацией, и что не стоит ставить в заголовок статьи (который будет виден в списке статей) огромные изображения, чем многие «грешат». Ну и, понятное дело, метровые изображения в любой статье вовсе «не вариант» :)
1. Мобильных устройствах, ибо статьи с большим кол-вом изображений/видео просто неудобно просматривать на маленьком дисплее (и не важно, какое там разрешение, дело не в нём)
2. Узких каналах, ибо содержат «тяжеловесные» примеры/ссылки на приложения/видео и т.п. увесистый контент, который, можно так сказать, обязателен к изучению, дабы полностью вникнуть в суть
Это, конечно же, скорее относится к профильным блогам и некоторым специфическим статьям, но всё же… Именно поэтому, как мне кажется, многие не затрагивают оптимизацию своих изображений. Кстати минусовать такие статьи за то, что автор упустил из виду оптимизацию изображений мне кажется вовсе неверным — всё же рейтинг не для того был сделан?
Впрочем, я согласен с тем, что в некоторых статьях для широких масс стоит заниматься оптимизацией, и что не стоит ставить в заголовок статьи (который будет виден в списке статей) огромные изображения, чем многие «грешат». Ну и, понятное дело, метровые изображения в любой статье вовсе «не вариант» :)
Скриншоты в JPEG пестрят артефактами независимо от размера дисплея или ширины канала.
Вряд ли подобные явления можно объяснить иначе как компьютерной безграмотностью.
Вряд ли подобные явления можно объяснить иначе как компьютерной безграмотностью.
Я не спорю про JPEG — лично я никогда вообще не пользуюсь этим форматом (фотоаппаратом как-то не приходилось пользоваться, да) — имхо он создан лишь для издевательства над людьми. По мне так смысла сжимать изображение (даже в 3-4 раза) если оно теряет своё качество просто нет. Это было весьма актульно лет 5-10 назад, но времена меняются — мы неизменно движемся в сторону улучшения качества/размера (во всех смыслах).
Я говорил лишь о возможном большом размере PNG изображений и случаях, когда в их оптимизации особого смысла нет. Не более.
Я говорил лишь о возможном большом размере PNG изображений и случаях, когда в их оптимизации особого смысла нет. Не более.
Вы, конечно, меня запинаете, но у меня мнение такое: лучше пусть люди с полезными статьями об свои наработках в электронике, коде, которые кое-как сняли фото своеё поделки на свою мыльницу сохранят её хоть в bmp, и свои начерченные схемы из Altium Designer снимут скриншотом и сохранят его в jpg, но зато статья ценная, понятная, уникальная. И совсем не похожа на статьи тех о ком не говорят. Хотя у них лого лисы и хрома сохранено в отличном качестве, но статья то ни о чем.
А если еще с оформлением все в порядке, то статья сразу теряет ценность?
Нет она становится хорошо оформленной, ценности она не теряет и не обретает. Хватит уже статей хорошо оформленных и ни о чем. Итак похерили хабр, зато статьи оформленные.
Пусть лучше такие люди смело пишут хорошие ИНФОРМАТИВНЫЕ статьи, а не боятся что тут их запинают орфографией и картинками «png вместо jpg», «jpg вместо png».
Я не говорю, что оптимизация это неважно, я просто говорю главное не она!
Пусть лучше такие люди смело пишут хорошие ИНФОРМАТИВНЫЕ статьи, а не боятся что тут их запинают орфографией и картинками «png вместо jpg», «jpg вместо png».
Я не говорю, что оптимизация это неважно, я просто говорю главное не она!
А если у статьи картинка чуть больше, чем могла бы быть, то теряет, и её надо минусовать?
Вот человек тратит время и силы, пытается поделиться с окружающими чем-то полезным. «На, сволочь, минус! Картинка не в пнг!»
Вот человек тратит время и силы, пытается поделиться с окружающими чем-то полезным. «На, сволочь, минус! Картинка не в пнг!»
Изображение из статьи при желании можно еще сильнее ужать:
— 4,3 кб.
Если сильно присмотреться, можно придраться, но в целом, на мой взгляд, все хорошо и альфа на месте.
— 4,3 кб.Если сильно присмотреться, можно придраться, но в целом, на мой взгляд, все хорошо и альфа на месте.
habrahabr.ru/blogs/DIY/131502/ — размер иллюстраций уменьшен с 2,3 мб до 400 кб.
«полагая что так уменьшаю энтропию вселенной»
No pasaran!
2-ой закон термодинамики говорит о невозможности уменьшать энтропию вселенной. Можно только перегонять её из одних частей в другие.
No pasaran!
2-ой закон термодинамики говорит о невозможности уменьшать энтропию вселенной. Можно только перегонять её из одних частей в другие.
На мой взгляд, скриншоты надо делать в png-8 (если не важен цвет) или png-32 (если важен).
Все остальное — в jpeg (в фотошопе «сохранить для веба») и качеством в 60% (либо в 51% для особо продвинутых).
Это простое правило позволит снизить излишний объем раза в 2-3. В большинстве случает этого достаточно.
Все остальное — в jpeg (в фотошопе «сохранить для веба») и качеством в 60% (либо в 51% для особо продвинутых).
Это простое правило позволит снизить излишний объем раза в 2-3. В большинстве случает этого достаточно.
Два скриншота ко двум моим последним блогозаписям (про Chainvas и затем про -prefix-free) были, за нехваткою времени, позаимствованы из статьи «Useful Coding Tools and JavaScript Libraries For Web Developers» на сайте «Smashing Magazine».
К сожалению, там они приводились в формате JPEG и оттого не соответствуют Вашим высоким стандартам качества.
Если Вы готовы создать их аналоги в формате PNG (именно создать, потому что преобразование из JPEG в PNG бессмысленно: оно объединило бы высокий объём PNG и несовершенную информационную целостность JPEG), и если эти аналоги выйдут не менее красивыми, то на здоровье. А не то прошу Вас в сём случае считать себя свободным от Вашего обещания.
К сожалению, там они приводились в формате JPEG и оттого не соответствуют Вашим высоким стандартам качества.
Если Вы готовы создать их аналоги в формате PNG (именно создать, потому что преобразование из JPEG в PNG бессмысленно: оно объединило бы высокий объём PNG и несовершенную информационную целостность JPEG), и если эти аналоги выйдут не менее красивыми, то на здоровье. А не то прошу Вас в сём случае считать себя свободным от Вашего обещания.
Помоему автору делать нечаго, пустил бы свое свободное время в более нужное русло.
Для тех кто не хочет никуда пересылать, кратко алгоритм:
Начинаем с того, что думаем можем ли мы пересчитать количество цветов на изображении в уме
(т.е вот есть черный, красный, синий и темно-синий — значит можем, или «дофига оттенков синего» — значит не можем).
Если можем, то сохраняем в png, если нет — в jpg, любой программой.
Таким образом подгатавливаем все изображения в одной папке.
Скачиваем программу (http://rghost.ru/19467051), о которой автор писал на хабре (http://habrahabr.ru/blogs/web_design/121096/) и создаём ей ярлык на рабочем столе или панели total commander-а (я выбрал второй вариант).
После чего просто перетаскиваем папку на ярлык и на единственный вопрос программы отвечаем Normal/Default если лень думать, или на своё усмотрение если внимательно читали вышеуказанную статью.
Начинаем с того, что думаем можем ли мы пересчитать количество цветов на изображении в уме
(т.е вот есть черный, красный, синий и темно-синий — значит можем, или «дофига оттенков синего» — значит не можем).
Если можем, то сохраняем в png, если нет — в jpg, любой программой.
Таким образом подгатавливаем все изображения в одной папке.
Скачиваем программу (http://rghost.ru/19467051), о которой автор писал на хабре (http://habrahabr.ru/blogs/web_design/121096/) и создаём ей ярлык на рабочем столе или панели total commander-а (я выбрал второй вариант).
После чего просто перетаскиваем папку на ярлык и на единственный вопрос программы отвечаем Normal/Default если лень думать, или на своё усмотрение если внимательно читали вышеуказанную статью.
А почему ссылками?
У Вас какой-то хитрый алгоритм, который Вы не хотите никому раскрывать, или просто публичный сервис оптимизации еще не готов?
У Вас какой-то хитрый алгоритм, который Вы не хотите никому раскрывать, или просто публичный сервис оптимизации еще не готов?
А как, если не ссылками, пересылать изображения в интернете? Мои россказни об оптимизации, думаю, мало заинтересуют людей, которым нужно просто выложить изображения к топику.
Дайте людям вебинтерфейс сервиса, где они смогут ужать свои картинки.
Или Вы просто ратуете за уменьшение веса, но при этом не являетесь представителем какого-то сервиса ужимания?
Или Вы просто ратуете за уменьшение веса, но при этом не являетесь представителем какого-то сервиса ужимания?
Это самое «ужимание», оно не полностью роботизированный процесс, там нужно прикладывать ручки и время. Хочешь попрактиковаться? Местный пользователь x128 выложил свою среду для оптимизации — CQ, но пользоваться ею желающих немного.
А мне не поможете? У меня около 5 изображений для сайта — нужно их профессионально обработать и сделать миниатюры к ним. У меня как-то по дилетантски выходит — тяжелые больно.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Предлагаю помощь в подготовке иллюстраций