Как оптимизировать ваши веб-изображения

Пожелайте, чтобы ваши клиенты перестали спрашивать: «Почему у меня такая плохая скорость страницы?». Эти простые шаги гарантируют, что вы создадите высококачественные изображения без слишком большого размера.

Проблема

Итак, вы только что создали свой новый сайт и оптимизировали все возможное, включая пользовательские размеры изображений, а затем передаете его пользователю. Через две недели вы получите: «Почему у меня такая низкая скорость загрузки страниц?» или "Почему страница так долго загружается?" вопросов. Вы заходите на сайт и обнаруживаете, что изображения огромные! Я уверен, что каждый разработчик был в этой позиции раньше. С этим трудно справиться в нынешнем климате изображений с высоким разрешением, которые поступают с цифровых зеркальных фотокамер, телефонов и дисплеев Retina, но, надеюсь, в этом посте будут рассмотрены несколько очень простых вещей, которые вы можете использовать, чтобы избежать некоторых из этих проблем. В конечном итоге даже одно изображение большого размера может серьезно снизить рейтинг скорости вашей страницы.

Идеальная мировая ситуация

Перед началом сборки веб-сайта поговорите со своим дизайнером, чтобы убедиться, что все изображения в дизайне соответствуют стандартному соотношению сторон изображения. Обрезка изображения не должна стать проблемой, если вы соответствующим образом установите собственные размеры изображения. Попробуйте использовать 3: 2, 4: 3 или 16: 9, так как это стандартные соотношения сторон камеры. Если это невозможно, и вы будете использовать изображения с текущего действующего сайта для перестройки, то проверьте, каковы соотношения сторон, и разработайте соответствующий дизайн, чтобы включить их, или вы столкнетесь с некоторыми проблемами в не столь отдаленном будущее.

Ограничить размер загружаемого файла

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

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

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

Вы могли бы подумать, что установки максимального размера загрузки будет достаточно, не так ли? К сожалению, это не так, это не помешает клиенту загрузить изображение размером 500 КБ, которое имеет размер всего 100 пикселей x 100 пикселей, а также не удалит (мета) данные EXIF ​​из файла. Поэтому нам придется реализовать еще один уровень проверки.

Оптимизировать изображения

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

Плагины

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

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

Опять же, их много, но TinyPNG - один из самых простых доступных вариантов: загрузите файл и загрузите сжатую версию. TinyPNG удаляет все данные EXIF.

Все еще недостаточно?

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

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

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

Обучайте своих пользователей

Возможные решения для пользователя

Это ни в коем случае не идеальный способ сделать что-то, но он должен помочь всем участникам и уменьшить размер файлов изображений:

Знайте свои типы файлов

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

• Фотография с людьми, пейзажами и т. Д. = JPG
• Вырез с изображением человека или продукта, который перекрывает что-то еще, чего нет на фоне изображения = PNG
• Инфографика или значок = GIF или PNG.

Если вы думаете о загрузке чего-либо еще, например, TIF, PSD или AI, в качестве файла изображения для вашего веб-сайта, тогда ОСТАНОВИТЕСЬ.

Обычный сценарий случая

Программное обеспечение

• ОС Windows с использованием Microsoft Paint

Изображение

• Разверните браузер так, чтобы вы могли видеть наибольший размер области просмотра, в которой используется изображение. Используйте инструмент Windows для определения фактического размера изображения в пикселях.
• Создайте новый холст / документ в MS Paint на основе размеров ножничного инструмента.
• Поместите новое изображение в новый холст
• Нужен ли изображению прозрачный фон?
• Да ? Сохранить как GIF или PNG
• Нет ? Сохранить как JPG
• Используйте TinyPNG для сжатия изображения
• Загрузите сжатое изображение

Лучший сценарий

Программное обеспечение

• Любая ОС с использованием Photoshop

Изображение

• Разверните браузер так, чтобы вы могли видеть наибольший размер области просмотра, в которой используется изображение. Используйте инструмент захвата экрана (инструмент Mac), чтобы определить фактический размер изображения в пикселях.
• Создайте новый холст / документ в Photoshop на основе размеров ножничного инструмента.
• Поместите новое изображение в новый холст
• Выберите "Сохранить для Интернета"
• Убедитесь, что вы просматриваете изображение на 100%
• Нужен ли изображению прозрачный фон?
• Да ? В раскрывающемся списке выберите GIF, PNG8 или PNG24 (при этом вы увидите, как изменится качество изображения и размер файла).
• Нет ? В раскрывающемся списке выберите JPG
• Измените различные настройки, зависящие от формата изображения, пока не получите хорошее соотношение качества и размера изображения
• Выберите раскрывающийся список метаданных и не выберите ничего
• Сохраните, затем загрузите на свой сайт

Заключение

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

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

Если вам нужна помощь в веб-разработке, не стесняйтесь обращаться к нам.