Добър ден, приятели, читатели и посетители на Блог за блогове. Работата с изображения в блога, а това е правилното им качване и оптимизация, е толкова важно, колкото оптимизирането на блога като цяло. Тази тема вече е много и обстойно обсъждана. Въпреки
всичко писано и споделяно, начинаещите блогъри не винаги обръщат внимание на това.
Правилно оптимизираните и качени изображения ще ускори зареждането на страниците на блога и имат положителен ефект върху популяризирането му. Търсачките индексират не само блога, но и изображенията в него. А именно, тези, които са правилно оптимизирани. За един от акцентите на работата с изображенията в блога вече писах тук. Но все пак, нека си припомним.
Ние имаме възможност за качване на изображения директно в редактора на публикациите. Например, ако оригиналното изображение е с размери 2048x1536 пиксела, при качването му в редактора на публикациите то се получава под формата на миниатюра. Но ние можем да променим размерите, използвайки следните варианти:
А сега да преминем към HTML режим. Виждаме, че кодът който имаме е:
Ако кликнете върху изображението, то ще се отвори в пълен размер. Това означава, че то е препратка към оригиналния размер. И съответно частта на кода, която е оцветена в синьо, не ни е нужна. Оказва се, че за да се добере до кода търсачката първо ще види първия код, и едва след това кода на изображение в публикацията. Схванахте ли мисълта ми? Това е една излишна хипервръзка. И ако изображенията в нашата публикация са 5-10, а публикациите ни са 50-100 или повече? Какъв е броят на изходящите хипервръзки? Трябва да отстраним първата част на връзката от кода. В резултат на тази наша корекция имаме следното:
В червено е оцветен пътят към нашето изображение. Това е неговия URL (адреса на изображението). Сега ако е нужно може да се променят размерите на изображението. Променяме съответно параметрите height="240" и width="320" на необходимите. При това изображението се увеличава или намалява, а качеството му се запазва. Остава само да добавите "alt". Този маркер е много важен за оптимизиране на изображението. Дълги имена не трябва да се слагат. Достатъчно е да се опише това, което е показано на снимката. Можете да добавите и тага " title ". Това е необходимо, в случай, че снимката по някаква причина не се появи. Той просто служи като подсказка. И ние получаваме окончателния код.
И нещо важно:
За да не се „прилепва“ изображението до текста е необходимо да добавим отстъп. За това използваме значението margin: 0 5px; . Крайният код има вида:
Много блогъри използват по-лесен начин за премахване на излишната хипервръзка. Просто кликат върху изображението и след това върху функцията "връзка" в редактора на публикацията. Но не попълват нищо в отворения прозорец. Връщат се в HTML редактора и им остава само да променят размерите, ако е необходимо и да се изпишат значенията "alt" и "title". Този вариант е подходящ в случай, че изображението е центрирано. Ако започнем да го местим наляво или надясно, или променяме размера му, използвайки функцията - малък, голям, среден, то автоматично ще се появи отново ненужната хипервръзка.
Изображението, което често се добавя в началото на публикацията, в ляво, не съдържа излишни връзки. Ако изображението се зареди в средата използвайте кода, предложен по-горе.
Пожелавам ви успех в оптимизацията на вашите изображения. И да се срещнем отново.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
всичко писано и споделяно, начинаещите блогъри не винаги обръщат внимание на това.
Правилно оптимизираните и качени изображения ще ускори зареждането на страниците на блога и имат положителен ефект върху популяризирането му. Търсачките индексират не само блога, но и изображенията в него. А именно, тези, които са правилно оптимизирани. За един от акцентите на работата с изображенията в блога вече писах тук. Но все пак, нека си припомним.
Ние имаме възможност за качване на изображения директно в редактора на публикациите. Например, ако оригиналното изображение е с размери 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;
<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". Този вариант е подходящ в случай, че изображението е центрирано. Ако започнем да го местим наляво или надясно, или променяме размера му, използвайки функцията - малък, голям, среден, то автоматично ще се появи отново ненужната хипервръзка.
Изображението, което често се добавя в началото на публикацията, в ляво, не съдържа излишни връзки. Ако изображението се зареди в средата използвайте кода, предложен по-горе.
Пожелавам ви успех в оптимизацията на вашите изображения. И да се срещнем отново.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Няма коментари:
Публикуване на коментар