7 техники за използване на изображения на уеб страници
от Берто Лопес, последен. действай. 8 ноември 2018 г.
В днешната публикация искам отново да се докосна до „класика“ за блогове: как да използвате добре снимки и изображения на уеб страница.
Може да изглежда, че по тази тема всичко вече е казано, но както ще видите в този пост това далеч от него това е така. Нещо повече, почти сигурно е, че пропилявате значително потенциала му.
Просто трябва да разгледате по-отблизо всеки блог или уебсайт, за да видите, че практически всички от тях (включително нашия ...), или почти не използват изображения, или, те не правят това, което трябва с техните изображения, за да се възползват от 100% от техния потенциал, което е много, както ще видите в публикацията.
Така че днес ще ви разкажа за 7 ключови техники че всеки блогър или автор на всеки друг тип уеб страница трябва да използва със своите изображения.
Какво ще намерите тук?
сигурен съм че особено ще се насладите с този пост, защото ще видите, че те са много „Действително“, с незабавни резултати Освен това, със сигурност знам, че това е една от темите, които най-много интересуват нашите читатели, които обсъждаме в този блог.
Използването на изображения на вашия уебсайт ще ви подхожда много добре
Ако имате блог или уебсайт, изображенията са необходим и съществен ресурс придобивам задръжте внимание на обществеността и избягвайте да ги отегчавате.
В допълнение, използването на изображения значително подобрява естетиката на сайта и има допълнителни предимства, които не са очевидни, но много важни, като например подобряване на позиционирането на страницата, ако знаете как да използвате потенциала, който изображенията имат за SEO.
Повечето автори обаче, поради незнание или невнимание (и липса на време) не ги използват или поне не ги използват правилно.
7 Основни техники, които трябва да приложите със снимките и изображенията на вашия уебсайт или вашия блог
Така че първата техника или първият съвет наистина трябва да бъде съветът, който всъщност имате използвайте снимки и изображения във вашия блог, поне 2 или 3 във всяка публикация, и че отделяте тези 10-15 минути, които ще ви отнемат да прочетете тази публикация, за да научите как да го направите добре.
1. Използвайте правилната разделителна способност
Очевидно трябва да има и някои недостатъци, които наистина има. Освен че очевидно използването на добри изображения добавя малко повече усилия към създаването на съдържанието, то има и недостатъка, че прави вашите страници по-тежък и с него уебсайтът ви е по-бавен. Но не се притеснявайте, защото това има решение.
Първо, това става много релативизиращо, ако използвате добра честотна лента за вашия уеб сървър (т.е. добър хостинг), което трябва да правите във всеки случай. По този начин сървърът няма да пострада лесно със страници, които са малко по-големи.
Ако имате нужда от хостинг за вашия уеб сайт или вашия блог, действайте!
- Hostinger: с 90% отстъпка тук
- SiteGround: с 60% отстъпка тук
- Webempresa: с 25% отстъпка тук
- Raiola Networks: с 20% отстъпка тук
Внимание: тези оферти са валидни сега, може да изтече след няколко дни.
От друга страна, изображенията, които качвате, трябва да бъдат оптимизирани да бъдат възможно най-малки, без значителна загуба на качество.
Най-основната и ефективна оптимизация е адаптирайте разделителната способност на изображението към използването му на уебсайт.
Настроили сме „голям размер“ на WordPress, за да съответства на максималния размер за изображения с пълна ширина. По този начин избягваме загуби на качество поради преобразуване на WordPress, за да коригираме размера на изображението.
Например: основната колона на този блог е с ширина 700 пиксела.
Какъв е смисълът да се използва изображение с ширина 3000 или 4000 пиксела? Няма, нали?
Всъщност в този блог използваме общото правило, за да ограничим изображенията с пълна ширина 650 пиксела.
Обаче изображение с висока разделителна способност, например „без гръб“ от мобилния ви телефон, е щета брутален при оптимизацията на вашата страница, разлика, която в много случаи е лесно с фактор по-голям от 10, преминавайки, например, изображение на 1Mbyte (много прекомерно) тегло до 100Kbytes (много разумно). Дори съм виждал уебсайтове с 5 или 6 Mbyte изображения, а истински глупаво с което буквално убивате уебсайта си.
Като общо правило бих препоръчал никога да не качвате изображения с ширина, по-голяма от ширината в пиксели на основната област на съдържанието на вашия уебсайт. Като цяло това ще означава, не повече от 600-800 пиксела широки. По изключение може да има смисъл да качвате изображения с висока разделителна способност, ако това, за което става въпрос, е именно, че потребителят може да ги види с висока разделителна способност. Но при нормална употреба силно препоръчвам да следвате горните насоки.
В конкретния случай на използване на WordPress, когато ги качвате, автоматично преоразмеряване и с него "мазнината" го разрешавате автоматично. Вече е голямо облекчение на проблема, но все пак проблемът е в това Преоразмеряването на WordPress по подразбиране не е оптимално: обикновено не постига минималния размер, който би бил възможен с други инструменти, а намалените изображения обикновено са повече размазано отколкото бихте могли да бъдете намалени с други инструменти.
Поради тази причина в този блог предпочитаме да ги третираме извън WordPress, както е описано в точка 3, за да ги качим с точните размери, които могат да бъдат конфигурирани в менюто на „Инструменти/настройки“. Това предотвратява обработката на изображението от WordPress за тези измерения.
2. Използвайте правилния формат
Едно нещо, което забелязвам, че на практика всички блогъри правят грешки, е не използвайки най-подходящия формат на изображението според употребата, на която искате да поставите това изображение.
Има три основни формата, които представляват практически 100% от форматите, използвани в мрежата, и това са форматите JPG, PNG Y. GIF.
Например за a снимка на екрана, JPG форматът не е добър избор. Форматът PNG е по-добре адаптиран, за да даде резултати с по-добър баланс размер/качество.
В тази публикация ви казваме за какво служи всеки формат и как да ги използвате добре:
3. Оптимизирайте изображението (цветове, острота и др.)
Оптимизирането на изображение не е само за намаляване на размерите му, но и за прилагане интелигентни алгоритми за (напр. да получите a оптимална острота намалени изображения), изберете подходящ формат както съм коментирал по-горе и намалете цветовата си палитра.
Тази публикация обяснява малко по-подробно:
Добрите специализирани инструменти са от съществено значение за това. Моят личен фаворит е FastStone Photo Resizer, въпреки че е и много добра алтернатива RIOT (Инструмент за радикална оптимизация на изображението). Също така, в блога на великия @Manz имате отличен урок оптимизация, която се основава на този последен инструмент: