15 июля 2015 г.

Фотографии на блоге: размер или качество?

Картинки в блоге: размещение без потерь

Полезно для чайников и не только... 

фотографии на сайте без потерьПриветствую всех! Друзья! Созрела на статью на эту волнующую меня в последнее время тему: как размещать фотографии в блоге, какими должны быть фотографии и картинки, какого размера и качества? 
Вообще тема для статьи должна была быть банальной - о моей поездке по родному краю. Каждый год мы ездим по зову предков в окрестности Татарстана, чтобы вспомнить беззаботное детство, проведенное в деревне и "навестить" бабушку и дедушку. Сама по себе тема показалась мне скучной, получилось бы простое констатирование фактов: поехала, увидела, показала. А неплохих фотографий получилось много, уж очень мне хочется поделиться простотой и красотой русской природы, а ещё точнее - природой Татарстана (патриотка ещё та))). Билась над качеством, цветом, размером, но никак не могла найти оптимального решения.

Проблема в том, что при сжатии картинки качество значительно уменьшается, а размещать фотографии "как есть" очень расточительно для блога, вес картинки будет перегружать сайт. В результате ваш блог будет открываться медленно, а посетители просто больше не будут возвращаться наш ваш изумительный блог в следующий раз. Да и площадка не резиновая. Ну, я учусь, и пока ещё есть много нерешенных вопросов построения блога. Порассуждаем вместе?
Итак, какие картинки размещать в статье
1. Конечно же, в идеале они должны быть уникальными, сделаны лично вами или подобранные в специальных ресурсах. О каких ресурсах речь? Дело в том, что в просторах интернета очень много фотографий, многие из них используются по несколько раз на разных сайтах. Иногда даже трудно узнать первоисточник. Вот и я, будучи ещё в песочнице  поисковиков, подбирала фотографии на подходящую мне тему тупо из результатов поиска. Конечно же, старалась указывать на источник фото. Простые демотиваторы сделаны мной, но фотографии ведь всё-таки не мои. Подобные фото у меня в рубрике афоризмы, например. Тоже вариант, конечно, если уж нет выхода, но такие публикации будут считываться как не уникальные, могут просто игнорироваться поисковиками.
Буквально вчера нашла бесплатные ресурсы картинок, которые можно использовать в работе. Например, http://morguefile.com. Думаю, что неплохой выход из ситуации (первая верхняя картинка). Платные я пока не рассматриваю.
2. Можно немного схитрить: подкорректировать, изменить фотографии, сделать их видоизмененными. Почему нет? Я не профессиональный фотограф, в конце концов, и на всё и вся нужно время. Есть специальные редакторы онлайн, где можно делать коллажи, видоизменять картинку, добавлять спецэффекты и так далее. 
Я не беру на рассмотрение Photoshop по той простой причине, что активно я им не пользуюсь, не освоила в полной мере. Меня интересуют удобные ресурсы, которыми пользоваться быстро и просто. Каюсь, нет времени, а может это просто лень?
 Например,  http://pixlr.com. Неплохой редактор, пользовалась иногда. Можно использовать http://createcollage.ru  или http://online-collage.com для создания коллажей и фото-конгломератов. В принципе создание коллажей для меня нужная фишка, так как можно объединить несколько фотографий в одну картинку. Согласитесь, это удобно. Да и не сильно загружает сайт, если предварительно эти картинки уменьшить. Можно изменить в размере весь коллаж сразу, но тогда он получиться менее смотрибельным. Вес не должен превышать 120 КБ, нужно найти приемлемый размер.
Если хотите сделать забавные коллажи, то есть редактор http://photofunny.net. Например, у моей сестры намечался день рождения, а поздравить нужно было на расстоянии и быстро. Вот и я поздравила её своей открыткой с использованием этого редактора. Вот что получилось:

фото и картинки на блоге
Жмите на картинки для лучшего просмотра
Конечно, не шедеврально, сделано впопыхах, но забавно. По крайней мере ей понравилось. Качество изменилось, так как я существенно уменьшила коллаж. Если делаешь какие-либо манипуляции с фотографиями, то вес тоже увеличивается, это тоже нужно учитывать. 
В исходном виде он у меня был размером 299 КБ. Я его уменьшила в редакторе http://fanstudio.ru. При помощи функции "размер снимка/для размещения в интернет", фото значительно убавилось в весе. Предлагаемый размер 800х792 см, вес стал всего 71,6 КБ. Немного добавила резкости и насыщенности цвета, так как картинка у меня поплыла и стала нечеткой, но качество всё равно стало хуже исходной. 
Вот теперь - о самом важном: как изменить размер картинки, не повреждая первоначального качества?

3. Статьи на эту тему можно найти на специальных блогах и сайтах, посвященных именно сайтостроению. Я долго шерстила интернет, кое-что нашла нужное для себя, но всё же оптимальное решение ещё не найдено. Некоторые публикации я взяла на заметку, а часть из них до меня просто не дошли - или "лыжи не едут", или дело во мне.
Небольшой камешек в огород некоторым seo-специалистам: пишите яснее и человеческим языком. Ведь не каждый среднестатистический чайничек (а вы пишите именно для них в том числе), поймёт ваш язык с профи-терминами и заумными фразами. Я понимаю, что "незнание законов не освобождает от ответственности", но всё же новичку понятнее язык на уровне тычинок и пестиков, на мой взгляд))).
 Вспомнился анекдот в тему:
 - Девушка, предъявите ваши документы!
- Вот.
- А где техпаспорт?
- Каких это тех? Я одна еду!
Да, кстати, пейзажи. Рассмотрим именно конкретные фотографии, которые нужно подкорректировать. Нужно отметить, что качество зависит, конечно же, от фотоаппарата и от ваших умений. У меня простой SONY Cyber-shot DSC-W810. Не фонтан, конечно, для достижения уровня профессиональных фотографий, но уже к нему привыкла. На смартфон принципиально не фотографирую, качество значительно хуже. Не всегда получается то, что хотелось бы, вот и корректирую как могу.

Это фото сделано в пасмурную погоду, и мне нужно сохранить это настроение в кадре. Изменила сначала размер вручную в просто редакторе Paint: изменить размер/50 на 50/еще раз изменить/30 на 30. Изначальный размер был 6,91 МБ, стал 45 КБ. При изменении размера вручную качество особо не поменялось. Теперь нужно фотографию улучшить по цвету и качеству. Попробовала использовать редактор https://avatan.ru . Ну, тоже ничего, функций много, но результат не такой, какой хотелось бы. Для улучшения качества опций всё-таки маловато. Коллаж сделала на редакторе pixlr-express. Пользуюсь им очень часто и считаю самым удобным для использования. Там множество функций и прибанбасов. Можно все манипуляции сделать именно на этом редакторе, рекомендую.

 качество фотографий

Повторюсь ещё раз: при использовании функций редакторов по улучшению качества вес увеличивается! Конечный результат может быть тяжеловесным. Данный коллаж весит 129 КБ - нормально для сайта, поэтому оставила так. Если нужно уменьшить фотографию автоматически, и вы не знаете точного предполагаемого размера в пикселях, то можно воспользоваться редакторами по сжатию картинок. Некоторые из них предложены автором на сайте chuvyr.ru в статье "Обзор инструментов для сжатия картинок сайта", повторяться не буду. После этой статьи у меня возникло желание более подробно описать свои умозаключения по этой теме в поисках оптимального решения.
4. В понятие "качество" входит много аспектов, это: резкость, насыщенность цвета, баланс светотеней, выпуклость, размытие и так далее. Иногда фотографии получаются размытыми, момент упущен, а нужен именно этот кадр. Я пробовала изменить качество при помощи разных редакторов, их  очень большое количество, всего и не упомнишь. Но размытость убрать без потери характера фотографии, если так можно выразиться, оказалось невозможным. В любом случае теряется естественность и реальность кадра. Опять не беру в счет Фотошоп.
Вот, например, сделала фотографии на ходу, из машины. Размытость убрать не получилось.
Ленино-Кокушкино в Татарстане
Ленино-Кокушкино
Ленино-Кокушкино
Ленино-Кокушкино
 Картинки весят всего по 40 КБ, путём манипуляций в Paint и fanstudio.ru. Результат очень средний, видны шероховатости и неточности изображения.
 У меня просьба: если есть выход по устранению размытости, то, пожалуйста, напишите в комментариях. Буду очень признательна.

Делю статью на две части - вес статьи получился большой. Так что при создании сообщения учитывайте объём информации и вложенный в него объём картинок. AdSense мне яро начал твердить о сжатии файла, большое количество картинок плохо отражается на оптимизации сайта.
Blog Widget by LinkWithin

11 комментариев:

  1. Есть несколько подходов к проблеме с картинками на сайте и скорости его загрузки.

    Первое это выбор графического формата (JPEG, PNG, GIF и т.д.). Каждый из них имеет свои плюсы и минусы. JPEG – лучше для фото, PNG – лучше для скриншотов, GIF – для иконок и анимации.

    Дальше идёт сжатие. Оно бывает двух видов – с потерей качества и без потери качества. Сжатие без потери качества обычно сводится к удалению метаданных и незначительной коррекции картинки. Выигрыш меньше, но для пользователей и поисковиков самое то.

    Следующий момент – миниатюры. Обычно, если надо разместить большую картинку, создают две картинки: маленькую (миниатюра) и большую (полноразмерная картинка). В этом плане очень удобен Google Фото, т.к. позволяет менять размер картинки через параметры в URL. Дальше просто. В контент вставляется миниатюра через тег IMG со ссылкой на большую (полноразмерную) картинку. Если надо, пользователь может кликнуть миниатюру и посмотреть полноразмерную картинку. В таких случаях ещё обычно используются специальные плагины, вроде Lightbox, но это уже детали.

    ОтветитьУдалить
    Ответы
    1. Спасибо. Я попробую. Миниатюра - имеется в виду выбрать функцию на блогспоте "Малый размер", а загрузить полноценную? Наверное, всё равно придется же уменьшать фото до размера страницы? Надо въехать - пока не дошло. Почитаю ещё раз по буквам).

      Удалить
    2. А всё, доходит, попробую. Со второго раза - уже лучше). Во чайник!

      Удалить
  2. Ой, на меня уже ссылаются.Расту в собственных глазах. :)
    По поводу размера, мои "вкусненькие" фотографии все размером от 250 до 500 кБ. При этом, насколько я вижу, всё нормально открывается и загружается.
    И, да, никуда от фотошопа не уйдёшь. Как начинающий пользователь, который освоил от силы 1% от фотошоповских возможностей, могу сказать - я теперь понимаю почему компания Adobe хочет за свою программу столько денег, сколько хочет. Оно того стоит. Однозначно. Потому что, когда я разберусь с оставшимися 99%, я смело смогу считать себя магом и волшебником.

    ОтветитьУдалить
    Ответы
    1. Ого, но ведь это до поры до времени, пока ещё твой блог не загружен. А потом что? И не у всех продвинутый комп, может загружаться долго и посетителей будет меньше, а то и вообще не будет. Я об этом думаю. Сначала я тоже загружала большие фото, без сжатия, но потом пришлось переделать. Конечно же, качество очень пострадало. Что касается твоих фоток, то у меня пока не получается так их редактировать, Фотошоп освоить придётся).

      Удалить
  3. Я пока не разобралась с фото, все некогда, загружаю с компа, уменьшаю здесь, не знаю, может неправильно я делаю, но пока до другого не доросла. Гузель, спасибо, Ваш отзыв заставил задуматься.

    ОтветитьУдалить
    Ответы
    1. Есть ещё вариант пользоваться Picasa, сначала загрузить туда, подкорректировать, а потом уже размещать ссылку на фото. Мне обычным способом удобнее, но кто знает, может просто не привыкла.

      Удалить
  4. главное, чтобы они к месту были, да ничьи права при этом нарушены не были

    ОтветитьУдалить
    Ответы
    1. Согласна. Надо вообще с интернета не брать, в идеале. Надо стремиться, чтобы всё своё было от фото до дизайна, естественно, и статьи.

      Удалить
  5. Добрый вечер. Зашла познакомиться. Я поняла, что тематика блога разнообразная, зависит от ведения души. Может и правильно, более широкий охват аудитории. Для обработки фоток и коллажей я использую онлайн ресурс fotor. Мне очень нравиться, все по-русски и очень просто.
    На главной странице в статье про собачек у меня на планшета фотки налезли на гаджеты. Что-то не так с размерами.

    ОтветитьУдалить
    Ответы
    1. Рада, что зашли, Олеся. Я их уменьшу, пока так разместила. Тематика про увлечения, а их много. Стараюсь не распыляться, блог обо всём тоже не есть хорошо. Но не получается, блог один, а мыслей много). По поводу fotor спасибо, обязательно проэкспериментирую).

      Удалить