Сіз кескіндерді ұнатпайсыз ба?

Оқып жатқанда олар мәтін бөлігін қызықты әсерге айналдыра алады. Кескіндер блог жазбасын жақсартады, оны ортақ пайдалану мүмкіндігін арттырады және бүкіл сайттың үні мен брендін белгілейді.

Ал сіз не білесіз? Біз суреттерге жауап беруге дайынбыз. Сондықтан мазмұнға кескінді қосу блогыңызды маркетингте қолданудың күшті құралы болып табылады.

Бірақ абай болмасаңыз, суреттер веб-бетіңіздің жалпы көлемінің жартысынан астамын (немесе одан да көп) құрауы мүмкін. Бірнеше жыл бұрын веб-беттің орташа өлшемі 600–700K болды. Қазір орташа 2 МБ және ол жыл сайын артып келеді.

Бұл өте үлкен!

Мұның басты себебі веб-беттерде бірнеше кескіндердің жиірек пайдаланылуы және бұл суреттердің дұрыс өлшемделмеген және оңтайландырылған. Бұл олардың вебке ыңғайлы түрде сақталмағанын немесе құрастырылмағанын және оның орнына сіздің беттеріңізді толтырып жатқанын білдіреді.

Дегенмен, көпшілігіміз кескіндерді оңтайландыруды кейінге қалдырамыз және қызықты нәрселерді жасағанды ​​жөн көреміз. эпикалық пост жасау немесе өз орнындағы басқа блогерлермен желі құру сияқты.

Бірақ беттің кебуі сіздің бетті жүктеу жылдамдығына әсер етеді дегенді білдіреді. Сіз жоғары жылдамдықты қосылымда болсаңыз, бұл үлкен мәселе деп ойламауыңыз мүмкін, бірақ келушілеріңіздің көпшілігі олай емес. Сондай-ақ, Google баяу жүктелетін беттерді ұнатпайды және бұл сіздің SEO-ға кері әсер етуі мүмкін.

Суреттеріңізді оңтайландыру не үшін қажет

Сіз көп жұмыс жасайсыз.жұлдызды мазмұнды жасайсыз және блогыңызды жылжытуға және басқа блогерлермен байланыс орнатуға сансыз сағат жұмсайсыз, сондықтан әлеуетті келушілердің веб-сайтыңыз жүктелмей тұрып-ақ бас тартуы ең соңғы нәрсе!

Зерттеулер көрсеткендей егер сайттың жүктелуіне үш секундтан көп уақыт кетсе, келушілер «Артқа» түймесін басады.

Білемін, үш секунд шын мәнінде соншалықты көп емес, бірақ сіз мобильді қосылымға қосылсаңыз және оны күтіп тұрғанда сайтты жүктеу үшін секунд мәңгілік болып көрінуі мүмкін.

Сондай-ақ көптеген келушілер мобильді қосылымдар баяуырақ болуы мүмкін болғандықтан, бұл анық болады – бет өлшемін кішірейту керек. Біз бет өлшемін бұзудың ең үлкен кінәсі не екенін білеміз – бұл сіздің суреттеріңіз.

Қажетсіз үлкен кескіндер де хостинг тіркелгіңізде орын алады. Кейбіреулеріңізде «шексіз» сақтау орны бар хостинг болғанымен, көптеген премиум-хостинг провайдерлері сізді төменгі деңгейдегі жоспарларда шамамен 10 ГБ жадпен шектейді. Бұл тез толтырылуы мүмкін, әсіресе бір есептік жазбада кескіні көп бірнеше сайттарды орналастырсаңыз.

Сонымен, суреттеріңіздің сайтыңызды баяулатып жатқанын қалай анықтауға болады? Сайтыңыздың жылдамдығын Google PageSpeed ​​Insights көмегімен тексеріңіз.

Егер Google оңтайландырылмаған кескіндерді мәселе ретінде хабарласа, оны түзету үшін мынаны білуіңіз керек.

Кескінді оңтайландыру негіздері

Блогыңыздағы кескіндерді оңтайландыруға келетін болсақ, сізге бірнеше түрлі нәрселер қажетмыналарды біледі: файл түрі, кескін өлшемі мен өлшемдері, суреттерге қызмет көрсету әдісі және кескінді қысу.

Осы аймақтардың әрқайсысын толығырақ қарастырайық.

Файл түрі

Интернеттегі кескіндер әдетте PNG немесе JPEG файл пішімінде немесе анимация үшін GIF форматында сақталады. Интернетте қалқып тұрған күлкілі анимациялық GIF файлдарын кім ұнатпайды!

Енді суреттерді кез келген форматта сақтасаңыз, техникалық жағынан жақсы – келушінің браузері веб-бетіңізді көрсетуде қиындық туғызбайды. – бірақ ең жақсы сапа мен оңтайландыру үшін келесі ережелерді ұстаныңыз:

• JPEG – адамдар, орындар немесе заттар көрсетілген фотосуреттер мен дизайн үшін пайдаланыңыз
• PNG – графика үшін ең жақсы , логотиптер, мәтіні көп дизайндар, скриншоттар және мөлдір фоны бар кескіндер қажет болғанда
• GIF – егер сізге анимация қажет болса, әйтпесе PNG пайдаланыңыз

Олай болса, неге әртүрлі форматтар бар ?

Ал, PNG дәстүрлі түрде логотиптер мен графиканы сақтау үшін пайдаланылады, себебі ол бастапқы кескін сапасын сақтайды – ешкім бұлыңғыр мәтін мен пиксельді кескіндерді қаламайды. Бірақ, егер фотосуретті PNG ретінде сақтауға тырыссаңыз, ол керемет көрінеді, бірақ нәтижесінде алынған файл өлшемі таңқаларлықтан аз болады.

JPEG әдетте фотосуреттерді сақтау үшін пайдаланылады. Кейбір кескін деректері айтарлықтай кішірек файл өлшемін жасау үшін лақтырылады, бірақ фотосуреттер әртүрлі түстер мен табиғи вариацияларды қамтитындықтан, сапа жоғалады.әдетте адам көзіне байқалмайды.

Сығу туралы толығырақ кейінірек қарастырамыз, бірақ әзірге екі нәрсені ғана есте сақтаңыз: фотосуреттер үшін JPEG және мәтін/графика үшін PNG.

Сурет өлшемдері

Веб-бетті жүктеп, кішкентай суретті (мысалы, бас сурет) жүктеп алу үшін f-o-r-e-v-e-r қажет ететінін байқадыңыз ба? Мысалы, соншалықты баяу сіз әрбір жолдың кіріп жатқанын көре аласыз ба? Сіз өзіңіз ойлайсыз, мұндай кішкентай суретті жүктеп алу қалай ұзаққа созылады?

Ал үлкен тақырыптағы суретке түскенде, бұл одан да жаман, өйткені ол бүкіл бет жүктелуін тоқтата алады.

Мұның орын алуының себебі - блогер өз кескінінің өлшемін дұрыс өзгертпеді және оңтайландырмаған, және біздің мысалда, толық ажыратымдылықтағы JPEG файлын тікелей DSLR камерасынан жүктеп салған болуы мүмкін.

Және бұл үлкен файл!

Байқасаңыз, веб-шолғыш (әдетте) кескінді веб-беттегі орнына жақсы сәйкес келетіндей етіп оның бастапқы өлшемдерінен масштабтайды. Экрандағы кішкентай кескін шынымен браузер арқылы нақты уақытта кішірейтілген 10 мегапиксельді үлкен фотосурет болуы мүмкін.

Енді кейбір веб-жариялау платформалары автоматты түрде әртүрлі кескіндерде толық ажыратымдылықтағы кескіннің бірнеше нұсқаларын жасайды. өлшемдері бар, бірақ олай болмаса, Photoshop, Lightroom, Pixlr немесе тіпті MS Paint сияқты кескін өңдегішінде суреттердің өлшемін алдын ала өзгерту керек. Бұл айырмашылықты білдіруі мүмкін50K файл мен 5 МБ файл арасында.

Мысалы, WordPress жүктеп салынған суреттің үш (немесе тақырыпқа байланысты одан да көп) көшірмесін автоматты түрде жасайды – барлығы әртүрлі өлшемдері бар – оны пайдалана аласыз. әрқашан толық өлшемді кескінді пайдаланудың орнына блог жазбаларында.

Егер сіз үлкен фотосуреттерді жүктеп салуды әдетке айналдырсаңыз және хостинг тіркелгіңізде орынды үнемдегіңіз келсе, WordPress плагині Imsanity сіздің арқаңызда.

Ол бастапқы кескіннің өлшемін өзгертеді және басқарылатын нәрсеге ауыстырады, сондықтан постыңызға толық өлшемді кескінді енгізсеңіз де, ол соншалықты жаман болмайды.

Іске қосылғаннан кейін Imsanity бар кескіндерді іздеп, сәйкесінше өлшемін өзгерте алады.

Суреттеріңізге қызмет көрсету

Суреттеріңізді келушілерге қалай қызмет ететініңіз оларды жеке оңтайландыруға қатысты емес. , бірақ бұл сіздің беттің жүктелу уақытына қатты әсер етуі мүмкін.

Көптеген блогерлер суреттерін тікелей хостинг тіркелгілерінен ұсынады және бұл әдетте жақсы, бірақ егер сіз шынымен де өнімділіктің әрбір бөлігін қысқартқыңыз келсе Сіздің сайтыңыз, содан кейін суреттеріңізді Content Delivery Network (CDN) жүйесінде орналастыру үлкен өзгеріс тудыруы мүмкін.

CDN бүкіл әлем бойынша деректер орталықтарында орналасқан стратегиялық түрде орналастырылған веб-серверлерден тұрады. Бұл серверлер суреттеріңіздің көшірмелерін орналастырады және келушінің шолғышы веб-сайтыңыздан суретті сұрағанда, CDN браузерді автоматты түрдегеографиялық жағынан оларға ең жақын сервер.

Бұл, мысалы, Еуропадан келген келушілер штаттардан немесе басқа жерлерден емес, жергілікті еуропалық серверден қызмет көрсетілетін кескіндерді алатынын білдіреді. Жауап беру уақыты мен желінің кідірісі қысқарғандықтан, кескіндерді жүктеп алу әлдеқайда жылдамырақ, бұл бетті жүктеу уақытын қысқартады.

Блог жүргізу шебері Sucuri пайдаланады (қауіпсіздік үшін желіаралық қалқан, сонымен қатар CDN кіреді), бірақ басқа сапа провайдерлері бар. Amazon Cloudfront немесе KeyCDN сияқты. Тіпті CDN емес танымал CloudFlare CDN тегін ұсынады және ортақ хостинг пакеттерінің көпшілігінде оңай орнатуға болады.

Суретті қысу

Сізді оңтайландыруға келгенде. кескіндер үшін файл өлшемін кеңейтілген жоғалтатын кескінді сығуға қарағанда еш нәрсе азайтпайды.

Visme немесе Photoshop сияқты кескін өңдеу құралдарының көпшілігі файлдарды жоғалтатын JPEG қысу арқылы сақтайды, өйткені оларда файл өлшемін ең жақсы азайту мүмкіндігі бар. Осылайша, кескін сапасы аздап төмендегенімен, жоғалтатын кескінді қысу арқылы үлкен кескіндерді интернетке ыңғайлы өлшемдерге дейін азайтады.

Photoshop қолданбасын пайдаланатындардың көпшілігі оның Веб үшін сақтау мүмкіндігін көре алатынына сенімдімін. кескінді оңтайландырудың бәрі және соңы ретінде. Тіпті PicMonkey немесе Visme сияқты онлайн кескінді өңдеу құралдары да суреттеріңізді оңтайландырады.

Бірақ сіз Photoshop немесе басқа өңдеу құралдарынан «оңтайландырылған» кескінді алуға, оны қиратуға және сығуға болатын құралдар бар екенін білесіз бе? тағы 40% (немесе одан да көп),және әлі ол адам көзіне дерлік ұқсайды ма?

Міне, суреттеріңізді веб-сайтқа ыңғайлы күйге келтіруге көмектесетін кейбір тегін және ақылы құралдар.

Жұмыс үстелі құралдары

ImageAlpha / ImageOptim

Mac пайдаланушысы үшін ImageOptim - мен PNG кескіндерін – негізінен скриншоттарды – жүктеп салмас бұрын оңтайландыру үшін күнделікті қолданатын тегін жұмыс үстелі құралы. Бұл құралдарды пайдалану оңай, сіз жай ғана файлдарды сүйреп апарасыз, бірақ бір уақытта бір кескін жасауыңыз керек.

Профикалық кеңес : Технологияны жақсы білетіндер үшін ImageOptim– бар. CLI, мұнда кескіндердің бүкіл қалтасын бірден оңтайландыруға болады.

ImageAlpha - жоғалатын PNG компрессоры және PNG файлдарын кішірейтуде кереметтер жасай алады, ал ImageOptim кеңейтілген жоғалтпай (жоғалту опциясымен) қысуды орындайды - және ол PNG, JPEG және GIF файлдарынан қажетсіз метадеректерді алып тастайды.

Мен PNG кескіндері үшін алдымен ImageAlpha арқылы іске қосамын:

Мұнда ол менің скриншот кескінімді 103К-ден 28K-ға дейін азайтты.

Мен оны ImageOptim арқылы іске қосып, қосымша 10% үнемдедім.

JPEGmini

JPEG файлдарым үшін мен оларды жұмыс үстеліндегі JPEGmini қолданбасы арқылы оңтайландырамын. Mac және Windows үшін.

Lite нұсқасы күніне 20 суретке дейін тегін оңтайландыруға мүмкіндік береді және шектеуді алып тастау $19,99 тұрады.

Pro кеңесі : JPEGmini-ді Photoshop немесе Lightroom-ге плагин арқылы біріктіргісі келетін озық пайдаланушылар Pro нұсқасын сатып ала алады.$99,99.

Онлайн / Cloud / SaaS құралдары

TinyPNG

Егер сіз жоғары сапалы онлайн кескінді қысу құралын іздесеңіз, TinyPNG (ол JPEG форматын оңтайландырады) файлдар да атына қарамастан) — браузерге 20 5 МБ немесе одан кішірек кескіндерді сүйреп апаруға және олардың барлығын бірден оңтайландыруға мүмкіндік беретін веб-бағдарлама.

Сонымен қатар оларда әзірлеушілер API және WordPress жасайды. Жүктеп салу кезінде суреттерді автоматты түрде оңтайландыратын плагин қолжетімді.

TinyPNG айына 500 тегін кескінді оңтайландыру мүмкіндігін береді, содан кейін дыбыс көлеміне байланысты сурет үшін $0,002–0,009 аралығында ақы алынады.

Қазір 500. Ай сайынғы суреттер көп болып көрінуі мүмкін, бірақ WordPress әр кескіннің әртүрлі өлшемдегі үш-бес нұсқасын жасайтынын ескерсеңіз, 500 сурет өнімді блогер үшін мұнша болып көрінбейді. Бақытымызға орай, әр суреттің құны бюджетке қолайлы.

EWWW Image Optimizer

Егер сіз ақша жұмсауға дайын болмасаңыз және оңтайландыруға алаңдағыңыз келмесе суреттерді қолмен, WordPress-ке арналған тегін EWWW Image Optimizer плагині жүктеп салынған кескіндерді автоматты түрде оңтайландыра алады.

Сіз жоғалтатын қысуды орындайтын премиум жазылымды таңдай аласыз, бірақ тегін нұсқа тек шығынсыз сығуды орындайды, сондықтан үнемдеуге болады' t дерлік айтарлықтай. Бұл сіздің уақытыңызды үнемдейді және жоқтан жақсырақ.

Ескертпе: Толық шолу үшін мына жерден қараңыз.суретті қысу құралдары туралы пост.

Оны қорытындылау

Кейбір адамдар 2017 жылға қарай веб-беттің орташа өлшемі 3 МБ-қа жетеді деп болжағандықтан, қазір суреттеріңізді оңтайландыруды бастаудың уақыты келді.

Есіңізде болсын, барлық келушілер жоғары жылдамдықты қосылымдарға қосылмайды, ал беттің кебуі мен бетті жүктеу уақытының баяу болуы Google-дағы рейтингіңізге әсер етуі мүмкін. Жүктемені жеңілдету үшін, былайша айтқанда, кескіндерді бүгіннен оңтайландыруды әдетке айналдырыңыз.

Кескін өлшемдеріне назар аударыңыз және кез келген тым үлкен фотосуреттердің немесе сандық камерадағы кескіндердің өлшемін сәйкесінше өзгертіңіз. өлшемі.

Кейін, JPEGmini сияқты жұмыс үстелі қолданбаларымен немесе TinyPNG немесе Kraken сияқты бұлттық құралдармен заманауи кескінді қысу мүмкіндігін пайдаланыңыз – оларды WordPress-ке мүмкіндігінше плагинмен біріктіріңіз.

Соңында, егер жариялау платформасы түпнұсқа кескініңіздің өлшемін өзгерткен нұсқаларын автоматты түрде жасайды, түпнұсқа, толық өлшемді емес, олардың біреуін блог жазбаңыз үшін таңдаңыз.

Қатысты оқу: Кескінді азайтудың 7 әдісі PDF файлдарының өлшемі.