ГлавнаяОптимизацияPhp оптимизация изображений

Оптимизация изображений на крупных проектах. Php оптимизация изображений


Оптимизация картинок в Web

Картинки могут занимать до 90% от общего объема данных на странице. Их правильная оптимизация может значительно повлиять на скорость работы сайта.

Как оптимизировать картинки?

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

Форматы

Правильный выбор формата изображений позволит получить хорошее качество изображения при минимальном размере. Вам стоит использовать JPEG для фотографий и PNG для иконок.

Инструменты

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

imagemagick

Современные камеры обычно записывают в JPEG фотки кучу метаданных (геолокацию, превью и т.п.). Если их вырезать, можно иногда сэкономить несколько десятков килобайт. Convert от imagemagick содержит полезный параметр "-strip" для вырезания всех ненужных метаданных из JPEG изображения:

convert test.jpg -resize 100x100 -strip test_100.jpg

Jpegtran

Jpegtran позволяет вырезать метаданные и провести lossless оптимизацию JPEG:

jpegtran -copy none -optimize -outfile min.image.jpg image.jpg

Jpegoptim

Еще одна полезная утилита jpegoptim для оптимизации JPEG:

jpegoptim file.jpg

Optipng

Инструмент для оптимизации PNG картинок optipng работает так:

optipng test.png

Pngcrush

Pngcrush работает так:

pngcrush -reduce -brute in.png out.png

Самое важное

Обязательно используйте инструменты сжатия картинок без потери качества. Это требует минутных затрат, но может уменьшить размеры изображений в несколько раз. Из инструментов лучше всего использовать Pngcrush и Jpegtran.

#png #jpg #картинки ID: 91

ruhighload.com

Ускорение сайтов на PHP просто и эффективно

Скорость загрузки сайта на PHP - важный критерий успешности сайта. В первую очередь ускорение сайта автоматически увеличивает конверсию. А это прямым образом помогает улучшить главные бизнес-задачи сайта - генерировать больше лидов и больше продаж.

Ускорьте PHP и увеличьте конверсию до 30%

Проведенные исследования показывают, что при ускорении сайта всего лишь на 100 миллисекунд уровень конверсии увеличивается на 5%. На десктопных устройствах - на 2,4%, а на мобильных устройствах – на 7,1%.

Ускорение на 1 секунду увеличивает конверсию на 20%.

Ускорение на 2 секунды увеличивает конверсию на 30%.

Улучшите позиции в ТОП-е за счет ускорения PHP

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

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

Оптимизация изображений - наиболее простой и эффективный способ ускорить PHP

За счет оптимизации изображений можно значительно уменьшить суммарный объем данных (в байтах), загружаемых на странице. К примеру, вместо 20 МБ суммарный размер страницы уменьшается до 2 МБ. Страница объемом 2 МБ загрузятся гораздо быстрее, чем прежняя версия страницы объемом 20 МБ. За счет этого и происходит ускорение загрузки PHP.

OptiPic.io - самым простой способ оптимизировать изображения в PHP

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

Пожалуйста, подождите. Выполняется анализ сайта.

Скоро вы будете перенаправлены на страницу с результатами проверки.

optipic.io

Оптимизация изображений на крупных проектах

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

На сайте, как правило, мы используем несколько размеров картинок: определенный размер в каталог, определенный размер на страницу товара, определенный размер при увеличенном просмотре картинки товара и так далее. И какая бы картинка не попадала на сайт, пусть даже 10Мб, мы всегда показываем ее на сайте в нужном размере, чтобы сделать страницу легкой и быстрой для пользователя.

На стандартных, не особо крупных проектах, превью картинок создаются в момент загрузки файла или при обращении к нему. Картинки кладутся в кэш и все последующие разы отдается уже из кэша.Звучит все правильно, подходит для большинства решений и это умеют делать почти все фреймворки и CMS на сегодняшний день.Так делаем и мы. В основе разработки мы используем фреймворк Laravel и для него есть решения, которые с этим отлично справляются.

Но при росте одного из проектов мы столкнулись со следующими проблемами:

Ниже рассказываем о том, как мы решили эти проблемы. Заодно попутно удовлетворили google page speed test, который постоянно просит уменьшить размер картинок.

Выбор архитектуры

Сперва выбираем архитектуру, с помощью будем ресайзить и отдавать картинки.

Мы сравнили несколько способов и провели нагрузочное тестирование. С помощью утилиты wrk организовали нагрузку на сервер, который отдаёт картинки, в течении 10 секунд с 15 параллельными подключениями.

1. Самый популярный способ. Ресайзим картинки на PHP, PHP проверяет есть ли картинки в кэше и, если есть, отдает, если нет - ресайзит на лету.

В итоге 106 ответов в секунду, каждый из которых в среднем отдавался через 140 мс.

2. Пробуем ресайзить картинки в реальном времени с помощью одной из библиотек NodeJS.

Количество запросов и время отклика улучшилось почти в 3 раза: 283 ответа в секунду и каждый ответ в среднем 52мс.

3. К ресайзу картинок на NodeJS добавляем кэширование силами nginx. Т.е. nginx кладет к себе в кэш картинку и при последующем обращении отдает ее из кэша, не дергая NodeJS

Приведем результаты к сравнительной таблице:

Оптимальный вариант очевиден, выбираем последний способ.
php + cache на php nodejs в реальном времени nodejs + кэш на nginx
Среднее время ответа 140мс 52мс 7мс
Запросов в секунду 107 283 117000
Передано данных в секунду 22Кб 4.4Мб 1.6Гб

Описание технической стороны реализации

Nginx обрабатывает все запросы к картинкам. В случае, если на сервере уже есть миниатюра - отдаем из кэша nginx, если нет - запрос проксируется на nodejs. В настройках nginx это выглядит следующим образом:

proxy_cache_path /cache/imgproxy levels=1:2 keys_zone=imgproxy:50m max_size=50g inactive=30d use_temp_path=off;server { location ~ ^/images/products/(?<id>\d+)/(?<type>.+)/(?<img>.+) { add_header X-Cache $upstream_cache_status; proxy_cache imgproxy; proxy_cache_valid 200 30d; proxy_pass http://127.0.0.1:1337/$type/products/$id/original/$img; access_log off; allow all; expires 1M; add_header Cache-Control "public"; } }

Т.е. все запросы к картинкам по адресу /images/products/71481/211/0.jpg будут обрабатываться нашим механизмом. Где:

В настройках nginx установлен максимальный размер кэша в 50Гб и срок хранения 30 дней. Часть, которая отвечает за ресайз картинок, реализованная на  NodeJS мы выложили на github: https://github.com/websecret/imgproxy.

Отметим, что сервер всегда отдает 200 ответ и указывает время истечения кэша, expires. Таким образом, при загрузке страницы, браузер клиента вообще не обращается к серверу для загрузки картинки, а сразу берет ее из кэша браузера. Ранее, в случае 304 ответа - этот ответа отдавался сервером, тем самым немного увеличивая время загрузки.

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

Мы будем использоваться https://github.com/lovell/sharp, так как она показала лучшие результаты тестов по скорости обработки картинок и конечному соотношению.

Для сравнения приводим пример двух картинок, которые ресайзились раньше с помощью Imagick, а теперь с помощью  https://github.com/lovell/sharp.

Imagick Sharp
Размер 20Кб Размер 8Кб
Размер 20Кб Размер 8Кб

Да, при использовании библиотеки Sharp мы уменьшили качество картинок со 100% до 95%, но для картинок такого размера разница не видна, а по размеру картинка разница очень существенная. В итоге размеры картинок уменьшились более, чем в два раза.

Для оценки результатов, как наши преобразования повлияли для посетителя сайта, сравним в консоли браузера (сперва старый способ, затем - наш новый новый механизм):

websecret.by

Оптимизация изображений.

«Оптимизация изображений» – двенадцатый урок учебника JavaScript. В этом уроке мы будем говорить про оптимизацию изображений. Оптимизация изображений актуальна не только для увеличения скорости загрузки сайта или его продвижения, но также и в целях упрощения программирования изображений в JS.

Оптимизация отображения графики

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

Причиной низкой производительности страницы могут быть:

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

Оптимизация при загрузке

Оптимизация изображений при загрузке – прописная истина HTML верстальщика. Обязательно задавайте для всех изображений на ваших страницах фиксированные значения ширины width и высоты height.

Если объяснять более подробно, то браузер при загрузке документа первым делом загружает текст и служебную информацию о странице (содержимое HEAD). Далее идет предварительная загрузка информации обо всех объектах, расположенных на странице (таких, как ширина и высота изображений). Параллельно с этими процессами начинается предварительное построение каркаса страницы. И лишь в последнюю очередь подгружаются скрипты и изображения.

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

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

Предварительная загрузка

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

На главной странице вашего сайта создается отдельный JS объект, который будет содержать изображения с других страниц вашего сайта. Далее в этот объект вы начинаете запихивать все самые объемные и долго загружающиеся изображения присутствующие на сайте в целом. Например:

window.document.i[0].src=’images/img1.gif’;

В нашем примере мы загружаем в массив i изображение с соответствующем ему адресом.

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

Нарезка картинок

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

Единственной проблемой этого способа может стать сам браузер. В алгоритме работы HTML парсера любого браузера заложен перенос объекта на новую строку при переполнении горизонтального пространства, отведенного для этого объекта. Представьте, что может произойти с изображением, если одну или несколько его частей будут перенесены на новую строку.

Но тут нам на помощь приходит CSS с его свойством overflow.

***

Напоследок хочу сказать, что грамотная нарезка изображений позволяет делать впечатляющей красоты меню навигации без какого либо использования Flash технологии. Для этого одно большое изображение режется на несколько горизонтальных или вертикальных частей. Дополнительно подготавливаются изображения с аналогичными размерами и изображения с произвольными размерами. Далее путем использования несложных скриптов (таких как обработчикиonMouseOver и onMouseOut) и технологии CSS получается очень красивое JS меню с выпадающими списками.

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

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

В следующем уроке мы с вами поговорим о работе с формами в JS. Работа с формами – конек этого языка программирования. Урок получился очень большим и потому был разбит на несколько частей.

Перед тем, как перейти к изучению форм предлагаю вам повторить основы языка программирования JavaScript.

www.eltisbook.ru

Оптимизация картинок средствами php

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

И вот избежания в дальнейшем неприятных споров что "-я вам говорил а вы меня как обычно не слушали что надо делать", "-вы обещали хотя бы 90 а получилось почему то 15".

Задался вопросом базового сжимания качества картинок то есть человек загрузил поставил куда надо на сайт а php уже все сам сделал. Так как работаю с WP не находил способов (да и думаю что это будет костыль) как при загрузке сразу сжимать картинки (так как даже базовые миниатюры типа thumb гугл все равно просить сжимать хоть и на 1-2 кб и падает оценка на 20-30 если таких файлов больше 10) и тем более при обновлении оболочки такой костыль слетит (клиент всегда хочет самую свежую версию хоть и не всегда она работает стабильно).

Плагины вообще не подходят так как самое главное клиент вообще не хочет видеть их на сайте, большая часть таких проектов полностью ручные либо половина платна+не работает, другая половина просто не работает так как бесплатная.

Есть ли способ при получении картинки то есть get_the_post_thumbnail_url(null, 'thumbnail') взять из нее картинку(в данном случае url!!это важно) сжать его хотя бы на 20-30% и перезаписать и это все должно происходить средствами php

Перепробовал уже с 10 разных оптимизаторов начиная от базовых типа http://php.net/manual/ru/function.imagejpeg.php заканчивая самопальными кодами типа https://github.com/psliwa/image-optimizer

Все оно не работает, либо работает на выгрузке файла на сервер либо на перезаписи в данную папку с похожим именем, но ни один не работает так что бы именно взять файл $img = get_the_post_thumbnail_url(null, 'thumbnail') передать его в обработчик с параметром и получить уже готовый файл $opz = optimizer($img,75)

Вообще уже не знаю куда копать с такой инфой так как примеров просто 0 или они все не рабочие. Буду очень благодарен за ответ на данный вопрос! и с меня +

hostciti.net

Как избежать оптимизации изображений, которые уже оптимизированы с помощью PHP?

В настоящее время я работаю над приложением PHP, которое запускается из командной строки для оптимизации папки изображений.

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

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

imagemagick определить тип файла и конвертировать неанимированный GIF-х в детские gifsicle оптимизировать анимированных GIF изображения jpegtran оптимизировать JPG изображения pngcrush оптимизировать PNG изображения pngquant оптимизировать PNG изображений в png8 Отформатируйте pngout оптимизировать PNG изображений в формат png8

Моей проблема: С 1-10 изображений, все проходит гладко и довольно быстро, однако, когда я бег на более крупная папка с 10 или более изображениями, она становится очень медленной. Я действительно не вижу в этом хорошего решения, но одна вещь, которая поможет избежать переработка изображений, которые уже были оптимизированы. Поэтому, если у меня есть папка со 100 изображениями, и я оптимизирую эту папку, а затем добавлю 5 новых изображений, запустите оптимизатор. Затем он должен оптимизировать 105 изображений, моя цель состоит в том, чтобы он только оптимизировал 5 новых изображений, поскольку предыдущие 100 были бы уже оптимизированы. Это само по себе значительно улучшит производительность при добавлении новых изображений в папку изображений.

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

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

Так что, пожалуйста, если вы можете придумать достойное/хорошее решение этой проблемы, пожалуйста, поделитесь?

stackoverrun.com

/Оптимизация php

  • Анализ и оптимизация времени TTFB

    Как улучшить время получения первого байта и отзывчивость веб-сервера

    #Браузерная #Оптимизация #nginx #php #gzip

  • Оптимизация PHP

    Улучшение производительности PHP приложений

    #Серверная #Приложение #php

  • Оптимизация изображений с WebP

    Уменьшение размера картинок при сохранении качества

    #Браузерная #Оптимизация #webp #nginx #изображения #оптимизация

  • Профилирование PHP с XHprof

    Анализ медленных PHP скриптов с помощью XHprof

    #Серверная #Приложение #php #профилирование #xhprof

  • Оптимизация сервера на Ubuntu

    Улучшение производительности Web сервера на Ubuntu

    #Серверная #Операционные системы #ubuntu #оптимизация #ipv6 #swap

  • Cache-control с динамикой

    Как использовать Cache-control c изменяемыми файлами

    #Браузерная #Оптимизация #nginx #php #cache-control

  • Кэширование статики и cache-control

    Как и зачем используется заголовок Cache-control

    #Браузерная #Оптимизация #cache-control #apache #nginx

  • Кеширование с HTTP Etag

    Что такое Etag и как его настроить в Nginx

    #Браузерная #Оптимизация #cache-control #nginx

  • Минификация js/css/html

    Что такое minify и как его использовать

    #Браузерная #Оптимизация #minify #js #css #html

  • Архитектура высоких нагрузок

    Архитектурные принципы высоконагруженных приложений

    #Масштабирование #Архитектурные решения #nginx #php #load balancing

  • MySQL Handlersocket

    Повышение скорости работы запросов с MySQL Handlersocket

    #Серверная #Базы данных #mysql #оптимизация

  • Оптимизация Wordpress

    Чеклист по максимальному ускорению Wordpress

    #wordpress #чеклисты

  • 9 шагов по оптимизации YII

    Ускорение PHP приложений на платформе YII в несколько раз

    #Инструменты #Скорость приложения #yii

  • Клиентская оптимизация

    Методы оптимизации сайтов на стороне браузеров

    #Браузерная #Основы #css #js

  • Оптимизация настроек Redis

    Рекомендации по настройке Redis для оптимизации ресурсов и повышения стабильности на производственном сервере

    #Серверная #Базы данных #redis #tuning

  • Как оптимизировать картинки в Wordpress?

    #Вопросы #wordpress #jpg #png #картинки

  • Scaling приложения на Python/Django

    Методы улучшения производительности веб-приложения для высоконагруженных проектов на Django

    #Масштабирование #Архитектурные решения #python #django #nginx #varnish

  • Кэширование динамики с SSI

    Кэширование динамических страниц с помощью SSI

    #Серверная #Web сервер #memcached #nginx #ssi

  • Как настроить Nginx для Wordpress?

    #Вопросы #nginx #wordpress

  • Ошибка 504 Gateway Timeout в Nginx

    Причины и методы исправления ошибки Gateway Timeout, Nginx

    #Вопросы #nginx #ошибки

  • Распределенный кеш на основе Nginx и proxy_cache

    Как построить мини CDN на основе распределенного Nginx кеша

    #Масштабирование #Балансировка #nginx #cdn

  • Google PageSpeed для анализа скорости сайта

    Анализ скорости сайта с помощью Google Pagespeed

    #Браузерная #Анализ производительности #профилирование #pagespeed

  • Логирование в MySQL

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

    #Серверная #Базы данных #mysql #логирование

  • Асинхронность в приложениях

    Асинхронные задачи для оптимизации скорости сайта

    #Серверная #Приложение

  • Lazy loading ресурсов

    5 методик использования lazy loading для оптимизации

    #Серверная #Приложение

  • lzf_optimized_for / PHP

    int lzf_optimized_for ( void )lzf_optimized_for — Определяет режим оптимизации ...

    #php

    • ruhighload.com

    Prostoy-Site | Все права защищены © 2018 | Карта сайта