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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Также, читайте на эту тему

Читайте также

Как оптимизировать картинки для блога?

Как оптимизировать картинки для блога?

Недавно мы обсуждали, как важен для блога качественный графический контент. В комментах к статье было ...

Один комментарий

  1. Вячеслав

    Реанимированные комменты

    opera432:
    01.06.2012 в 20:27
    А у меня пару раз пропали картинки, пришлось их заменить.

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

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

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

    ladosha:
    01.06.2012 в 21:35
    А ты какой программкой для сжатия пользуешься?

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

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

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

    Илона:
    02.06.2012 в 11:04
    Вот что значит встать ни свет ни заря — вместо «сжать» прочитала «сажать»))))

    katyaru:
    02.06.2012 в 18:10
    smile

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

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован.