Как сжать картинки для блога? (продолжение)

Автор:Дата:Скорость загрузки страниц блога зависит, в том числе, от размера иллюстраций. Как сделать их легче?

древняя китайская монетаВ предыдущей статье мы обсудили, как сделать картинки в нашем блоге более привлекательными для поисковых систем. Для этого нужно прописывать в теге картинки соответствующие атрибуты. Но есть и другой аспект, который можно назвать «внутренней оптимизацией изображений». Ведь скорость загрузки страниц блога – очень важна для удобного и приятного юзабилити. И именно картинки зачастую сильно тормозят процесс загрузки, особенно, если читатель пользуется не особо мощным устройством и не самым быстрым Интернетом…

Так какие параметры изображения можно уменьшить?

Формат изображения

В качестве примера я решила взять изображение древней китайской монеты, которое мы будем всячески видоизменять, чтобы на практике проверить, что и как влияет на размер. Вот оно в «девственном виде»:

Нужно сказать, что изначально его размеры невелики – 250 х 250 пикселей. Часто блоггеры умудряются загружать на сервер фотографии, размером 3 х 2 метра! Браузер мужественно сжимает их в десятки раз, кряхтит… А мы удивляемся, почему страница так долго загружается?!

Формат этой картинки – jpeg – самый удобный и подходящий. Он адекватно представляет даже сложные изображения, немного весит. Кстати, весит эта картинка 65 Кб (килобайт).

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

Но при уменьшении размеров эта разница нивелируется.

Вывод: если для вас не принципиальны эффекты прозрачности фона – используйте файлы в формате jpeg.

Размеры – ширина и высота

Уменьшаем нашу картинку. Теперь ее размеры 100 х 100 пикселей, а весит она 23 Кб – почти в 3 раза меньше!

Кстати, и картинка в png, уменьшенная до 100 х 100 пикселей, весит тоже 23 Кб.

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

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

Разрешение изображения

Сохраняя файлы в формате jpeg, мы можем менять такой параметр, как разрешение или качество (в некоторых программах). Давайте сравним две картинки с разным разрешением визуально:

Слева изображение, сохраненное с максимальным качеством, а справа – разрешение в половину меньше. На глаз разницы особой нет, а вес во втором случае – 39 Кб.

Вывод: уменьшайте разрешение картинок.

Ваш монитор и мониторы читателей не передают тех тончайших нюансов, которые потеряются при этом.

И наконец, самая легкая картинка этой статьи — уменьшенная до размеров 100 х 100 в среднем разрешении. Весит она всего 17 Кб:

Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Введите свой E-MAIL:

     Katyaru 01.06.2012


    
Читайте БлоготеЙ! на Google+
Читайте БлоготеЙ! на Фейсбуке

К записи "Как сжать картинки для блога? (продолжение)" оставлено 16 коммент.

  1. А у меня пару раз пропали картинки, пришлось их заменить.

    [Ответить]

    katyaru отвечает:

    Да, у девочек были такие странные проблемы с пропажей картинок. Сама ни разу не сталкивалась с такой напастью)

    [Ответить]

    Elena отвечает:

    Я тоже не знаю, как картинки могут пропадать. Может хостер виноват. Если сама не удалила, значит картинка просто обязана быть на месте

    [Ответить]

    katyaru отвечает:

    Обсуждали как-то в БлоготекЕ, что исчезали картинки с блога. У Вэлл, по-моему.

    [Ответить]

  2. А ты какой программкой для сжатия пользуешься?

    [Ответить]

    katyaru отвечает:

    Фотошопом — не принимаю полумер))) Я постоянно в нем вишу — глупо было бы пользоваться чем-то еще…

    [Ответить]

  3. А я сжимаю ФастСтоном.. его мне вообще полностью хватает для работы с картинками для блогов.

    [Ответить]

    katyaru отвечает:

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

    [Ответить]

  4. Вот что значит встать ни свет ни заря — вместо «сжать» прочитала «сажать»))))

    [Ответить]

    katyaru отвечает:

    :)

    [Ответить]

  5. Здорово!.. ))) А на блогспоте картинки автоматом уменьшаются до нужного размера?..

    [Ответить]

    katyaru отвечает:

    На сервер они все равно грузятся огромными. Поэтому нужно сразу грузить сжатые и уменьшенные до нужного размера (хотя бы примерно) картинки

    [Ответить]

  6. Я сразу, до загрузки. уменьшаю картинки. Пользуюсь программой, которая есть в виндовс и особо не заморачиваюст.

    [Ответить]

  7. Привет, А как ты уменьшаешь разрешение. Например, у меня на блоге имеет значение размер картитнок, предположим, я делаю 600х450, а вот как сделать меньше разрешение, где его смотреть, чтобы знать?

    [Ответить]

    katyaru отвечает:

    При сохранении (первом сохранении) файла jpeg в фотошопе появляется диалог «качество» — максимальное 12 или меньше. Для Интернета достаточно поставить среднее качество 5. Еще можно менять разрешение в диалоге «размер изображения» про который я пишу в статье. Там есть окошко с разрешением, которое измеряется в пикселях на дюйм (600, 300, 150 и т.д.) — там тоже можно выставить меньшее число…

    [Ответить]

  8. […] уже обсудили вес иллюстраций в блоге и способы оптимизации картинок. Но остается еще один […]


1 − = ноль

Палю тему!
Гугл в помощь
Надо подписаться!

Введите свой E-MAIL:

Delivered by FeedBurner

Дружите с Блоготеем в соцсетях


Смотрите все ВИДЕО Блоготея на YouTube


Blogotey | 


Спутник Блоготея в Tumblr

Наверх