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

Вероятно, начальный шаг требует больше планирования, чем в Photoshop.

1) Нужен ли мне файл изображения? Или я могу использовать что-то еще

• Фоновый цвет.
• CSS-градиент.

2) Нужны ли мне эти размеры файла? или я могу использовать

• Увеличено нижнее измерение.
• Низкое разрешение чем-то маскировать? узор над ним, размытие, затемнение.
• Шаблон.
• Действительно ли изображение стоит того, чтобы иметь его в высоком разрешении?

3) Правильный ли формат файла?

Он не высечен в камне, но:

• jpg для фотографии.
• Png для простых цветов или градиентов. Логотипы, графики.
• Изображения SVG для масштабируемых изображений, однотонные цвета, градиенты.

4) Могу ли я использовать альтернативу для анимации?

• Анимированные GIF-файлы с оптимизированными палитрами и дизерингом.
• CSS-анимации.

5) Подготовил ли я правильный медиа-запрос, который мне нужен для экранного устройства?

• Нужен ли мне этот размер на этом устройстве?

6) Здесь вступает в действие конкретное сжатие jpg

Для фотографии. Определив реальный размер, который мне нужен:

• Действительно ли имеет значение, если я вижу некоторые артефакты сжатия. Могу ли я нажать еще немного? Стоит ли оно того?
• Нужно ли включать цветовой профиль на каждую фотографию?

Вот "психологическая" проблема. При сохранении для Интернета вы избегаете использовать качество 25 только потому, что оно говорит «Низкое», а вы хотите, чтобы ваш сайт был высокого качества?

7) И немного конкретики

• Прогрессивный jpg занимает немного больше места, чем непрогрессивный.
• Включите оптимизацию jpg.
• Отключите любой параметр размытия.
• Алгоритмы 4:4:4 обеспечивают лучшее качество, но меньшее сжатие при более высоком качестве. 4:2:2 сжимает лучше.
• Обязательно используйте файлы rgb, а не cmyk.
• Подготовьте свои файлы с настройками цвета на «веб-сайте». Таким образом, вы можете отказаться от цветового профиля.

Инструмент оптимизации всегда, всегда подскажет, как сделать лучше.

Какой параметр может использовать алгоритм, чтобы сказать. О, портрет, который вы показываете на своем веб-сайте, имеет правильную степень сжатия «без потерь»?

Опять таки. "Потери" здесь не имеют значения.

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

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

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

Некоторые из инструментов, которые я нашел, включают:

• Compressor.io — очень мало настраиваемых опций, но довольно впечатляющие результаты (у меня в среднем 60–80% уменьшения размера файла)
• ImageOptimizer.net — выглядит стандартно
• tinyPNG - лично использовал с хорошими результатами (возможность конвертировать 24/32-битный PNG с альфа-каналом в 8-битный PNG с сохранением прозрачности)

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

Вероятно, вы сможете найти гораздо больше бесплатных онлайн- и офлайн-инструментов, комбинируя такие ключевые слова, как reduce image file size, image compression, PNG / JPEG / GIF optimisation tools.

По моему опыту, если вы возьмете процедуру «Сохранение для Интернета» из Photoshop, это оптимизирует изображение для Интернета. Несмотря на это, вы по-прежнему будете видеть оповещения об оптимизации при тестировании скорости страницы, но просто посмотрите, сколько килобайт оптимизации вы достигнете. В большинстве случаев это около 1~5кб. Я согласен со Скоттом в том, что вам не следует зацикливаться на скорости страницы.

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

Другим вариантом является использование программного обеспечения для оптимизации рабочего стола, такого как http://www.jpegmini.com/ , которое имеет хорошее соотношение сжатия к качеству и имеет пакетную обработку.

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

Если вы являетесь пользователем Wordpress, вы также можете воспользоваться Optimus Image Optimizer (отказ от ответственности: я работаю в компании, создавшей плагин) для сжатия изображений без потерь. Тем не менее, большим отличием этого плагина от других является его способность конвертировать изображения в формат WebP, который, как известно, уменьшает размер файла до 26% по сравнению с PNG.

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

Это тоже стоит посмотреть...

https://developers.google.com/speed/pagespeed/

Раньше я использовал PageSpeed.

Он проверит загрузку страниц с вашего сайта и предложит полезные советы по ускорению загрузки.

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

На Mac - использую ImageOptim... очень нравятся результаты.

https://imageoptim.com

PS: спамить не собираюсь. :-D