Фатаграфіі аптымізацыі вашага сайта WordPress

1. Выявы аптымізацыі Частка 2: тэхнічная аптымізацыя Шмат чаго было сказана і напісана пра SEO для кантэнту...
2. мабільны сайт
3. кампрэсія
4. Выявы для Retina і іншых экранаў з высокім дазволам
5. CSS спрайтов
6. Файлы Sitemap для малюнкаў
7. заключэнне

Выявы аптымізацыі Частка 2: тэхнічная аптымізацыя

Шмат чаго было сказана і напісана пра SEO для кантэнту (актуальнасць, правільныя назвы, ключавыя словы і апісання, і г.д.), але не занадта шмат пра рознага роду кантэнту, а менавіта малюнкаў. Як рэдактар, у вас ёсць кантроль над загалоўкам і альт атрыбутамі тэксту , але не заўсёды па тэхнічных аспектах малюнкаў на вашым сайце. Тут вам трэба добрыя працоўныя адносіны з вашым вэб-распрацоўніка.

вынікаючы У папярэдняй артыкуле на аптымізацыі малюнкаў Ідзе гэты блог артыкул пра больш тэхнічных аспектах малюнкаў і тое, што вы або ваш вэб-распрацоўшчык можа зрабіць, каб пазбегнуць праблем. Такім чынам, ваш сайт загружаецца хутчэй і, такім чынам, зрабіць пошукавыя сістэмы шчаслівыя. Давайце пачнем з памерам малюнка.

«Памер мае значэнне», нават у малюнках

сайт Desktop

Выкажам здагадку, што вы пішаце пераканаўчую артыкул аб сваім апошнім прадукце і атрымаць яго пастаўшчыку выдатную карціну. Гэта ставіць вас у вашай артыкуле, а затым вы бачыце яго ў браўзэры. Гоша , што займае шмат часу , каб загрузіць старонку. Гэта адбываецца, калі вы выкарыстоўваеце малюнак, якое на самай справе, прызначаны для друку - 3000 х 2000 пікселяў, а затым 12Mb! Гэта крайні прыклад, але гэта здараецца часцей, чым вы думаеце. Тока Максімальная шырыня вобласці змесціва на вэб - старонцы цяпер каля 1000 пікселяў (за выключэннем поўнай шырыні паўзункоў, якое можа быць 1600 пікселяў у шырыню). Дадатковыя 2000 пікселяў ў дадзеным прыкладзе з'яўляюцца непатрэбнымі і толькі каштаваць больш паласы прапускання і загрузак часу, чым гэта неабходна. Вы таксама страціць некаторыя якасці, таму што вы пакідаеце браўзэр для маштабавання малюнка. Манера шкал і вынікі вар'іруюцца ад браўзэра і аперацыйнай сістэмы.

Рашэнні могуць вар'іравацца ў залежнасці ад сістэмы, але я спынюся тут на самай папулярнай CMS (Content Management System) WordPress ,

Раствор (ы):

1. Калі вы выкарыстоўваеце WordPress дазваляе ўсталяваць максімальныя памеры (і адносіны) ўсе выявы (Налады -> Media). Гэта / павінны адпавядаць нумары, якія выкарыстоўваюцца ў месцы (поўная шырыня, змест блога і віджэтаў мініяцюр). Папытаеце вашага вэб-распрацоўніка, каб усталяваць правільны памер. WordPress выкарыстоўвае стандартныя тры выбіраемыя фарматы малюнкаў:
   1. Вялікія памеры - выявы, якія выкарыстоўваюцца па ўсёй шырыні пляцоўкі - звычайна паміж шырынёй 960 і 1000 пікселяў.
   2. Габарытныя памеры - малюнкі для блога - часта 100% шырыні, калі паведамленне адпавядае +/- 600 пікселяў
   3. Эскізы - малюнкі для прыкладу віджэтаў - +/- 150 пікселяў
2. Выберыце пры выкарыстанні малюнкаў у вашых паведамленняў / старонак у правільным фармаце малюнка. Глядзіце малюнак ніжэй.
3. Для некаторых прыкладанняў (напрыклад, поўная шырыня паўзункоў), вы павінны мець выявы ў правільным фармаце кадраванне і змяненне памераў. WordPress выкарыстоўвае арыгінальны памер малюнка для слайдеров без маштабавання іх. Photoshop застаецца тут да гэтага часу з'яўляецца лепшым інструментам. Спытаеце правільнага памеру для вашага вэб-распрацоўніка.
4. Папулярныя фатаграфіі выкарыстоўваюцца для розных мэтаў у WordPress; як выявы ў спіс блог, партфоліо, галерэя і г.д. Стваральнік вашай тэмы адказвае за выкарыстанне правільных памераў. Вэб-распрацоўшчык можа лепш ацаніць, ці будзе ён не быць занадта вялікім.

Налады дысплея ў старонках / паведамленнях

УВАГА Пры змене памераў налад неабходна зноў наладзіць ўсе выявы ў новых значэннях. На жаль, гэта не адбываецца аўтаматычна. Вы можаце выкарыстоўваць убудова: рэгенерацыя Эскізы ,

мабільны сайт

Над праблема становіцца яшчэ больш прыкметным на мабільную версію сайта. З абмежаванай прапускной здольнасцю вашы наведвальнікі павінны будуць чакаць даўжэй тых вялікіх карцін. Калі гэта займае занадта шмат часу , каб Google і будзе караць вас за гэты наведвальнік зарадзіце мабільную старонку з - за вялікія малюнкі; мабільныя старонкі рэйтынгу набор ўніз, і вы, верагодна, страціце наведвальнік. Ёсць некаторыя хітрасці для іншага кантэнту, а таксама паменшаныя версіі малюнкаў для адлюстравання на мабільным тэлефоне.

Раствор (ы):

1. Выкарыстанне асобнай мабільнай тэмы - (напрыклад, WPTouch Тэмы ). Змесціва аўтаматычна адфарматаваны, і малюнкі зменшаны ў памеры.
2. З некаторымі JavaScript і PHP вэб - распрацоўніка вы можаце зрабіць сайт рэагаваць на розныя прылады і / або дазволу экрана. Мабільны WordPress будзе выкарыстоўваць паменшаныя версіі малюнкаў. У выпадку Retina дысплеі таксама будзе выкарыстоўваць больш высокі дазвол. Найбольш распаўсюджанае Javascript гэта ў цяперашні час Retina.js (Глядзіце раздзел «Выявы для Retina і іншых дысплеяў з высокім дазволам,» ніжэй).
3. Усё больш і больш тэмы Retina графіка падтрымкі.

зрабіць яго Retina.js сцэнар таксама можна з гэтым зручным Убудова (Дадатак у мае 2017 года).

кампрэсія

Нават калі ў вас ёсць выява з Photoshop піша ў "Захаваць для Web» гэта не канец гісторыі. І добра, гэтыя выявы з Photoshop каля 80Kb, але калі вы робіце 12 малюнкаў на адной старонцы адлюстроўвае амаль 1 Мбайт. Можа менш? Так, вы можаце. Для кожнага файла (.jpg, .png, .gif і нават) ёсць іншае рашэнне. Большасць з іх уключае ў сябе выдаленне метададзеных (EXIF) і лішнія каляровыя профілі ў малюнках. Вы 1МБЫ памеру малюнка памяншаюцца да 80%! Ёсць таксама два тыпу сціску; «Lossless» і «з стратамі" не oftwel адкідаць інфармацыю аб колеры і, такім чынам, захоўваючы якасць альбо адкідаць інфармацыю і якасць. Характарыстыка цяжкага сціску JPEG бачныя блокі 8 х 8 пікселяў. Ніжэй прыведзены крайні прыклад сціску з стратамі «».

Lossless vs. сціск з стратамі

Вось некаторыя інструменты для сціску малюнкаў, якія вы можаце ўключыць у сваім рэдакцыйным працоўным працэсе.

Рашэнне (ы) у залежнасці ад аперацыйнай сістэмы:

• ImageOptim ; Offline інструмент для кампутараў Mac: PNG, JPG
• RIOT ; Offline інструмент для кампутараў Windows: PNG, JPG
• Smush.it ; Інтэрнэт інструмент; PNG і JPG малюнкаў у файл памерам 1 Мб)
• SuperPNG ; Photoshop убудова для стварэння PNG файлаў, нават менш, чым стандартны Photoshop
• малюсенькія PNG ; Інтэрнэт інструмент: PNG і JPG (першы быў толькі PNG)
• JPGmini Інтэрнэт інструмент: толькі JPG
• Сціск PNG / JPG ; Інтэрнэт інструмент як для PNG і JPG

Заўвага Нават калі « з стратамі» метады часта не бачаць розніцы. Першы эксперымент так. Вы часта можаце выпусціць больш агрэсіўную «з стратамі» сціск малюнкаў для Retina дысплеяў. См. Наступны раздзел

Выявы для Retina і іншых экранаў з высокім дазволам

Выкажам здагадку, у вас ёсць выява 320 кропак шырокага выкарыстання на працоўным стале сайт і паглядзець тое ж малюнак на экране Retina або іншага высокага дазволу прылады. Гэта можа выглядаць менш добра. Гэта адбываецца таму, што 72 ИЦП (пікселяў на цалю) вашага працоўнага стала «спрэд» (тэхнічна «тры разы» ці больш) каля 220 т / м 326 ИЦП Retina дысплей. Менш інфармацыя аб больш шырокім дыяпазоне так. Вы бачыце, як размыццё:

Малюнак для Retina VS. ня-сятчатка (не падыходзіць для сятчаткі)

Каб прадухіліць гэта, зрабіць асобныя выявы для экранаў з высокім дазволам, 1,5 да 2 разоў больш , чым на працоўным стале.

Раствор (ы):

1. выкарыстоўваць WP Retina 2X убудова. Такім чынам, у вас ёсць толькі там, каб пераканацца, што першапачатковы памер усіх малюнкаў досыць экранаў для Retina: 1,5 у 2 разы больш. WordPress затым выбраць правільны памер для дадзенай прылады.
2. З моманту з'яўлення мадыфікатара высокага дазволу ад Apple "@ 2" будзе выкарыстоўваць выявы iPhone / IPad з гэтым пашырэннем на экране Retina. Разам з некаторымі JavaScript ( Retina.js напрыклад), вы можаце выкарыстоўваць нармальнае малюнак, сцэнар гарантуе, што калі выяўляецца высокім дазвол прылады, lageesolutie малюнка замяняецца версіяй высокага дазволу. Гэта працуе на ўсіх прыладах, а не толькі прадукты кампаніі Apple.
3. Для малюнкаў у CSS (Выявы , звязаныя з тэмай), вы можаце выкарыстоўваць CSS медиазапросы:
   • @media
     (-Webkit-мін-прылады Піксэл суадносіны: 2), (мін-дазвол: 192dpi) {
     / * Retina-спецыфічныя правілы * /
     }

Заўвага З - за экранам мабільнага тэлефона менш , вы малюнка для экранаў з высокім дазволам сціскаць больш агрэсіўнымі. Напрыклад, у Photoshop вы пішаце арыгінальнае малюнак прэч з 80% сціску JPG, але і для малюнкаў з высокім дазволам вы можаце 30% сціску. Ён будзе заставацца рэзкім, паколькі артэфакты цяжкага сціску, як правіла, застаюцца незаўважанымі.

CSS спрайтов

Выкажам здагадку, што выкарыстоўваюцца на вашым сайце два розныя выявы стрэлкі (левая і правая) абазначэння для розных мэтаў. І кожны з гэтых стрэлак мае асобную мыш-за эфект. Гэта азначае, што карыстальнік павінен загрузіць 4 розных малюнкаў. Для кожнага малюнка маецца дадатковы запыт HTTP , Чаму б гэта не збіраць адзін малюнак? Замест 4-HTTP запытаў ўсе здабывацца ў адным запыце. Гэтая калекцыя малюнкаў называецца «спрайтов».

Адзінкавыя малюнка ў параўнанні з CSS спрайтов

З дапамогай CSS мы можам зразумець, што адзін неабходны для адлюстравання ў спрайт, астатняе застаецца схаваным. Мышы над эфектам нам трэба спрайт проста пракруткі уверх (мінус каардынаты Y). Гэта займае шмат часу, каб сабраць выявы ў адзін спрайт і наладзіць CSS, але гэта добра варта Шчаслівага і Святой. Гэта тое, што ваш вэб-распрацоўшчык для вас зрабіць.

Рашэнне: Існуе толькі адно рашэнне;

На шчасце, ёсць вэб-дадатак (букмарклет), што робіць цяжкую працу за вас - SpriteMe ,

SpriteMe аналізуе вашу старонку для патэнцыйных спрайтов

SpriteMe аналізуе ўсе асобныя выявы ў межах вашага сайта , і гарантуе , што вобразы прыходзяць з таго ж ўзроўню ў той жа радку ў спрайт. Вы можаце спампаваць новы спрайт SpriteMe ужо піша адпаведны CSS для вашага шляху.

Файлы Sitemap для малюнкаў

Sitemaps, як правіла, выкарыстоўваецца для індэксавання кантэнту (старонак або паведамленняў) у розных пошукавых сістэмах. То , што многія людзі не ведаюць, што Google асабліва вашыя выявы і відэа таксама асобныя індэксы. Вы павінны змясціць гэты носьбіт у вашым sitemap.xml запісу асобна.

Прыклад XML карты сайта для малюнкаў:

<URLset XMLNS = "http://www.example.com/sitemap.xml"> <url> <LOC> HTTP <Xml версія = "1.0" кадаванне = "UTF-8"?>: //Www.example .com / foo.html </ LOC> <малюнак: малюнак> <малюнак: LOC> http://example.com/image.jpg </ малюнак: LOC> </ малюнак: малюнак> </ url> </ URLset >

рашэнне:

выкарыстанне плагіна Google XML Sitemap для малюнкаў палегчылі WordPress. Ўсталяваць убудову і стварыць, але карта сайта для СМІ. Убудова робіць усё вашы сродкі масавай інфармацыі з кантэнтам, якія будуць уключаны ў sitemap.xml. Google і іншыя пошукавыя сістэмы будуць індэксаваць карты сайта ў той час, але ён ідзе значна хутчэй, калі гэта сам па сабе Інструменты для вэб-майстроў Google запіс.

заключэнне

Здаецца, шмат працы, каб прыняць да ўвагі ўсе гэтыя метады. І вось так яно і ёсць. Але ён добра плаціць. Вы, безумоўна , забіць некалькі пунктаў вышэй , у кампаніі Google Page Speed і Y-павольна ацэнкі Yahoo.

Для атрымання дадатковай інфармацыі або выкарыстання гэтых метадаў можа лепш пастукаць у вашым вэб-распрацоўніка. Разам вы можаце стварыць працоўны працэс, у якім усё рэгулюецца з пункту гледжання аптымізацыі малюнка.