Question

Как оптимизировать изображения для сайта?

С помощью какого инструмента (программы или онлайн сервиса) можно оптимизировать изображения для сайта?

Что можно сделать с изображениями, чтобы они быстро загружались на сайте?

Как уменьшить размер изображений (картинок) для их быстрого отображения на сайте?

Как уменьшить размер изображений (фото) для быстрой загрузки сайта?

Answer 1

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

Уменьшить размеры можно и в пейнте (в два захода), но лучше воспользоваться чем-нибудь помощнее. Если не фотошопом, то ACDSee или XnView.

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

Идём дальше. Какой формат использовать? Уж не bmp точно. Какие-то кнопочки, иконки, элементы дизайна с прозрачными деталями стоит сохранить в формате png, уменьшив палитру до реально используемой и тем самым ещё снизив объёмы файлов. Нужны иллюстрации в jpeg? Не мешает поиграть со степенью сжатия (потерей качества).

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

Answer 2

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

Когда я работал над сайтом фотогалереи, столкнулься также с проблемой что нужно было показывать людям фотки весом под 15-20мб каждую, так как это был профессиональный фотоапарат. Что же делать в таком случае? А в таком случае всё очень просто, создаються Thumbnails.

К примеру, ВК при загрузке файла создаёт 4 Thumbnails. Все в разных размерах и предназначены для разных случаев.

Допустим у вас сайт, при заходе на сайт у вас открывается меню страница с новостями или товарами, эти товары имеют картинку и получается в ряд 4 товара. То есть ширина каждой картинке, при средней шириной экрана в 1280пх, приблезительно 300пх, укардём 20пх на падинги и маргины от каждой фотографии.

Суть в том, чтобы при загрузке товара на сайт, загружалась оригинальная фотография, допустим в 4000х4000пх. Однако эту фотографию нужно взять и спрятать в отдельную папочку и вывести ссылку на эту фотографию, а не саму фотографию. Далее мы говорим нашему серверному языку, я делал на ПХП, что бы он взял эту картинку и создал 2 тумбнейла, 1 размером 300х300, второй 1200х1200. Первый будет использоваться на главной, второй будет использоваться на странице для этой фотографии, а снизу ссылка на оригинал в 4000х4000пх, либо сама картинка в 1200х1200 будет работать как ссылка на 4000х4000пх.

ПХП довольно таки мощный язык для работы с фотографиями, вам нужно будет создать форму на хтмл, которая будет загружать фотографию, пхп будет её обробатывать и сохранять в 3 разные папки под одинаковым именем. В базе данных вы привяжете имя к одному айди и покажите путь к ним.

Для вывода вы будете обращаться к базе данных, по айди фотографии. Вот и всё =)

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

Дополнение:

Если не хотите добавлять фотографию черех ХТМЛ, то можете просто загружать на ваш сервер в какуето папочку фотографии, ну и создать функцию которая будет проверять данную папку на новые файлы и в случае нового файла, запускать работу другой функции которая занесёт новые данные в базу данных и выведет как результат новые фотографии к вам на страницу.

Answer 3

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

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

Еще можно уменьшать фото в обычном пейнте.