Как сжать картинки для блога? (продолжение)
В предыдущей статье мы обсудили, как сделать картинки в нашем блоге более привлекательными для поисковых систем. Для этого нужно прописывать в теге картинки соответствующие атрибуты. Но есть и другой аспект, который можно назвать «внутренней оптимизацией изображений». Ведь скорость загрузки страниц блога – очень важна для удобного и приятного юзабилити. И именно картинки зачастую сильно тормозят процесс загрузки, особенно, если читатель пользуется не особо мощным устройством и не самым быстрым Интернетом…
Так какие параметры изображения можно уменьшить?
Формат изображения
В качестве примера я решила взять изображение древней китайской монеты, которое мы будем всячески видоизменять, чтобы на практике проверить, что и как влияет на размер. Вот оно в «девственном виде»:
Нужно сказать, что изначально его размеры невелики – 250 х 250 пикселей. Часто блоггеры умудряются загружать на сервер фотографии, размером 3 х 2 метра! Браузер мужественно сжимает их в десятки раз, кряхтит… А мы удивляемся, почему страница так долго загружается?!
Формат этой картинки – jpeg – самый удобный и подходящий. Он адекватно представляет даже сложные изображения, немного весит. Кстати, весит эта картинка 65 Кб (килобайт).
А вот то же изображение, но в формате png и с эффектом тени. Я очень люблю этот формат за его прозрачный фон и возможность добавлять тени, текстуру, выпуклость и проч. Весит такая картинка больше предыдущей — 99 Кб.
Но при уменьшении размеров эта разница нивелируется.
Вывод: если для вас не принципиальны эффекты прозрачности фона – используйте файлы в формате jpeg.
Размеры – ширина и высота
Уменьшаем нашу картинку. Теперь ее размеры 100 х 100 пикселей, а весит она 23 Кб – почти в 3 раза меньше!
Кстати, и картинка в png, уменьшенная до 100 х 100 пикселей, весит тоже 23 Кб.
Как правило, иллюстрации в наших блогах расположены стандартно. Определите, какого размера картинки вам нужны, чтобы успешно проиллюстрировать текст. Например, для поста в Блоготее мне нужны картинки, стремящиеся к квадратным пропорциям, с шириной 350-300 пикселей. Поэтому все изображения я уменьшаю именно до этих размеров.
Вывод: не нужно загружать на сервер картинки, чей размер больше требуемого дизайном страницы.
Разрешение изображения
Сохраняя файлы в формате jpeg, мы можем менять такой параметр, как разрешение или качество (в некоторых программах). Давайте сравним две картинки с разным разрешением визуально:
Слева изображение, сохраненное с максимальным качеством, а справа – разрешение в половину меньше. На глаз разницы особой нет, а вес во втором случае – 39 Кб.
Вывод: уменьшайте разрешение картинок.
Ваш монитор и мониторы читателей не передают тех тончайших нюансов, которые потеряются при этом.
И наконец, самая легкая картинка этой статьи — уменьшенная до размеров 100 х 100 в среднем разрешении. Весит она всего 17 Кб:
| Читайте БлоготеЙ! на Google+ | |
| Читайте БлоготеЙ! на Фейсбуке |
А у меня пару раз пропали картинки, пришлось их заменить.
[Ответить]
katyaru отвечает:
Июнь 1st, 2012 at 21:38
Да, у девочек были такие странные проблемы с пропажей картинок. Сама ни разу не сталкивалась с такой напастью)
[Ответить]
Elena отвечает:
Июнь 2nd, 2012 at 12:32
Я тоже не знаю, как картинки могут пропадать. Может хостер виноват. Если сама не удалила, значит картинка просто обязана быть на месте
[Ответить]
katyaru отвечает:
Июнь 2nd, 2012 at 18:10
Обсуждали как-то в БлоготекЕ, что исчезали картинки с блога. У Вэлл, по-моему.
[Ответить]
А ты какой программкой для сжатия пользуешься?
[Ответить]
katyaru отвечает:
Июнь 1st, 2012 at 21:37
Фотошопом — не принимаю полумер))) Я постоянно в нем вишу — глупо было бы пользоваться чем-то еще…
[Ответить]
А я сжимаю ФастСтоном.. его мне вообще полностью хватает для работы с картинками для блогов.
[Ответить]
katyaru отвечает:
Июнь 2nd, 2012 at 00:18
Я понимаю, что существует куча программ для работы с графикой. Многие пользуются ими. Но я уверена, что хотя бы попробовать пообщаться с фотошопом — нужно. Поэтому я рассказываю именно про этот редактор)
[Ответить]
Вот что значит встать ни свет ни заря — вместо «сжать» прочитала «сажать»))))
[Ответить]
katyaru отвечает:
Июнь 2nd, 2012 at 18:10
[Ответить]
Здорово!.. ))) А на блогспоте картинки автоматом уменьшаются до нужного размера?..
[Ответить]
katyaru отвечает:
Июнь 2nd, 2012 at 19:43
На сервер они все равно грузятся огромными. Поэтому нужно сразу грузить сжатые и уменьшенные до нужного размера (хотя бы примерно) картинки
[Ответить]
Я сразу, до загрузки. уменьшаю картинки. Пользуюсь программой, которая есть в виндовс и особо не заморачиваюст.
[Ответить]
Привет, А как ты уменьшаешь разрешение. Например, у меня на блоге имеет значение размер картитнок, предположим, я делаю 600х450, а вот как сделать меньше разрешение, где его смотреть, чтобы знать?
[Ответить]
katyaru отвечает:
Июнь 3rd, 2012 at 18:28
При сохранении (первом сохранении) файла jpeg в фотошопе появляется диалог «качество» — максимальное 12 или меньше. Для Интернета достаточно поставить среднее качество 5. Еще можно менять разрешение в диалоге «размер изображения» про который я пишу в статье. Там есть окошко с разрешением, которое измеряется в пикселях на дюйм (600, 300, 150 и т.д.) — там тоже можно выставить меньшее число…
[Ответить]
[…] уже обсудили вес иллюстраций в блоге и способы оптимизации картинок. Но остается еще один […]