Как ускорить процесс загрузки изображений на сайте?

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

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

Чтобы при оптимизации изображений достичь наилучших результатов, нужно:

• уменьшить размер и вес изображений. Практически все графические редакторы (Adobe Photoshop и другие) имеют функцию для подобной оптимизации изображений, которая называется Save for the web. По данным ниже ссылкам можно посмотреть, как ею воспользоваться. Также существуют онлайн-сервисы для оптимизации изображений. Например: tools.dynamicdrive.com (англ.) — онлайн-оптимизатор изображений для форматов gif, jpg, png (также, по необходимости, конвертирует из одного формата в другой). Вот большой перечень инструментов для оптимизации изображений — jpegclub.org (англ.);

• правильно выбрать формат изображений. В современном web-дизайне используются три формата оптимизированной пиксельной графики — JPEG, GIF и PNG. Какой из них использовать? Критерий достаточно прост — в каком формате файл займет меньший размер при наименьших визуальных искажениях, в тот и следует конвертировать. Для полноцветных и фотоизображений следует применять JPEG, а для простых, особенно с большими площадями однотонных заливок лучше использовать GIF. Формат PNG лучше чем GIF справляется с оптимизацией изображений больших и средних размеров.

Не стоит забывать забывать и про оптимизацию изображений под поисковые системы (SEO-оптимизация). Здесь нужно придерживаться следующих правил:

• правильно прописать название файла изображения. Название должно описывать то, что представлено на изображении. В качестве разделителя между словами можно использовать дефис. Пример: seo-optimizacija-kartinok.jpg;
• правильно прописать alt-атрибут. Аlt-атрибут как бы объясняет то, что изображено на картинке. В предыдущем примере использовалась запись seo-optimizacija-kartinok.jpg. Хорошим alt-атрибутом такого изображения может быть «Как оптимизировать изображение» или «SEO-оптимизация картинок;
• правильно прописать title-атрибут. В данный атрибут следует поместить описательный текст. Название изображения также отображается при наведении на него курсора мыши. Данный атрибут используется не столько в целях SEO-оптимизации, сколько ради эстетики;
• правильно прописать caption text (заголовок). Данный атрибут также может принести несколько очков. Иногда бывает полезно разместить под изображением его название (описание). Подобный текст подскажет Google, что это изображение действительно подходит под выдачу на определенный запрос.

Источники и дополнительная информация:

• webserg.com — как оптимизировать изображения с помощью Photoshop;
• web-profy.com — оптимизация изображений под поисковые системы;
• jpegclub.org — большой перечень инструментов для оптимизации изображений и не только (на английском языке).