Подготовка рисунков для размещения на страницах блога.
+Видео
В этой статье я хочу рассказать о том, как подготовить рисунки и фотографии для размещения на страницах сайта (блога). Как подготовить Тизер статьи. Какие форматы допустимы для изображений размещаемых внутри статьи. Чем опасны изображения с высоким разрешением для Вашего блога.
***
Некоторые начинающие блогеры считают, что чем более качественным будет рисунок, загружаемый ими на странице блога тем лучше.
Поспешу Вас огорчить, это утверждение справедливо лишь до некоторого предела. Как только Вы переступите через некоторую планку, качество изображения перестанет играть хоть какую-либо значимую роль в восприятии изображения на экране монитора.
Но при этом начнёт излишне занимать память устройства пользователя и увеличивать время загрузки страниц вашего блога.
Некоторые блогеры умудряются загрузить такие форматы изображений, что даже мой домашний и совсем не хилый компьютер, при довольно скоростном интернете открывает их страницы 15-20 секунд.
На самом деле, если процесс загрузки превышает 10 секунд, я ухожу с такого сайта. На нём ведь свет клином не сошёлся.
А что говорить о смартфонах, да при мобильном интернете, да ещё и где-нибудь за городом. У Вас такие посетители просто отпадут. Вы сами сознательно уменьшите свою аудиторию.
Хочу сразу попросить прощения у тех кто откроет эту статью на мобильном устройстве, здесь я позволил себе такую вольность в связи со спецификой статьи.
На самом деле высокое качество изображения, которое Вы разместите в своей статье, никто не оценит. Ну не будет же Ваш читатель делать с него плакат во всю стену квартиры.
Для примера приведу две картинки сделанных с одного снимка.
На верхней картинке формат снимка 4000х2660, 300пикс/дюйм. Сохранён в Фотошопе с качеством 10. Объём файла 2,27МБ.
На нижней картинке тот же снимок сохранён в формате 1417х943, 300пикс/дюйм, с качеством 6. Объём файла 212кБ.
Размер файла у верхнего рисунка в десять раз больше чем у нижнего, а значит и загружаться он будет в десять раз дольше.
То есть если качество связи не очень хорошее и на загрузку нижнего рисунка требуется 2 секунды, то на загрузку верхнего нужно более 20 секунд.
Лично я прервал бы соединение.
Попробуйте щёлкнуть на картинках левой клавишей мыши, изображения откроются в большом формате, не забудьте потом вверху слева, нажать на стрелочку «Назад», чтобы вернуться обратно к чтению статьи.
И чего там, в верхнем изображении такого ради чего стоит рискнуть потерей читателя?
Единственная разница, которая видна на глаз это то, что нижнее изображение несколько светлее, но, по-моему, картинка от этого только выиграла. Хотя если кому неймётся, тот может там же, в Фотошопе понизить яркость до прежнего уровня.
В прилагаемом к статье видео покажу как в Фотошопе изменять формат изображения, вносить дизайнерские искажения, изменять яркость, контрастность и резкость.
Я буду показывать на примере Adobe Photoshop CC 2018, пробовал проделать те же фокусы в Adobe Photoshop CS3, не получилось. Сами понимаете — простое просто работает. Нет, с ним тоже конечно можно работать, но нет такого набора функций.
Ещё в этом видео расскажу, как подготовить Тизеры. Тизер в переводе с английского — дразнилка, завлекалка. То есть это тот рисунок, который помещается в заголовок статьи.
Что касается тизера, то его параметры должны быть таковы: размер 1200х675 пикселей, разрешение 300 пикселей/дюйм, качество при сохранении – 8.
Всё остальное Вы узнаете, просмотрев видео.
Если видео не воспроизводится, то дело в вашем браузере. Решение проблемы для Яндекс Браузера здесь: https://lumpics.ru/does-not-work-youtube-in-yandex-browser .
Видео-урок: