Привет, ребятки, с вами Чистор Hedgeg, я не ел арбузов 60 всех лиг! (шутка) И вот я снова с вами, после продолжительного отсутствия.
Сегодня мы раз и навсегда расставим все точки над ы в таком не простом, но понятном деле, как оптимизация изображений, поехали!
Картина мира на сегодняшний момент[]
Рассмотрим типичную (впрочем не каждая вики доходит до описания используемых в галереях к серии скриншотах, в целом ограничиваясь правилами загрузки изображений) сложившуюся ситуацию на уже устоявшемся в своих принципах и знакомом мне проекте: Бабажук вики (англ, т.к. на русской до сих пор нет правил и, в силу множества проблем, я как бывший администратор подумываю создать её клон).
Давайте сразу перейдём к делу и разберем допущенные ошибки:
Пример зависимости размера файла от степени сжатия при сохранении его в фотошопе с параметром «сохранить для веб» и без
- jpeg предпочтительнее png
- В целом это не всегда так, просто jpeg использует сжатие с потерями (проявляющееся в возникновении квадратиков), в отличии от png. Но jpeg предоставляет большую гибкость в балансе сжатия и размера обычной картинки, чем png (который в свою очередь прекрасно подходит для монохромных или содержащих ограниченный набор цветов и оттенков изображений).
- максимальное разрешение
- Может быть разным. Конечно всегда надо стремиться использовать как можно более качественный оригинал без артефактов, водяных знаков и максимально доступного разрешения, но иногда, можно пойти и на компромиссы, остановившись на меньшем разрешении или наоборот, преобразить исходное изображение до требующихся нашему времени 720-1080p.
- общий размер изображений
- Здесь допущена самая важная ошибка: изображение должно быть не больше некоторого предела (что говорит не о самом оптимальном сжатии), а наоборот, меньше.
Что можно сделать[]
Проиллюстрировать это можно примерами из самого руководства, чья изображения я, взяв перед собой обязательства, и чуть не получив по шапке от местного модератора изображений, оптимизировал в размере и загрузил их новые версии. Результат получился показательным в обоих случаях:
- далее фрагмент из оригинального руководства
 Example of good quality screenshot. (3 MB/3000 KB, no watermark, size is 1920 x 1080 pixels, the file type is PNG) |
 Example of low quality screenshot. (146 KB, the watermark is a logo located on the bottom right, the size is 1024 x 576 pixels, the file type is JPG, the image is a bit blurry) |
- jpeg (справа) уменьшился на 39% (почти в половину) https://miraculousladybug.fandom.com/wiki/File:Volpina_LQ_(407).jpg
- png (слева) уменьшился в 6 раз! https://miraculousladybug.fandom.com/wiki/File:VP_(626).png
Я сперва расписал это в информационной статье на своей вики (кстати, заходите, подписывайтесь) хоть и написана она отчасти для себя, в будущем будет ещё больше полезных материалов), потом написал справку (за что опять получил по шапке), включающую еще несколько техник по обработке изображений и теперь пишу это вам, надеясь на широкий резонанс и улучшения в множествах вики по этому вопросу (и особенно рассчитываю на новичков в вики редактировании).
От лирики к практике[]
По фактам выходит, что (программы, из которых мы берем изображения, за исключением продвинутых редакторов как фотошоп, не содержат оптимальных алгоритмов сжатия или способов их применить) можно сэкономить от половины до приблизительно двух третей трафика только на файлах, что положительно скажется на времени загрузки страниц и мобильном трафике. (у вас же есть мобильный телефон? - близард)
И ещё одна радостная новость: у одного из проектов по оптимизации появился анализатор целых страниц! (теперь не надо сохранять картинки локально на свой пк и вручную перетаскивать их и ждать сжатия всех, чтобы посчитался процент оптимизации)
- https://tinypng.com/analyzer (очень удобно, что показывается сэкономленное время на загрузку страницы)
- теперь инструмент сам всё сделает автоматически и примерно подскажет положение дел на странице
- Однако не уверен что сейчас или в будущем будут учитываться все картинки, а также скрытые посредством ленивой загрузки, но это лучше чем ничего.
Выводы[]
Т.о. я бы посоветовал данному проекту в обозримом будущем пересмотреть свои взгляды на загрузки и подготовку изображений (что я непременно помогу им сделать в предверии начала сезона), дабы не ударить в грязь лицом перед профессиональными изданиями. и даже превзойти их в качестве подготовки изображений. Т.к. даже они и их пользователи в основном не соблюдают такие простые правила сетевого этикета, как сжатие, витаминь: https://tinypng.com/analyzer#https://habr.com/ru/top/
А на сегодня всё. До новых встреч.
- Лаврентий, тащи bmp, сжимать будем)