Hoe u u foto's kan optimaliseer om SEO-vriendelik te wees (volledige gids)
Die prestasie van u webwerf is afhanklik van verskeie faktore, wat wissel van die spesifieke webgasheer wat u kies, na aanleiding van die riglyne vir toeganklikheid van die webwerf, tot die beeldlêergroottes wat u gebruik.
As u hulle vir die regte formaat formateer, kan dit egter die kwaliteit verlaag as gevolg van die wysigings wat u aanbring. Die goeie nuus is dat u met enkele tegnieke en truuks die beste beeldkwaliteit kan handhaaf en die regte grootte kan kry.
1 Wat is beeldoptimalisering?
2 Voordele van beeldformatering
3 Hoe om prestasie te verbeter met beeldoptimalisering
4 Kies die beste lêerformaat
5 Grootte teenoor kompressiekwaliteit
6 Lossless vs Lossy Optimization
7 Verander die grootte van beelde
8 Beelde vervang en uitgeskakel
9 Raster vs Vector Images
10 Hoë-resolusie skermimplikasies
11 Optimalisering van vektorbeelde
12 Optimalisering van rasterbeelde
13 Gereedskap en parameter verstelling
14 Lewer afgeskaalde beeldbates
15 Kontrolelys vir beeldoptimalisering
Wat is beeldoptimalisering?
Webbladsye kan 'n beduidende verlangsaming ervaar as daar groot beelde is. Dit kan laaityd verminder en die algehele ervaring vir u besoekers aan die orde stel.
Om die lêergrootte te verminder, is beeldoptimalisering. U kan 'n skrip of 'n inprop hiervoor gebruik.
Dit lei dan tot vinniger laai tye vir u bladsye. Verlieslose en verlieskompressie is die twee mees algemene optimaliseringsmetodes.
Voordele van beeldformatering
Daar word beraam dat ongeveer 54 persent van die totale gewig van 'n webblad te wyte is aan beelde.
As u aan webwerfoptimalisering werk, moet u beelde u eerste taak wees. Die voordele van beeldformatering sluit die volgende in:
Verbeterde spoed van bladsy laai
Dit is vinniger om rugsteun te skep
Minder bedienerstoorplek is nodig
Verbeterde SEO met die regte SEO-inprop
Minder bandwydte word gebruik
Hoe om prestasie te verbeter met beeldoptimalisering
Die doel is om die aanvaarbare gehalte en die laagste lêergrootte eweredig te balanseer. Daar is meer as een manier om dit te doen. Voordat u u foto's oplaai, is dit 'n algemene opsie. U kan 'n instrument of 'n inprop hiervoor gebruik (hier is 'n paar).
Dit is belangrik om die tipe kompressie en lêerformaat wat u gebruik, in ag te neem. Die regte kombinasie maak dit moontlik om die grootte van u beeld met tot vyf keer te verminder.
Eksperimenteer met verskillende lêerformate en kompressietipes om die beste kombinasie vir u behoeftes te bepaal.
Kies die beste lêerformaat
Om die beste lêertipe te kies, is dit belangrik om te weet watter beskikbaar is. Dit is die algemeenste:
JPEG: Hierdie tipe maak gebruik van verlieslose en verliesoptimalisering. U kan 'n soliede balans tussen lêergrootte en kwaliteit verkry deur die kwaliteitsvlak aan te pas.
PNG: Hierdie tipe is geneig om 'n groter lêergrootte te hê, maar die foto's is van groter gehalte. U kan verlies of verlieslose kompressie gebruik.
GIF: Dit is ideaal vir geanimeerde beelde. U kan slegs verlieslose kompressie gebruik. Dit gebruik slegs 256 kleure.
Daar is ander opsies, maar dit is van die algemeenste en maklik om mee te werk. Ander opsies sluit in JPEG XR en WebP. Nie alle blaaiers ondersteun hierdie twee nie; wees dus bewus daarvan.
Dit kan egter 'n lewensvatbare keuse wees. Byvoorbeeld, in vergelyking met 'n vergelykbare JPEG-beeld, is daar gemiddeld 'n 30 persentasie lêergroottevermindering met WebP.
Vanweë die gebrek aan universele ondersteuning vir hierdie twee opsies, sal u toepassing ekstra logika op u bedieners of toepassing benodig om die toepaslike hulpbron te voorsien:
Beeldoptimalisering is 'n diens wat deur sommige CDN's aangebied word, insluitend die aflewering van WebP en JPEG XR.
Om die kliënt op te spoor, voorsien die beste beeldformaat wat beskikbaar is en kyk of die ondersteunde formate moontlik is om addisionele toepassingslogika by te voeg.
Sekere open source-instrumente outomatiseer die gesprek, optimalisering en bediening van toepaslike bates.
Grootte teenoor kompressiekwaliteit
Lae kompressie is geneig om 'n hoër gehalte te gee, maar die lêergroottes is gewoonlik groter. Die teendeel is waar met hoë kompressie. Die lêers is kleiner, maar die gehalte is geneig om af te neem.
Ideaal gesproke wil u altesaam een ​​tot twee MB hê vir u totale gewig van u webblad. Oorweeg dus hoeveel prente u moet gebruik en deel hierdie getal met ongeveer 1,5. Dit gee u die grootte per beeld wat die beste laaispoed moontlik maak.
Lossless vs Lossy Optimization
Dit is die twee soorte kompressie wat u gaan gebruik. Dit is belangrik om te verstaan ​​wat hulle doen:
Less: Dit komprimeer data en is 'n filter. Voordat u die beeld weergee, moet dit nie saamgepers word nie. Kwaliteit word egter nie verminder nie. Daar is verskillende instrumente wat verlieslose kompressie verrig.
lossy: Dit skakel sekere data uit en dit is 'n filter. Wees bedag op hoeveel vermindering u doen, want dit sal die beeld verneder. U kan verskillende beeldredakteurs en -hulpmiddels gebruik om die kwaliteitinstellings van die beeld aan te pas.
Die optimale konfigurasie van óf verlieslose óf verliesagtige konfigurasie is afhanklik van u eie kriteria, soos die uitruiling tussen ingeboude artefakte en lêergrootte, en die beeldinhoud.
Daar is nie 'n universele instelling wat op alle beelde van toepassing is nie. Uiteindelik wil u met verskillende beelde speel om te sien watter die beste werk.
Verander die grootte van beelde
Danksy reageerbladsye op webwerwe, soos WordPress, kry u verskillende lêergroottes in u mediabiblioteek. U blaaier kan die beste grootte kies en dit aflaai. Die grootte wat die blaaier kies, is gebaseer op die resolusie van die toestel.
Die oorspronklike lêer bly onaangeraak en behou. U kan plugins gebruik om die oorspronklike te bespaar om skyfspasie te bespaar indien u dit verkies.
Beelde vervang en uitgeskakel
Benodig u al die prente op 'n webblad? Indien nie, verwyder dan die wat onnodig is. As almal egter van belang is vir die inhoud, moet u dit oorweeg om die foto's van groter of laer gehalte met beter opsies te vervang.
In sommige gevalle kan webfonte en CSS-effekte die plek van beelde inneem, terwyl dit steeds 'n pragtige visuele estetika op die bladsy bied. Met webtipes kan lekker lettertipes help om die bruikbaarheid te verbeter en 'n meer pasgemaakte voorkoms op u bladsye te gee.
Dit kan ook u leesbaarheid en handelsmerk verbeter. Sorg net dat u die teks steeds maklik kan soek, kies en die grootte daarvan verander sonder dat dit probleme met die leesbaarheid het.
CSS-effekte bevat elemente, soos skaduwees en gradiënte. Ook hierdie kan handelsmerke verder bevorder. Animasies kan 'n visuele aantrekkingskrag op u webblad bied met elke soomvlak en resolusie. In vergelyking met beeldlêers is dit 'n fraksie van die grepe.
Raster en vektor is twee van die primêre beeldlêertipes. Pixel-gebaseerde programme, 'n skandeerder of 'n kamera word gebruik om rasterbeelde te skep.
Dit word algemeen op die internet gebruik en word meer gereeld gebruik. Vectorsagteware word gebruik om vektorbeelde te skep. Dit is algemeen vir beelde wat op fisiese produkte gaan, en in ingenieurs-, CAD- en 3D-grafika.
Vectorbeelde is onafhanklik van resolusie en zoom. As meetkundige vorms betrokke is, is vektor ideaal. As prente kompleks is en baie besonderhede en onreëlmatige vorms het, word rasterbeelde verkies.
Rastergrafieke kodeer elke pixel se individuele waardes binne 'n reghoekige ruitnet om 'n beeld voor te stel. Vektorgrafieke stel 'n beeld voor met behulp van punte, lyne en veelhoeke.
Dit is belangrik om te onderskei tussen die twee verskillende pixeltipes, wat toestelpixels en CSS-pixels insluit. Daar kan meerdere toestelpixels in 'n enkele CSS-pixel teenwoordig wees. Die detail op die skerm word fyner met meer toestelpixels.
Om die hoër telling van die pixel te kan benut, moet die beeldbates meer besonderhede hê.
Hierdie taak is ideaal vir vektore, aangesien dit skerp resultate kan lewer wanneer dit teen enige resolusie gelewer word.
Aangesien rasterbeelde per pixel-basis gebruik om beelddata te kodeer, is dit meer uitdagend. Dit is terwyl die rasterlêergroottes toeneem namate die pixels toeneem.
Dus het skerms met 'n hoë resolusie hoëbeelde nodig om die voordele te benut. Vector beelde is die beste vir skerms met 'n hoë resolusie aangesien dit altyd skerp resultate lewer as gevolg van die onafhanklike resolusie.
Onthou net dat die beeldoptimaliseringstegnieke, ongeag die resolusie, dieselfde is.
Optimalisering van vektorbeelde
Scalable Vector Graphics (SVG) word ondersteun deur alle moderne blaaiers.
Dit is ideaal vir tweedimensionele grafika en die formaat is gebaseer op XML-afbeeldings. SVG-lêers kan met die hand gemaak word met behulp van die teksredakteur wat u verkies, of met die meeste vektorgebaseerde sagtewaretipes.
Om die grootte van SVG-lêers te verminder, moet hulle geminimaliseer word. GZIP moet gebruik word wanneer SVG-lêers saamgepers word.
Optimalisering van rasterbeelde
'N Raster van pixels vorm 'n rasterbeeld. Die individuele pixels is op 'n tweedimensionele rooster. Byvoorbeeld, 'n reeks van 10.000 pixels vorm 'n beeld van 100 by 100 pixels. Elke pixel kodeer deursigtigheid en kleurinligting.
RGBA-waardes word deur elke pixel gestoor. Dit sluit in:
Alfa (deursigtigheid) kanaal
256 skakerings (waardes) word intern deur die blaaier toegeken. Per kanaal is dit agt bits. Per pixel is dit vier grepe. Dit maak dit moontlik om die lêergrootte te bereken deur die roosterafmetings te gebruik. Dit verg nie veel vir die grootte van die lêer om baie groot te word nie.
Dus, om die grootte van die beeldlêer te verminder, is daar 'n paar strategieë:
Verminder die beelddiepte van die prentjie. U kan dit doen deur 'n kleiner pallete te gebruik.
Optimaliseer die data wat die individuele pixels stoor.
Gereedskap en parameter verstelling
Daar is geen perfekte beeldhulpmiddel, 'n stel optimaliseringsparameters of formaat wat vir elke prentjie sal werk nie. Die beeldinhoud, en die tegniese en visuele vereistes daarvan, sal bepaal wat u moet gebruik.
Sodra u 'n goeie instellingsopset gevind het, kan u dit in die toekoms vir soortgelyke beelde gebruik om tyd te bespaar. Sorg egter dat u nooit aanvaar dat dieselfde instellings gebruik moet word om alle beelde saam te pers nie.
As u 'n paar algemene instrumente leer, kan u die regte keuse maak. Hierdie vier is van die mees gebruikte:
Gifsicle: Hiermee kan u verskillende GIF-beelde optimaliseer en skep.
Optipng: Dit word gebruik om verlieslose PNG-optimalisering moontlik te maak.
jpegtran: Met hierdie een kan u JPEG-beelde optimaliseer.
Pngquant: Dit word gebruik om die verlies van PNG-optimalisering moontlik te maak.
Lewer afgeskaalde beeldbates
Daar is twee primêre kriteria wat u moet oorweeg wanneer u beeldoptimalisering uitvoer:
Optimaliseer die totale aantal pixels van 'n prent.
Optimaliseer hoeveel grepe nodig is om elke pixel in 'n beeld te kodeer.
Die grootte van u prentlêer breek af na totale pixels vermenigvuldig met die totale grepe wat nodig is vir individuele pixelkodering. Hierdie is dit. Hou dit in gedagte wanneer u werk om die optimale grootte vir die beeldlêers op u webwerf te bepaal.
As gevolg hiervan is die doeltreffendste en maklike manier om beelde te optimaliseer, seker te maak dat u nie meer pixels stuur wat u absoluut nodig het om die bate in die blaaier op die beoogde grootte te vertoon nie.
so, moenie net op u blaaier staatmaak om beelde te herkaal nie. Dit kan daartoe lei dat hulle teen 'n laer resolusie vertoon word. Dit gebruik ook baie ekstra CPU-bronne.
Dit is oor die algemeen nie moontlik om die presiese vertoongrootte te waarborg vir elke enkele bate wat gelewer word nie. Dit is egter belangrik om seker te maak dat u alle onnodige pixels tot die minimum beperk.
Dit is ook noodsaaklik dat u u groot bates so na as moontlik aan hul vertoongrootte lewer.
Kontrolelys vir beeldoptimalisering
Al die inligting hier kan u u beelde optimaliseer sodat u webbladsye vinniger kan wees. U kan steeds pragtige prente gebruik, maar dit sal nie 'n beduidende verlangsaming veroorsaak met die laai van u bladsy nie.
Dit sal u besoekers gelukkig maak en die algemene funksie van u webwerf verbeter. Oorweeg die volgende kontrolelyspunte wanneer u u beelde optimaliseer:
Oorweeg vektorformate, aangesien dit werk vir hoë-resolusie- en veelvuldige toestelle omdat dit skaal- en resolusie-onafhanklik is.
Alle SVG-bates moet saamgepers en geminifiseer word. Dit verwyder die onnodige metadata.
Vir rasterformate, speel rond met die beste gehalte-instellings. Dit kan u 'n beduidende aantal grepe bespaar.
Bepaal u funksionele vereistes vir elke bate en kies die beste formaat vir rasterbeelde.
Outomatiseer waar moontlik om konsekwente beeldoptimalisering te verseker.
Bedien afgeskaalde prente sodat die natuurlike beeldgrootte en die vertoongrootte so eenders moontlik is.
Om dit op te som, is daar 'n wetenskap en 'n kuns tot beeldoptimalisering. Die algoritmes en tegnieke wat baie ontwikkel is, dien as wetenskap.
Die gebrek aan definitiewe antwoorde rakende individuele beeldkompressie is die kuns. Uiteindelik moet u speel en eksperimenteer. Dit stel u in staat om die beste keuse vir u beeldlêers te maak en hoe dit bydra tot u webspoed.
Met die toenemende gewildheid en gesofistikeerdheid van derdepartybouwers soos Wix, is dit maklik vir ontwerpers om slordig te raak, maar bly gefokus op die ontwikkeling en instandhouding van goeie beeldoptimaliseringsprosesse, of hulle nou 'n sjabloon slaan of 'n webwerf van nuuts af bou.