Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Как да работим правилно с изображенията в нашия блог

Изображенията в блога
Добър ден, приятели, читатели и посетители на Блог за блогове. Работата с изображения в блога, а това е правилното им качване и оптимизация, е толкова важно, колкото оптимизирането на блога като цяло. Тази тема вече е много и обстойно обсъждана. Въпреки
всичко писано и споделяно, начинаещите блогъри не винаги обръщат внимание на това.
 Правилно оптимизираните и качени изображения ще ускори зареждането на страниците на блога и имат положителен ефект върху популяризирането му. Търсачките индексират не само блога, но и изображенията в него. А именно, тези, които са правилно оптимизирани. За един от акцентите на работата с изображенията в блога вече писах тук. Но все пак, нека си припомним.

 Ние имаме възможност за качване на изображения директно в редактора на публикациите. Например, ако оригиналното изображение е с размери 2048x1536 пиксела, при качването му в редактора на публикациите то се получава под формата на миниатюра. Но ние можем да променим размерите, използвайки следните варианти:


■Малък размер - height="150" width="200"

■Среден - height="240" width="320"

■Голям - height="300" width="400"

■Много голям - height="480" width="640"

А сега да преминем към HTML режим. Виждаме, че кодът който имаме е:


<div class="separator" style="clear: both; text-align: center;">
<a href="http://s43.radikal.ru/i101/1405/33/381ecc3cbe6d.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://s43.radikal.ru/i101/1405/33/381ecc3cbe6d.jpg" height="240" width="320" /></a></div>

Ако кликнете върху изображението, то ще се отвори в пълен размер. Това означава, че то е препратка към оригиналния размер. И съответно частта на кода, която е оцветена в синьо, не ни е нужна. Оказва се, че за да се добере до кода търсачката първо ще види първия код, и едва след това кода на изображение в публикацията. Схванахте ли мисълта ми? Това е една излишна хипервръзка. И ако изображенията в нашата публикация са 5-10, а публикациите ни са 50-100 или повече? Какъв е броят на изходящите хипервръзки? Трябва да отстраним първата част на връзката от кода. В резултат на тази наша корекция имаме следното:


<div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://s43.radikal.ru/i101/1405/33/381ecc3cbe6d.jpg" height="240" width="320" /></div>


В червено е оцветен пътят към нашето изображение. Това е неговия URL (адреса на изображението). Сега ако е нужно може да се променят размерите на изображението. Променяме съответно параметрите height="240" и width="320" на необходимите. При това изображението се увеличава или намалява, а качеството му се запазва. Остава само да добавите "alt". Този маркер е много важен за оптимизиране на изображението. Дълги имена не трябва да се слагат. Достатъчно е да се опише това, което е показано на снимката. Можете да добавите и тага " title ". Това е необходимо, в случай, че снимката по някаква причина не се появи. Той просто служи като подсказка. И ние получаваме окончателния код.

 
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://s43.radikal.ru/i101/1405/33/381ecc3cbe6d.jpg" height="240" width="320"alt= " кокичета"  title="първите пролетни кокичета"/></div>


И нещо важно:

 
Чрез text-align: center; изображението ни е разположено централно. Ако искаме текста да бъде от дясната страна на изображението, а изображението да е в лявата, заменяме частта на кода <div class="separator" style="clear: both; text-align: center;"> на <div class="separator" style="float: left;">. И съответно, за да е в дясната страна, на  float:right;


За да не се „прилепва“ изображението до текста е необходимо да добавим отстъп. За това използваме значението margin: 0 5px; . Крайният код има вида:

 

<img src="http://s43.radikal.ru/i101/1405/33/381ecc3cbe6d.jpg" alt="кокичета" height="120" width="180" title="первите кокичета" style="float: left; margin: 0 5px;"/> и тук пишем нашата публикация







Много блогъри използват по-лесен начин за премахване на излишната хипервръзка. Просто кликат върху изображението и след това върху функцията "връзка" в редактора на публикацията. Но не попълват нищо в отворения прозорец. Връщат се в HTML редактора и им остава само да променят размерите, ако е необходимо и да се изпишат значенията "alt" и "title". Този вариант е подходящ в случай, че изображението е центрирано. Ако започнем да го местим наляво или надясно, или променяме размера му, използвайки функцията - малък, голям, среден, то автоматично ще се появи отново ненужната хипервръзка.

Изображението, което често се добавя в началото на публикацията, в ляво, не съдържа излишни връзки. Ако изображението се зареди в средата използвайте кода, предложен по-горе.

Пожелавам ви успех в оптимизацията на вашите изображения. И да се срещнем отново.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

BGtop

Няма коментари:

Публикуване на коментар