Доброго времени суток, друзья, читатели и гости блога. Сегодня продолжу разговор о работе с изображениями в блоге, тему которой подняла в прошлом посте. Поговорим о картинках, которые загружаем в сообщения из альбома Picasa.При вставке изображения у нас автоматически Блоггер генерирует ссылку на исходный размер изображения. Эта картинка загружена у меня с Picasa.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-T5tsNuDLKKYt1MSRgxWNbIv40TbTBrQExoOqJcm-LUKXenPNOujGQjtufGGCd1YH5Rly_MMb6t-cdR1yOzqfO0bSnQf_xZggeLvr58GRgiap3SXrWNkfqSEGQJl8Y_7rdGD2Xx8jhRRJ/s1600/DSC02681.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-T5tsNuDLKKYt1MSRgxWNbIv40TbTBrQExoOqJcm-LUKXenPNOujGQjtufGGCd1YH5Rly_MMb6t-cdR1yOzqfO0bSnQf_xZggeLvr58GRgiap3SXrWNkfqSEGQJl8Y_7rdGD2Xx8jhRRJ/s320/DSC02681.JPG" width="320" /></a></div>
Обратите внимание, красным цветом я выделила участок кода, который отвечает за исходный (первоначальный )размер фотографии s1600. Это обычно один из параметров ширины или высоты изображения. Определяется большим значением.
У нас есть возможность задавать самим эти размеры. У меня давно для себя лежит вот такая шпаргалочка для этого. Какие размеры изображений есть для платформы Блоггер. Делюсь с вами.
s48,s64,s144, s150, s200, s288, s320 (средний размер), s400(крупный размер),s400, s600, s800.
Сейчас мы так же, как было описано в предыдущем сообщении, отсечём всё лишнее из кода и увеличим нашу миниатюру. Поменяем в ней значение s320 на s600.
По сути у меня в коде осталось всего вот это. Новый исходный размер фото.
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-T5tsNuDLKKYt1MSRgxWNbIv40TbTBrQExoOqJcm-LUKXenPNOujGQjtufGGCd1YH5Rly_MMb6t-cdR1yOzqfO0bSnQf_xZggeLvr58GRgiap3SXrWNkfqSEGQJl8Y_7rdGD2Xx8jhRRJ/s600/DSC02681.JPG" /></div>
И вот даже какая, с размером s48.
<div class="separator" style="clear: both; text-align: center;">
<img alt="пальмы" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-T5tsNuDLKKYt1MSRgxWNbIv40TbTBrQExoOqJcm-LUKXenPNOujGQjtufGGCd1YH5Rly_MMb6t-cdR1yOzqfO0bSnQf_xZggeLvr58GRgiap3SXrWNkfqSEGQJl8Y_7rdGD2Xx8jhRRJ/s400/DSC02681.JPG" title="пальмы в пустыне" width="400" /></div>
Вот так опять же, избавились и от ненужных ссылок, правильно оптимизировали изображения, загруженные в блог из Picasa. И обратите внимание, что качество картинки при этом не пострадало. Поэкспериментируйте у себя в черновике блога и потом весь этот процесс не будет для вас в тягость.
Удачи нам всем. До новых встреч. Спасибо что заглядываете в мои шпаргалки.
здесь можно оформить подписку на новые шпаргалки
Спасибо!
ОтветитьУдалитьБуду рада если информация оказалась полезной.
УдалитьВика, когда я размещаю фото, то хочу публиковать сразу большими. Но для мобильных устройств это плохо. А если задаю форму "крупный", то получается среднего размера, как понимаю в s400, как ты пишешь. Вот этот размер надо менять на 600. Нужно так проделывать со всеми фотографиями отдельно или я могу изменить значение в head сразу для всех фотографий? Хотелось бы настроить сразу, для всего блога.
ОтветитьУдалитьВообще-то размер изображений можно задать если перед /b:skin
Удалитьзадать стили
.post-body img {
width: 500px!important;
height: auto!important; }
Значение ширины 500, высота
Спасибо большое!
ОтветитьУдалитьИменно то, что искал, а то меняя другие цифры терялось качество картинки.
Приятно слышать, что пригодилось. Да, тут качество хорошее.
Удалить