Блог про блоги от Дмитрия Донченко

Сегодня как и обещал, продолжение поста на тему “Оптимизация блога“, опять говорим о картинках.

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

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

Указать размеры картинки в блоге можно несколькими способами:

1. При редактировании кода, к тегу картинки <img … добавляются два параметра height=”высота изображения в пикселях” и width=”ширина изображения в пикселях”. Выглядит примерно так:
   <img src=”test.pg” height=”100″ width=”100″>
2. В режиме визуального изображения, при нажатии на кнопку вставки изображения (которая в стандартной форме редактирования выглядит как иконка с деревом, вы указываете ширину и высоту картинки в форме, в полях с названием “Dimensions”
   
3. Если вам лень, постоянно указывать размеры изображения или у вас возникают какие-то проблемы с этим, вы можете воспользоваться плагином iMax Width основная задача плагина, заключается в том, что он автоматически уменьшает ширину картинки, до той которая будет установлена в настройках. Это что бы картинки в вашем блоге не ломали структуру блога. Например когда картинка, которую вы пытаетесь вставить в пост, слишком широкая, что бы полностью отображаться в вашем блоге, плагин делает ее меньше. И кроме этого он автоматически указывает размеры изображения, если вы забыли это сделать сами.

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

• Если у вас изменилась структура ссылок блога, вот отличное решение.
• 5 золотых привычек, для улучшения вашего бизнеса.
• Избавляемся от вредных привычек, Курение, Алкоголь, ссылки на Лебедева.

Funny Martial Arts - сегодняшний спонсор поста.

Если вам понравился этот блог, вы можете подписаться на обновления блога через RSS ленту, или по E-Mail. Спасибо за визит!

Мы уже обсуждали вопрос оптимизации картинок при помощи уменьшения их размера. Денис Судилковский, предложил пообщаться на тему различных форматов изображений в блогах. Я попробовал написать, немного на эту тему. Если кто-то может дополнить, буду благодарен.

В основном в Интернете используются следующие форматы изображений: JPG, GIF и PNG.

JPEG: Этот формат лучше всего использовать для размещения фотографий, и больших полноцветных картинок. Также этот формат можно оптимизировать, увеличивая степень сжатия изображения.

GIF: Чаще всего этот формат изображений используется для отображения анимированных картинок, логотипов или текста изображений. В отличии от полноцветного JPG, GIF может отображать максимум 256 цветов. Можно оптимизировать размер картинок GIF, изменяя количество цветов, при сохранении файла.

PNG: Этот формат изображений, создан для замены GIF. Отличается от GIF тем, что поддерживает 24-битный цвет. Вы можете использовать этот формат, для логотипов, надписей и других простых изображений, в которых необходимо отображать более чем 256 цветов.

Обновлено из комментариев:

• Интересная статья по формату PNG.

• Возможно звучит странно, но Антон Попов собрался в космос.
• Обалденный конкурс с такими же призами от МаулНета.
• Лучший плагин для блога?

Вам еще не надоело, оптимизировать блог? Если нет, то сегодня продолжение темы по ускорению работы блога. Пост будет небольшой, так что не бойтесь, даже никаких загадочных слов типа компрессия или там CSS сегодня не будет. Сегодня я хочу поговорить на тему оптимизации картинок, которые вы используете создавая записи в своих блогах.

Довольно часто, блоггеры используют в своих блогах картинки и фотографии без оптимизирования. Неоптимизированные картинки имеют большой размер и замедляют загрузку страничек вашего блога.

Для того что бы исправить это, есть несколько советов. Если вы пользуетесь PhotoShop-ом для создания или редактирования картинок для блога, обязательно пользуйтесь функцией “Save for Web” (Сохранить для Web). При сохранении картинки в этом режиме, PhotoShop старается оптимизировать картинку для использования в Интернете. Такая же или похожая функция есть у большинства программ для работы с картинками, обязательно пользуйтесь этой функцией.

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

Если по каким-то причинам, вы не можете воспользоваться программой для оптимизации картинок, вы можете воспользоваться OnLine сервисом ImageOptimazer. Работать с сервисом очень легко, просто загружаете картинку, и вам дают на выбор несколько вариантов вашей картинки, с различной степенью сжатия, вы выбираете то что вам подходит, сохраняете на диск и пользуетесь.

Помните, что оптимизированные картинки, не только увеличивают скорость загрузки страниц вашего блога, но и уменьшают количество трафика от вашего блога. Что может быть полезным для тех, у кого в хостинговый тариф с ограниченным объемом трафика.

• Этикет в Интернет-пейджерах - считаю что очень полезно прочесть всем.
• Очень хорошее описание, одного очень хорошего проекта.
• Один из вариантов тайм-менеджмента.
• Как увеличить прибыль в 5 раз.

И так, продолжим наши беседы по оптимизации блогов. В прошлых постах, мы уже включили кэширование блога и выяснили что желательно использовать “/” в ссылках на блоге. Сегодня займемся оптимизацией нашего CSS файла.

CSS файл содержит в себе инструкции по отображению вашего блога. Загружается он каждый раз, когда кто-то открывает любую из страничек на вашем блоге. Поэтому было бы неплохо уменьшить его размер, для уменьшения трафика между сервером и посетителем и соответственно для увеличения скорости отображения страничек.

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

Самый простой способ удалить лишний код из CSS это воспользоваться специальным сервисом, который позволяет оптимизировать ваш CSS онлайн. Для этого заходим на сайт CleanCSS, вводим ссылку на ваш CSS файл или просто вставляем код вашего CSS файла в специальную форму и ничего не изменяя в настройках, нажимаем “Process CSS”.

Сервис анализирует ваш файл, убирает лишнее, оптимизирует код и на выходе дает вам список изменений, на сколько уменьшился ваш файл и собственно говоря оптимизированный файл. Перед тем как все это проделать, очень важно сделать резервную копию вашего CSS файла, на всякий случай. Что делать с оптимизированным файлом я думаю вы догадаетесь, его нужно просто записать на место вашего рабочего CSS.

Как правило, после использования сервиса, он может уменьшится примерно на 20 - 25% что уже само по себе неплохо и для вас и для ваших посетителей. Мой CSS файл, после оптимизации на этом сервисе, уменьшился на 2,5Кбайта что в принципе не так уж и много, но учитывая то, что он открывается каждый раз, когда кто-то просматривает вашу страничку, при большой посещаемости даже эти 2,5Кбайта будут не лишними.

Приступаем к шагу номер два, компрессия CSS.

Как вы уже знаете, WordPress имеет встроенные средства для организации сжатия страничек перед тем как показывать их посетителям, но сжатие не работает вместе с включенным кэшированием блога. Поэтому от него мы отказались.

Но можно настроить сжатие, отдельно для файла CSS. Это довольно легко сделать, нужно просто установить необходимый плагин. Называется он css-compress. В настройках ничего сложного нет, потому что и сами настройки отсутствуют. Просто скопируйте файл в папку с плагинами, и в панели управления активируйте плагин. Собственно говоря и все.

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

• 27 - очень интересный пост, от Сергея Жуковского (must read)
• Почти бесплатная реклама на toodoo.ru нужно просто написать отзыв о книге.
• Уникальный Человек - объявил конкурс “11 способов“