В нынешний век мобильных технологий оптимизация картинок в форматах PNG и JPG,JPEG стала снова актуальна, как это было актуальным в те времена, когда интернет только входил в нашу жизнь и был повсеместно медленным и диалапным. Мобильный интернет, конечно, не совсем корректно сравнивать с диалапом, но местами, где связь плохая, там и скорость доступа довольно маленькая. Да и в те времена пользователю было некуда деваться, и приходилось ждать загрузки страницы. Сейчас же интернет вырос, выбор сайтов большой. Пользователь стал капризным и нетерпеливым, и среднее время ожидания загрузки страницы сильно уменьшилось. Пользователю проще найти другой более шустрый сайт.
Да и поисковые гиганты навроде Google или Yandex начали обращать внимание на то, как быстро грузятся сайты, отдавая предпочтение в выдаче тем, что пошустрее. Не последнюю роль в этом играет и вес страницы, который, в свою очередь, сильно зависит от веса располагающихся на ней изображений. Довольно очевидно, что иметь компактные сжатые картинки выгодно всем. Поэтому здесь я хочу поговорить о том, как подготовить ваши PNG и JPG, JPEG файлы к заливке на хостинг.

Базовая оптимизация изображений

Тут подразумевается обрезка ненужных полей, уменьшение глубины цвета, удаление комментариев и сохранение изображения в подходящем формате. Для этого можете воспользоваться Adobe Photoshop, или, если у вас его нет, MS Paint или GIMP.
Даже элементарная обрезка изображения неплохо снизит его вес.

Как уменьшить изображение в MS Paint

Покажу на примере MS Paint, как уменьшить изображение до нужных размеров.
Возьмём для примера лого NGINX и его изображение nginx.png размером 2000×417 пикселей, которое нужно обрезать по ширине до 1024, т.к. это ширина вёрстки страницы, и делать больше нет смысла.

На выходе получаем картинку, которая прошла минимальную базовую оптимизацию. Пора переходить к сжатию её веса.

File Optimizer для сжатия PNG и JPG,JPEG

Наиболее простой и быстрый способ добиться оптимального сжатия изображений без потери качества — использовать программу File Optimizer

Официальный сайт и описание программы :

Скачать File Optimizer вы можете с

Описание . Является эффективным оптимизатором не только для изображений, но также и для.pdf, .docx, txt и иных текстовых, аудио- и видеофайлов, а также архивов. Полный список поддерживаемых расширений вы найдёте на официальной странице проекта.
Вот некоторые из утилит, используемых в работе: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostcript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngquant, pngrewrite, pngwolf, TruePNG, tidy-html5, ZLib, zRecompress . Думаю, даже этот неполный список довольно внушителен.

Установка и использование File Optimizer

Сначала скачиваете последнюю версию программы либо в виде инсталлятора, либо архива с файлами. Кстати, в архиве есть версия под 32-битную и 64-битную версии Windows.

Интерфейс довольно простой и интуитивно понятный.
В настройке не нуждается, но вы можете некоторые форматы настроить под себя с помощью кнопки Options...
Использование . Вы либо перетаскиваете нужные файлы и даже папки (каталоги) в окошко программы, либо выбираете нужные через меню Add files...
Для оптимизации файлов жмёте Optimize all files

Оптимизированные файлы заменят собой исходники, иерархия категорий также сохранится. Напротив каждого файла будет показана статистика, сколько в процентах от исходного размера файла весит оптимизированная версия.
После завершения работы внизу в статусной строке будет выведена статистика по количеству обработанных файлов, а также сколько получилось сэкономить.

На мой взгляд, File Optimizer свою работу выполняет очень качественно.
Единственный минус, если список файлов большой, ждать результатов можно долго, но оно стоит того.

Если вас интересуют подробности способов оптимизации, которые можно настроить на свой лад, далее пойдёт речь про настройку и использование утилит для сжатия изображений

Cжатие PNG без потери качества

Рассмотрим 3 программы для оптимизации PNG:

• Adobe Photoshop
• OptiPNG
• PNGOUT

Сравним их по качеству сжатия картинок. Сжимать будем nginx.png из предыдущего раздела. Вес оригинала 27,5 Кб.

Cжатие PNG с помощью Adobe Photoshop

Первый в списке — хорошо известный всем фотошоп. Многофункциональный комбайн для дизайнера, который умеет почти всё, в том числе и сжимать изображения.
В фотошопе открываем Файл-Cохранить для Web либо используем комбинацию Alt+Shift+Ctrl+S

В результате получаем 22,7 Кб, т.е. сжали на 17,5%

К сожалению, большинство графических программ не способны раскрыть весь потенциал алгоритмов, используемых для сжатия PNG. Главная причина в том, что для определения оптимальной стратегии сжатия они используют эвристические алгоритмы, которые позволяют без проведения компрессии прикинуть эффективность тех или иных параметров, что, в результате, даёт большой процент ошибок. Поэтому для сжатия PNG мы используем специально созданные для этого утилиты, а именно OptiPNG и PNGOUT.

Использование OptiPNG для сжатия PNG

Как установить и пользоваться OptiPNG

Скачали.exe, залили в C:\Windows, взяли нужный PNG-файл, положили в какую нибудь папку. Теперь с помощью FAR Manager либо другого файлового менеджера с поддержкой консоли зашли в эту папку и ввели команду в консоль

Optipng -o7 nginx.png

Команда заставляет сжать PNG в папке. Позже рассмотрим простой вариант, как делать сжатие в один клик.
Но сначала взглянем на результат.

18,8 Кб, т.е. сжали на 31,6%, почти на треть. Весьма недурно, неправда ли? У фотошопа получилось намного хуже.

Использование PNGOUT для сжатия PNG

Как установить и пользоваться PNGOUT

Всё точно так же, как и для OptiPNG. Скачиваете PNGOUT.exe, закидываете в C:\Windows, открываете в файловом менеджере, например, Far Manager папку с PNG, и в командной строке пишете

Pngout nginx.png

Результат ниже

Результат 23,4 Кб, т.е. удалось сжать на 15%. Весьма неплохо.

Вообще, скажу сразу, у меня были разные результаты с разными файлами, где-то PNGOUT работал эффективнее, где-то OptiPNG, поэтому советую прогонять изображения по очереди через обе утилиты.

Как быстро сжать PNG в OptiPNG и PNGOUT

Создаёте файл png.reg и записываете туда данные для реестра

Windows Registry Editor Version 5.00 @="Run OptiPNG on Folder" @="cmd.exe /c \"TITLE Running OptiPNG on %1 && FOR /r \"%1\" %%f IN (*.png) DO optipng -o7 \"%%f\" \"" @="Run PNGOUT on Folder" @="cmd.exe /c \"TITLE Running PNGOUT on %1 && FOR /r \"%1\" %%f IN (*.png) DO pngout \"%%f\" \""

Потом запускаете этот файл и записываете данные в реестр Windows.
Теперь при клике по папке с файлами PNG, которые нужно сжать, выбираете нужные вам команды, сжатие произойдёт автоматически и для всех изображений разом.

Чтобы удалить всё из контекстного меню, записываете нижеследующий код в png.reg и запускаете его

Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\command] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT\command]

Cжатие JPG, JPEG без потери качества

Для оптимизации JPG, JPEG по аналогии с PNG существуют свои утилиты: jpegtran и jpegoptim. Конечно, вы можете пользоваться фотошопом, однако для сжатия JPG, JPEG я настоятельно рекомендую пользоваться именно ими.

Как установить, настроить и использовать jpegtran

jpegtran — мощная утилита, позволяющая выполнить как просто сжатие JPG без потери качества, так и сжатие с определённым уровнем сглаживания, и даже преобразование в Progressive JPEG.
Скачать jpegtran можно тут http://jpegclub.org/jpegtran/ (ищете и качаете jpegtran.exe).

Как сжать JPG, JPEG с помощью jpegtran

Заливаете jpegtran.exe в C:\Windows
Потом открываете в Far Manager папку с нужным JPEG и в консоли вводите

Jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Базовая оптимизация 1.jpg # -copy none убирает метаданные из JPG # -optimize оптимизирует изображение

Progressive JPG, JPEG

Это такой тип JPG, который при загрузке страницы сначала показывает общие очертания, потом догружается и доводит качество картинки до максимального. Очень удобно для медленного мобильного интернета, и потому его необходимо использовать.

Jpegtran -progressive -outfile 1.jpg 1.jpg # Трансформирует формат 1.jpg в Progressive

Как проверить, является ли изображение Progressive JPEG

Расширенные возможности jpegtran

Здесь рассмотрены все возможные варианты использования jpegtran

Jpegtran --help usage: jpegtran inputfile outputfile Switches (names may be abbreviated): -copy none Copy no extra markers from source file -copy comments Copy only comment markers (default) -copy all Copy all extra markers -optimize Optimize Huffman table (smaller file, but slow compression) -progressive Create progressive JPEG file Switches for modifying the image: -crop WxH+X+Y Crop to a rectangular subarea -flip Mirror image (left-right or top-bottom) -grayscale Reduce to grayscale (omit color data) -perfect Fail if there is non-transformable edge blocks -rotate Rotate image (degrees clockwise) -scale M/N Scale output image by fraction M/N, eg, 1/8 -transpose Transpose image -transverse Transverse transpose image -trim Drop non-transformable edge blocks -wipe WxH+X+Y Wipe (gray out) a rectangular subarea Switches for advanced users: -arithmetic Use arithmetic coding -restart N Set restart interval in rows, or in blocks with B -maxmemory N Maximum memory to use (in kbytes) -outfile name Specify name for output file -verbose or -debug Emit debug output Switches for wizards: -scans file Create multi-scan JPEG per script file

Как быстро на автомате сжать JPEG с помощью jpegtran в Windows

Через контекстное меню сжимать не получится из-за особенности работы утилиты, однако, настроить сжатие множества JPEG разом на автомате можно.
Для этого нам нужно создать файл с расширением.bat ( в помощь) и записать туда

Cd /d . for %%j in (*.jpg) do call:sheensay "%%~nxj" "%%~nj.jpg" goto:eof:sheensay jpegtran -copy none -optimize -progressive "%~1" "%~2"

Как установить, настроить и использовать jpegoptim

Как сжать JPG, JPEG с помощью jpegoptim

Заливаем jpegoptim.exe в C:\Windows. Потом открываем папку с JPG изображениями с помощью Far Manager и вводим в консоль

Jpegoptim *.jpg --strip-all --all-progressive

Как оптимизировать несколько JPG, JPEG разом с помощью jpegoptim

В отличие от jpegtran, утилита jpegoptim вполне замечательно позволяет работать с ней и из контекстного меню.
Создадим файл jpegoptim.reg, например, с помощью Far Manager, и запишем туда

Windows Registry Editor Version 5.00 @="Run jpegoptim on Folder" @="cmd.exe /c \"TITLE Running jpegoptim on %1 && FOR /r \"%1\" %%f IN (*.jpg) DO jpegoptim *.jpg --strip-all --all-progressive \"%%f\" \""

Запустили, внесли данные в реестр. Теперь можно сжимать множество JPEG файлов с помощью контекстного меню, просто складываете нужные изображения в одну папку, ПКМ и «Run jpegoptim on Folder».

Если хотите удалить jpegoptim из реестра и контекстного меню, записываете jpegoptim.reg

Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim\command]

Сохраняете, запускаете, вносите изменения в реестр.

Насколько качественно jpegtran и jpegoptim сжимают jpg, jpeg

Перейдём к испытаниям. Возьмём, к примеру, файл caching.jpg. В оригинале он весит 29,5 Кб

Испытания jpegtran на качество сжатия JPG, JPEG

На выходе получилось 29,1 Кб, сжатие сэкономило 1,36%

Испытания jpegoptim на качество сжатия JPG, JPEG

В проводнике Windows этого не видно, сжатие составило несколько сотен байтов.

Что ж, исходный файл был неплохо подготовлен, поэтому сжатие не дало видимого эффекта, но когда вы будете обрабатывать свои неоптимизированные изображения, порой будете удивляться, как хорошо можно сэкономить в размере.

Как настроить сжатие png и jpg, jpeg на автомате

Если вы дочитали до этого раздела, но всё ещё недовольны предложенными вариантами, предлагаю вам самим собрать портативный комбайн — сервис по сжатию картинок, фото, изображений, который будет работать как надо вам прямо на вашем рабочем столе.

Необходимо предварительно установить jpegtran , jpegoptim , optipng , pngout ю
Инструкция по установке есть выше.

Итак, для этого нам потребуется правильно собрать архитектуру папок. Допустим, у вас есть папка images со своей иерархией вложенных в неё папок с PNG и JPG, которые вам нужно обработать.
Создаём папку optimus , в неё закинем папку images со всеми вложенными папками и файлами.
Открываем , в нём открываем optimus, создаём там файл go.bat и записываем туда

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path=%~dp0:: Название папки, в которой лежат необработанные изображения set folder=images echo Обработка *.JPG файлов через jpegtran:: Создаём папку, в которой будут храниться сжатые jpg. В нашем случае, это jpeg_images xcopy /y /t /c /i "%folder%" "jpg_%folder%" :: Для каждого.jpg проводим оптимизацию с помощью jpegtran. Выходной.jpg будет записан в jpeg_images for /r %folder% %%a in (*.jpg) do (set fn=%%a& jpegtran -copy none -optimize -progressive -outfile %home_path%jpg_!fn:%~dp0=! %home_path%!fn:%~dp0=!) echo Обработка *.JPG файлов через jpegtran завершена:: Указываем, что теперь прогон нужно осуществлять в новой папке jpeg_images set folder = jpg_%folder% echo Обработка *.JPG файлов через jpegoptim for /r %folder% %%a in (*.jpg) do (set fn=%%a& jpegoptim %%~a --strip-all) echo Обработка *.JPG файлов через jpegoptim завершена echo Обработка *.PNG файлов через optipng xcopy /y /t /c /i "%folder%" "png_%folder%" for /r %folder% %%a in (*.png) do (set fn=%%a& optipng -o7 %%~a -out %home_path%png_!fn:%~dp0=!) echo Обработка *.PNG файлов через optipng завершена set folder=png_%folder% echo Обработка *.PNG файлов через pngout for /r %folder% %%a in (*.png) do (set fn=%%a& pngout %%~a) echo Обработка *.PNG файлов через pngout завершена pause

Код закомментирован в важных частях. По сути, ничего сложного, разберётесь, если вам это нужно.

Теперь сохраняем go.bat и запускаем его.

Если файлов много, сжатие изображений займёт какое-то время. Дождитесь, пока консоль не уведомит об окончании процесса.

Сжатие проходит с разделением файлов отдельно JPG, которые теперь располагаются в jpg_images , и PNG отдельно, которые располагаются в png_images .

Если нужно изменять качество или другие параметры, смотрите описание утилит выше и изменяйте код под свои нужды.

Как оптимизировать и сжать GIF

В заключение

В этой статье я постарался максимально развёрнуто охватить способы оптимизации PNG и JPG. Если есть какие-то вопросы, дополнения, пишите в комментариях, обсудим

Здравствуйте, дорогие друзья. Сегодня я расскажу как оптимизировать изображения для ускорения загрузки сайта. Но, для начала расскажу, почему ни писал почти неделю. Эту неделю я боролся с бюрократией, пытался получить новый загранпаспорт. Вы просто не представляете, что сейчас творится в паспортных столах, — это просто кошмар (очереди, давка, скандалы). Ещё хуже, чем обычно. Всё очень медленно. У меня такое ощущение, что в первый раз я получил паспорт гораздо проще и быстрей.

В общем, «плюнул» я на это. Зашёл на просторы Интернета, зарегистрировался на портале госуслуг и оформил получение данной услуги, без очередей и траты драгоценного времени.

А к чему я это всё, а к тому, что эта ситуация напоминает мне положение дел с сайтами и блогами. Медленная загрузка сайта не только раздражает, но вообще заставляет многих посетителей закрыть сайт, не дождавшись загрузки. Посетители могут даже не узнать о вашем полезном контенте, если не дождутся загрузки сайта.

И хотя сегодня практически у каждого пользователя высокоскоростной интернет и видимая загрузка сайтов не так заметна, поисковики всё же учитывают параметр «Скорость загрузки страницы» , как один из факторов ранжирования сайта. Плюс ко всему скорость загрузки положительно влияет на поведенческие факторы, что тоже не маловажно.

Безусловно, параметров, влияющих на скорость загрузки сайта, достаточно, много. И в одной статье рассмотреть всё это не возможно. Поэтому начнём с самой распространённой причины, замедляющей скорость загрузки сайта, — не оптимизированные изображения.

Где узнать о причинах медленной загрузки сайта

Сервисов для проверки скорости загрузки сайта – много. Но мы поговорим о сервисах, которые показывают причины медленной загрузки.

Я использую два сервиса:

Для начала скачиваете изображение к себе на компьютер, редактируете, и закачивает обратно по тому же адресу. В WodrPress дальше делать ничего не надо. А вот если это самописная страница, не забудьте в HTML коде указать нужные параметры ширины (width=»200″) и высоты (height=»200″). Отсутствие этих параметров влияет на скорость загрузки сайта, о чём свидетельствует параметр «Specify image dimensions» при анализе сайта в GTmetrix.

Как видно на скриншоте в моей теме не хватает параметров (16х16, 32х32) для иконок комментариев, категорий, даты и так далее.

Как указать параметры ширины и высоты изображения в теме WordPress

Итак, разберём мой пример. В моей теме не указаны размеры вот этих изображений:

Изображения без указания размера

Значит нужно найти в шаблоне место, где выводятся эти изображения. А выводятся они на главной странице и на странице материала. За главную страницу отвечает файл (index.php ), а за материал отвечает файл (single.php ).

Так вот отрываем административную панель WordPress– «Внешний вид» > «Редактор» — нужный файл. И добавляем параметры ширины и высоты, на основе предложенных размеров в отчёте GTmetrix.

Вот и всё, нет ни каких хитростей. И так по аналогии вы дорабатываете все свои изображения. Но помните при работе с исходным кодом будьте очень аккуратны, внимательно смотрите, куда прописываете параметры. Ведь достаточно затереть кавычку и ничего не получится. В общем если не уверены, делай резервные копии редактируемых файлов. Это поможет всё исправить, если сделаете ошибку.

А ещё скорей всего у вас в отчёте будет низкий показатель по параметру «Combine images using CSS sprites». Это параметр сообщает, что на сайте есть одинаковые изображения, которые можно объединить в спрайты для ускорения загрузки сайта. Но в двух словах этого не рассказать. Поэтому об этом поговорим в следующих статьях. А пока у вас есть над чем работать.

Так же посмотрите видеоурок, в нём я наглядно показываю как пользоваться сервисами и как оптимизировать изображения.

На этом у меня сегодня всё. Желаю вам удачи, друзья. Оптимизируйте свои изображения, это первый шаг на пути к быстрой загрузке сайта.

До встречи в следующих статьях.

Что делает наш модуль?Основная функция, максимально оптимизировать изображения, при этом практически не потеряв в качестве. Для чего это нужно?Причин несколько:Экономия свободного место на хостинге, т.к. как правило именно изображения "съедают" большую его часть.Соответствие требованиям PageSpeed Insights - требованиям по оптизимизации сайта, для его максимального ранжирования в поисковой системе.Увеличение скорости загрузки страниц, за счет уменьшения загружаемого траффикаК тому же:В июле Google запустит алгоритм Speed Update и обновит mobile-first индекс. В рамках этих обновлений скорость загрузки сайта и его мобильность станет серьезным фактором ранжирования.Проверить, есть ли у вашего сайта проблемы с размером изображений можно:здесьи здесь.Наш модуль OptiImg позволяет уменьшить размер изображений на сайте до 99% без видимой потери качества.Автоматическое сжатие изображений избавит вас от долгого и нудного пересохранения в сторонних приложениях.Никаких квот и ограничений, купите лицензию и конвертируйте столько файлов, сколько потребуется, без пополнений баланса и всяческих доплат!Уважаемые клиенты, обращаем ваше внимание, что лицензионный ключ дает возможность пользоваться нашим сервисом без ограничений, по истечению срока действия лицензионного ключа доступ к сервису будет возможен, но вы не сможете получать обновления для нашего модуля. Так же, обратите внимание, что при покупке продления, клбч в настройках модуля менять не требуется.Модуль работает по принципу "установил и забыл". Любое загруженное в инфоблок изображение будет автоматически сжато!Все изображения оптимизируются в 1 клик, все изображения загруженные в инфоблоки, медиабиблиотеку или при обмене с 1С - будут сжаты автоматически.На данный момент поддерживаются форматы JPEG и PNG.HTTPS - протокол поддерживается.PHP7 - поддерживается.Демо - период позволяет обработать 1000 изображений.Каждый день с помощью нашего модуля для 1C - Bitrix, обрабатывается до 500 тысяч изображений!Проверить уровень сжатия можно на сайте модуля.Обратите внимание, что модуль практически полностью написан на D7, на версиях 1С - Битрикс младше 16 - может работать некорректно. Как начать пользоваться?Чтобы упростить вам жизнь, наша команда всегда готова установить модуль на Ваш сайт под управлением 1С - Битрикс и произвести оптимизацию самостоятельно, для этого, после покупки присылайте запрос на наш e-mail - [email protected] c темой "Установка" , в теле письма укажите код купона и доступы к сайту на котором требуется произвести работы.Уважаемые клиенты!Не забывайте делиться своим опытом использования наших продуктов, оставляйте отзывы, пишите в обсуждения и на наш электронный адрес - [email protected], мы всегда рады вам помочь и получить обратную связь!

От АльфаГрупп

Купить: 2 000 1 800 руб.

Скриншоты

Описание

Технические данные

Описание

Что делает наш модуль?

Основная функция, максимально оптимизировать изображения, при этом практически не потеряв в качестве.

Для чего это нужно?

Причин несколько:

1. Экономия свободного место на хостинге, т.к. как правило именно изображения "съедают" большую его часть.
2. Соответствие требованиям PageSpeed Insights - требованиям по оптизимизации сайта, для его максимального ранжирования в поисковой системе.
3. Увеличение скорости загрузки страниц, за счет уменьшения загружаемого траффика

Наш модуль OptiImg позволяет уменьшить размер изображений на сайте до 99% без видимой потери качества.

Автоматическое сжатие изображений избавит вас от долгого и нудного пересохранения в сторонних приложениях.

Никаких квот и ограничений, купите лицензию и конвертируйте столько файлов, сколько потребуется, без пополнений баланса и всяческих доплат!

Уважаемые клиенты, обращаем ваше внимание, что лицензионный ключ дает возможность пользоваться нашим сервисом без ограничений, по истечению срока действия лицензионного ключа доступ к сервису будет возможен, но вы не сможете получать обновления для нашего модуля.

Так же, обратите внимание, что при покупке продления, клбч в настройках модуля менять не требуется.

Модуль работает по принципу "установил и забыл". Любое загруженное в инфоблок изображение будет автоматически сжато!

Все изображения оптимизируются в 1 клик, все изображения загруженные в инфоблоки, медиабиблиотеку или при обмене с 1С - будут сжаты автоматически.

На данный момент поддерживаются форматы JPEG и PNG.

HTTPS - протокол поддерживается.

PHP7 - поддерживается.

Демо - период позволяет обработать 1000 изображений.

Каждый день с помощью нашего модуля для 1C - Bitrix , обрабатывается до 500 тысяч изображений !

Проверить уровень сжатия можно на сайте модуля.

Обратите внимание, что модуль практически полностью написан на D7 , на версиях 1С - Битрикс младше 16 - может работать некорректно.

Как начать пользоваться?

Чтобы упростить вам жизнь, наша команда всегда готова установить модуль на Ваш сайт под управлением 1С - Битрикс и произвести оптимизацию самостоятельно, для этого, после покупки присылайте запрос на наш e-mail - [email protected] c темой "Установка" , в теле письма укажите код купона и доступы к сайту на котором требуется произвести работы.

Уважаемые клиенты!

Не забывайте делиться своим опытом использования наших продуктов, оставляйте отзывы, пишите в обсуждения и на наш электронный адрес - [email protected] , мы всегда рады вам помочь и получить обратную связь!

Отзывы (10)

Общая оценка: Всего отзывов: 10

Хорошее решение для оптимизации картинок

На момент 25,02,2019 решение полностью не рабочее, даже на их сайте http://www.optiimg.ru/ напрямую нельзя сжать изображение, оно зависает после загрузки.

Приносим свои извинения, решение рабочее, но именно на нашем хостинге оно не работает, проблема оказалась не в решении, а как уточнил человек из техподдержки "проблема лежит на уровне сетевых коммуникаций хостинговых центров". Сама техподдержка оказалась очень активной в решении нашей проблемы и лично вела переговоры с хостингом нашего сайта.

Модуль отличный!!!

Как ниже писали, присоединяюсь, да это единственное решение, о котором я не пожалела! Модуль работает шустро, не зависает. Почистила сайт на 3 гб. Было 5 гб стало 2гб.
Супер модуль, молодцы!) Рекомендую)

Отличная техподдержка и крутой модуль

Моментальная помощь техподдержки удивила, в воскресный вечер ответили сразу.
Модуль очень крут, давно искал подобное решение. Рекомендую!

Здравствуйте

Техподдержка работает мгновенно, через 10 секунд уже ответили в онлайн чате и ответили на вопросы! Программа огонь, особенно когда много картинок! Всем рекомендую!

Отличная тех поддержка

Возникли проблемы в работе модуля, обратился в тех. поддержку проблему решили очень оперативно, спасибо.

Хорошее решение

Отличное решение! Ребята все сами установили и сжали изображения на 40 %. Спасибо!

Пока единственное решение о покупке которого мы не пожалели

Пока единственное решение о покупке которого мы не пожалели. Очистили 5 гб.

Очень полезный модуль и прекрасная техподдержка!

Благодаря модулю удалось в два раза повысить скорость сайта, что очень важно для интернет-магазина с большим количеством изображений. Техподдержка помогла оперативно решить возникшие вопросы, терпеливо объяснила все тонкости.

Отличный модуль, отличная поддержка.

Приобрели модуль, тут же подключилась поддержка и все настроила. Благодаря оптимизации фото, Google PageSpeed ставит сайту на большинстве страниц оценку более 80 баллов. Всем рекомендую данное решение.

Отличный модуль

Протестировал сайт на google, оказались большие картинки. Думал как сделать оптимизацию. Нашлось простое и не дорогое решение. Ребята из тех поддержки сами установили, всё прописали, теперь при загрузке картинок работает автоматом всё сжимает до оптимальных размеров. Сразу поставил на второй сайт, очень доволен. Рекомендую.

Обсуждения (76)

Обсуждения (76)

Купил, оплатил, оптимизировал картинки. Все круто, за исключением одного глюка, который вызывает этот модуль. А именно, когда с морды сайта пытаюсь править товар вылезает фатал еррор

Детальная картинка:
Access to undeclared static property: Alfa1c\Optiimg\OptiImg::$_1260989302 (0)
/home/bitrix/www/bitrix/modules/alfa1c.optiimg/include.php:1
#0: OptiImgEvents::CompressOnResize(array, array, NULL, string, string, boolean)
/home/bitrix/www/bitrix/modules/main/classes/general/module.php:490
#1: ExecuteModuleEventEx(array, array)
/home/bitrix/www/bitrix/modules/main/classes/general/file.php:1705
#2: CAllFile::ResizeImageGet(array, array, integer, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinputunclouder.php:40
#3: Bitrix\Main\UI\FileInputUnclouder::getSrcWithResize(array, array)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:477
#4: Bitrix\Main\UI\FileInput->getFile(string, string, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:283
#5: Bitrix\Main\UI\FileInput->show(array, boolean)
/home/bitrix/www/bitrix/modules/iblock/admin/iblock_element_edit.php:2539
#6: include(string)
/home/bitrix/www/bitrix/admin/cat_product_edit.php:3

Вылезает не всегда, но оооочень часто. При этом иногда на одном и том же товаре сначала глюк есть, на второй-третий раз глюка нет.

Сергей Заботин, судя по тому, что название функции обфусцировано - вы продолжаете использовать демо - версию, удалите модуль полностью и установите заново, если ошибка сохранится - напишите нам на [email protected] мы вам поможем.

Какие у модуля имеются возможности, если изображения хранятся в "облаках"? Например, если это Selectel?
Насколько я понимаю, модуль сжимает и при загрузке, и при ресайзе, но не сжимает, если изображения уже находятся в "облаках"?
Что планируете в этом направлении?

Гаврил Скрябин, CMS в сторонние облака грузит файлы напрямую, на стороне облака наш модуль работать по понятным причинам не сможет, соответственно, только если вы предварительно файлы обработаете и потом переместите в облако.

С облаком битрикса работать будет, т.к. битрикс файлы в облаке актуализирует время от времени.

Добрый день
На какой период действует лицензионный ключ? (обновления)

Иван Прилепин, Обновления доступны в течении 1 года, доступ к серверу не ограничен по времени.

1.2.8 версия.

Роман Петров, Пишите нам на email, разберемся.

Купил оптимизатор год назад, тогда воспользовался очень мало, сейчас хотел снова использовать, но у меня вышла ошибка авторизации?! мне что заново его покупать?
Что мне его каждый год покупать ради 100 фотографий?

Роман Петров, Купить продление вы можете, если хотите обновить модуль, если версия модуля старшей 1.2.2, то обновление сделать придется, т.к. в этой версии был большой рефакторинг в ней же сменился сервер к которому наш модуль обращается. Если ваша текущая версия новее, то пишите нам на электронный адрес, [email protected] - разберемся, почему возникает ошибка.

Что нового

Установка

Установка стандартная из Marketplace.

Доступ к модулю осуществляется через раздел

Сервис -> Оптимизатор изображений либо по ссылке:
/bitrix/admin/optiimg_admin.php

Настройки модуля:
/bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1

Обратите внимание, что для работы модуля необходимо в поле "Ключ" ввести ключ полученный на почту после покупки.

Решение использует библиотеку cURL, как правило она включена по умолчанию, если нет, обратитесь за помощью к вашему хостеру, либо системному администратору.

Так же обращаем Ваше внимание, на то, что скорость работы напрямую зависит от скорости работы файловой подсистемы сервера и канала связи.

Также модуль умеет "на лету" сжимать изображения, например, добавляемые в элемент инфоблока. Для этого в настройках модуля установите галочки напротив и Сжимать изображения при ресайзе.

Поддержка

Как пользоваться нашим модулем правильно:

1. Устанавливаете модуль из маркетплейс.
2. Переходите по адресу /bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1
3. Задаете качество сжатия, устанавливаете галочки Сжимать изображения при загрузке и Сжимать изображения при ресайзе, если ваш сайт работает по https протоколу то в поле порт вписываете 443 либо оставляете пустым.
4. Переходите в файловый менеджер и удаляете папку /upload/resize_cache/
5. Переходите в интерфейс работы с модулем /bitrix/admin/optiimg_admin.php
6. Нажимаете кнопку Оптимизировать

Поводом для данной статьи стал следующий пост: . В свое время, мне немало пришлось написать исследовательского кода на C#, который реализовывал различные алгоритмы сжатия, обработки. То, что код исследовательский, я упомянул не случайно. У этого кода своеобразные требования. С одной стороны, оптимизация не очень важна – ведь важно проверить идею. Хотя и хочется, чтобы эта проверка не растягивалась на часы и дни (когда идет запуск с различными параметрами, либо обрабатывается большой корпус тестовых изображений). Примененный в вышеупомянутом посте способ обращения к яркостям пикселов bmp.GetPixel(x, y) – это то, с чего начинался мой первый проект. Это самый медленный, хотя и простой способ. Стоит ли тут заморачиваться? Давайте, замерим.

Использовать будем классический Bitmap (System.Drawing.Bitmap). Данный класс удобен тем, что скрывает от нас детали кодирования растровых форматов – как правило, они нас и не интересуют. При этом поддерживаются все распространенные форматы, типа BMP, GIF, JPEG, PNG.

Кстати, предложу для начинающих первую пользу. У класса Bitmap есть конструктор, который позволяет открыть файл с картинкой. Но у него есть неприятная особенность – он оставляет открытым доступ к этому файлу, поэтому повторные обращения к нему приводят к эксепшену. Чтобы исправить это поведение, можно использовать такой метод, заставляющий битмап сразу «отпустить» файл:

Public static Bitmap LoadBitmap(string fileName) { using (FileStream fs = new FileStream(fileName, FileMode.Open, FileAccess.Read, FileShare.Read)) return new Bitmap(fs); }

Методика замеров

Немного о методике – в таких случаях я предпочитаю не гоняться за сверхточными таймерами, а просто много раз выполнять одно и то же действие. Конечно, с одной стороны, в этом случае данные и код уже будут в кэше процессора. Но, зато мы вычленяем затраты на первый запуск кода, связанный с переводом MSIL-кода в код процессора и другие накладные расходы. Чтобы гарантировать это, предварительно запускаем каждый кусок кода один раз – выполняем так называемый «прогрев».

Компилируем код в Release. Запускаем его обязательно не из-под студии. Более того, студию также желательно закрыть – сталкивался со случаями, когда сам факт её «запущенности» иногда сказывается на полученных результатах. Также, желательно закрыть и другие приложения.

Запускаем код несколько раз, добиваясь типичных результатов – необходимо убедиться, что на нем не сказывается какой-то неожиданный процесс. Скажем, проснулся антивирус или еще что-то. Все эти меры позволяют нам получить стабильные, повторяемые результаты.

«Наивный» метод

Public static byte[,] BitmapToByteRgbNaive(Bitmap bmp) { int width = bmp.Width, height = bmp.Height; byte[,] res = new byte; for (int y = 0; y < height; ++y) { for (int x = 0; x < width; ++x) { Color color = bmp.GetPixel(x, y); res = color.R; res = color.G; res = color.B; } } return res; }

Обратное преобразование аналогично, только перенос данных идет в другом направлении. Я не буду приводить его код здесь – желающие могут посмотреть в исходных кодах проекта по ссылке в конце статьи.

100 преобразований в изображение и обратно на моем ноутбуке с процессором I5-2520M 2.5GHz, требуют 43.90 сек. Получается, что при изображении 512*512, только на перенос данных, тратится порядка полусекунды!

Прямая работа с данными Bitmap

Public unsafe static byte[,] BitmapToByteRgb(Bitmap bmp) { int width = bmp.Width, height = bmp.Height; byte[,] res = new byte; BitmapData bd = bmp.LockBits(new Rectangle(0, 0, width, height), ImageLockMode.ReadOnly, PixelFormat.Format24bppRgb); try { byte* curpos; for (int h = 0; h < height; h++) { curpos = ((byte*)bd.Scan0) + h * bd.Stride; for (int w = 0; w < width; w++) { res = *(curpos++); res = *(curpos++); res = *(curpos++); } } } finally { bmp.UnlockBits(bd); } return res; }

Такой подход дает нам получить 0.533 секунды на 100 преобразований (ускорились в 82 раза)! Думаю, это уже отвечает на вопрос – а стоит ли писать более сложный код преобразования? Но можем ли мы еще ускорить процесс, оставаясь в рамках managed-кода?

Массивы vs указатели

Public unsafe static byte[,] BitmapToByteRgbQ(Bitmap bmp) { int width = bmp.Width, height = bmp.Height; byte[,] res = new byte; BitmapData bd = bmp.LockBits(new Rectangle(0, 0, width, height), ImageLockMode.ReadOnly, PixelFormat.Format24bppRgb); try { byte* curpos; fixed (byte* _res = res) { byte* _r = _res, _g = _res + width*height, _b = _res + 2*width*height; for (int h = 0; h < height; h++) { curpos = ((byte*)bd.Scan0) + h * bd.Stride; for (int w = 0; w < width; w++) { *_b = *(curpos++); ++_b; *_g = *(curpos++); ++_g; *_r = *(curpos++); ++_r; } } } } finally { bmp.UnlockBits(bd); } return res; }

Результат? 0.162 сек на 100 преобразований. Так что ускорились еще в 3.3 раза (270 раз по сравнению с «наивной» версией). Именно подобный код и использовался мною при исследованиях алгоритмов.

Зачем вообще переносить?

Private static byte Limit(double x) { if (x < 0) return 0; if (x > 255) return 255; return (byte)x; }

Добавление таких проверок и преобразование типов замедляет наш код. Версия с адресной арифметикой на double-массивах исполняется уже 0.713 сек (на 100 преобразований). Но на фоне «наивного» варианта – она просто молния.

А если нужно быстрее?

Update 2013-10-08:
По предложению комментаторов, добавил в код вариант переноса данных в массив с помощью Marshal.Copy(). Это сделано чисто с тестовыми целями - у такого способа работы есть свои ограничения:

• Порядок данных точно такой же, как и в оригинальном Bitmap. Т.е., компоненты перемешаны. Если мы хотим их отделить друг от друга - нужно будет все-равно проходиться циклом по массиву, копируя данные.
• Тип у яркости остается byte, в то же время, часто бывает удобно промежуточные вычисления выполнять с плавающей запятой.
• Marshal.Copy() работает с одномерными массивами. Да, они конечно самые быстрые и не очень сложно везде писать rgb, но все-таки...

С каждым годом поисковые системы все жестче закручивают гайки во внешней оптимизации. И все больше внимания уделяют внутренним факторам сайта. Например скорость загрузки вашего сайта тоже влияет на рост ваших позиций в выдаче.

Конечно существует масса способов как ускорить свой сайт, но сегодня мы поговорим только об одном из них — это оптимизация изображений для сайта. Нет это не пресловутые метатеги — ALT и TITLE, речь пойдет о технических моментах.

В свое время я даже не задумывался о том, что можно как то оптимизировать изображения. Да и зачем? Ведь широкополосный, безлимитный, картинки с сайтов грузятся моментально. Что даст уменьшение размера картинки на 20 килобайт? Да ничего!

Но тренд мобильного трафика заставил задуматься над оптимизацией. Если посмотреть на график роста мобильного трафика, то по статистике, за 2014 год в интернет с мобильных девайсов входил каждый 3 человек. А это означает, что все больше людей будут посещать сайты и блоги с гаджетов.

А как известно, скорость мобильного интернета — та еще сказка. И если на вашем сайте имеются тяжелые изображения, то пользователь может вовсе не дождаться загрузки вашего сайта. Поэтому сейчас, тема оптимизации изображений для сайта весьма актуальна.

Я перед каждой своей публикацией занимаюсь оптимизацией, и поверьте, общий вес всех картинок уменьшается до 60% без потери их качества. Так что давайте взглянем на инструменты которыми я пользуюсь.

Инструменты для оптимизации изображений на сайте.

Самый распространенный и самый доступный для многих — это Photoshop. Скорее всего если вы блогер, вебмастер или человек тесно связанный с публикациями статей на своих сайтах, то данный софт у вас установлен.

Для оптимизации изображения в Photoshop, вам необходимо провести ряд несложных манипуляций. Заходите в меню Файл -> Сохранить для Web.

После чего видим окно с двумя вариантами изображений.

Верхнее — это изображение оригинал, нижнее — это то, что мы получим после обработки.

А теперь я вам покажу фокус. Смотрите на изображения и на стрелки на них.

Первая картинка — это сохранение при 100% качестве. Ее вес уменьшился на 85%.

Вторая картинка — это сохранение при 70% качестве. Ее вес уменьшился на 95%, при этом изображения выглядят идентичными.

А теперь представьте сколько времени пришлось бы потратить пользователю на загрузку картинки размером в 2 мегабайта, на мобильном устройстве. А если таких изображений в статье 5–10 штук? Вот почему важно оптимизировать изображения для сайта.

Но Photoshop инструмент не идеальный в вопросе массовой оптимизации изображений. Поэтому давайте переключимся на более специализированный софт.

PictureBeaver — друг для windows пользователя.

Я уже давненько перешел на MacOS и Windows использую в редких случаях. В основном это для сбора семантического ядра с помощью KeyCollector. Поэтому пришлось немножко потрудиться, чтобы найти действительно стоящую программу для оптимизации изображений. И чтобы она работала на Windows.

Как оказалось, есть замечательная программа PictureBeaver , которая не прихотливая к ресурсам, и работает на удивление быстро.

С программой работать очень просто. Открываете папку со скачанным скриптом, и перетаскиваете все изображения которые планируете оптимизировать, на файл optimize.wsf

После обработки изображений, появится папка с оптимизированными картинками, и файл отчета по каждой из них.

ImageOptim — друг яблоководов.

С данным софтом для MacOS проблем нет. Это связано в первую очередь с тем, что технику apple больше всего любили и любят дизайнеры. А они то уж любят поиграться с изображениями. Поэтому найти нужный софт не составит у вас труда.

Я же свой выбор остановил на бесплатной утилите ImageOptim , так как с основной задачей она справляется на ура. А это — массовая оптимизация изображений для сайта.

Принцип ее работы отличается от PictureBeaver. Она не создает никаких новых папок с готовыми изображениями. Она просто заменяет оригиналы оптимизированными изображениями.

Выглядит она вот так:

Окно куда необходимо перетащить изображение.

Окно после оптимизации.

Как видите, программе удалось уменьшить общий вес на 24,8%

Первое изображение было уже оптимизировано в фотошопе. Второе нет.

P.S. Мобильный интернет растет, так что задумайтесь об удобстве для своих пользователей.