als je een foto met een taart nodig hebt, open dan de DessertPorn-sectie - het is op de een of andere manier eng om iets met zo'n einde te openen.

Zo hoort het, niet opletten ;)

Denis Inozemtsev

Toen ik bij de bank een lening aanvraagde, vertelden ze mij hetzelfde over de rente :)

Hebben beschrijvingen en trefwoorden in bestandseigenschappen invloed op de indexering? Dit gebeurt vooral in bestanden uit fotobanken. https://uploads.disquscdn.c...

Nastya Vinogradova

De beschrijving en trefwoorden in de bestandseigenschappen zijn van invloed op de snelheid waarmee het bestand door zoekmachines en browsers wordt gescand. Om de inhoud van een bestand door zoekmachines te begrijpen, zijn de bestandsnaam, de beschrijving in de alt-tag en de tekst op de pagina bij de afbeelding belangrijker.

En hoe zit het met de ‘Titel’ van afbeeldingen die niet geoptimaliseerd hoeven te worden, alleen de ‘alt’?

Raisa Skorokhodova

Ik vond vooral de volledigheid van de foto leuk, bedankt! Helaas willen klanten geen geld uitgeven aan dergelijk werk; hier zou het beter zijn om het ontwerpwerk naar de achtergrond te brengen. En als je begint te praten over het maken van een aparte sitemap voor afbeeldingen en semantische markup, zeggen ze eenvoudigweg dat hier geen chatrooms voor zijn... Nogmaals bedankt!

Anatoly Schpits

Originele foto's...bekijk tenminste zelf dit rapport van Yandex. Het maakt Yandex over het algemeen niet uit of een afbeelding origineel is of niet - dit is geen rankingfactor. Bij het rangschikken van afbeeldingen is het belangrijkste het vertrouwen van de pagina, de linkjuice, goede PF, enz. en natuurlijk tekstfactoren. En het rapport beschrijft hoe Yandex collecties clustert om de meest effectieve zoekresultaten in Yandex-afbeeldingen op te bouwen.

Wat moet u doen als 5000 afbeeldingen van de site worden gebruikt door verschillende ‘fly-by-night-sites’ / deuropeningen, en zij 5000 links naar de afbeeldingen voor u maken. Sites zijn op voorhand niet betrouwbaar.

Nastya Vinogradova

Eén optie is om afbeeldingsbestanden over te zetten naar CDN

Bedankt voor het antwoord, extern zal het een apart domein voor afbeeldingen zijn, ala, hoe werkt boeken?

Hallo! Bedankt voor het interessante artikel! Ik heb een vraag. Als de afbeelding uniek is en al op mijn site is geïndexeerd, moet ik me dan zorgen maken als een andere site deze leent? Bepaalt Google op een of andere manier de oorspronkelijke bron van de inhoud? Dezelfde vraag met betrekking tot PS Yandex. Bij voorbaat dank)

Maxim Sergejevitsj

Vertel me, wie weet het: als de website van een fotograaf een portfoliocategorie heeft, zijn er albums met alleen afbeeldingen, een lijst met werken uit een bepaald genre. Heeft het zin om ze Alt+Title te ondertekenen? Zou dit niet alleen maar leiden tot eenvoudiger zoeken en diefstal van foto's op basis van sleutels? En dan is er nog vraag nr. 2: als u tekent, hoe dan? door de dienst die gepromoot wordt of door de betekenis van de afbeelding? (Een foto waarop een verliefd stel fietst, is bijvoorbeeld een kant-en-klare ‘fotoshoot voor geliefden’ of ‘een verliefd stel fietst’?
Bij voorbaat dank!

De eerste kant van optimalisatie is de laadsnelheid

Bij het optimaliseren van afbeeldingen kunt u allereerst de grootte ervan verkleinen, zodat ze sneller via het netwerk worden verzonden. Zoals u weet, kan de laadsnelheid van een website als geheel een klein effect hebben op de zoekresultaten. Dit geldt vooral als het laden van pagina's te lang duurt.

Ik denk dat het geen geheim is dat het grootste deel van de pagina wordt gevormd door afbeeldingen. De tekst neemt een klein deel van het gewicht in beslag. Natuurlijk zijn er ook externe bestanden die kunnen worden aangesloten, wat de download ook kan vertragen, maar daar zullen we het vandaag niet over hebben. Dus als we het over inhoud hebben, duurt het laden van afbeeldingen het langst. Het kan langer duren om één afbeelding te verzenden dan een groot stuk tekst.

Oké, dus hoe kun je je afbeeldingen nu optimaliseren? Hier stel ik 2 manieren voor:

Verklein de afbeeldingsformaten tot de afmetingen die nodig zijn voor invoeging in het artikel

Comprimeer de afbeelding. Dit zorgt voor een klein kwaliteitsverlies, maar het gewicht van de foto neemt met 30-70% af!

Afbeeldingsformaten

Laten we beginnen met het eerste punt. Als u op zoek bent naar afbeeldingen om in de tekst te plaatsen, kan de resolutie ervan hoger zijn dan u nodig heeft. Op de meeste sites is de breedte van het inhoudsgedeelte bijvoorbeeld 600-800 pixels.

Dit betekent dat het geen zin heeft om een ​​afbeelding van 1200x800 pixels toe te voegen. Natuurlijk kan de motor deze zelf naar de gewenste maat ombouwen, maar in sommige gevallen is het beter om het zelf te doen. Het is immers de originele afbeelding die van de server wordt geladen, en die zal gezien de resolutie flink wegen.

Velen gaan nog verder: ze voegen hele kleine afbeeldingen in de tekst in, 200-300 pixels breed, maar nog steeds klikbaar. Dat wil zeggen dat alleen miniaturen van afbeeldingen in de tekst worden weergegeven en wanneer erop wordt geklikt, worden ze op volledige grootte vergroot. Er zijn veel plug-ins voor WordPress waarmee je dit kunt doen. Bijvoorbeeld Lightbox.

Wat krijgen we in dit geval? Wanneer de pagina wordt geladen, worden er kleine afbeeldingen geladen, die om voor de hand liggende redenen heel weinig wegen, en als u op een van deze afbeeldingen klikt, ziet de gebruiker de afbeelding op volledige grootte. Het genereren van de eerste pagina zal dus minder tijd in beslag nemen.

Bovendien heeft deze methode enkele voordelen ten opzichte van de gebruikelijke plaatsing van niet-klikbare afbeeldingen binnen de maximale breedte van het blok met het artikel. Je moet begrijpen dat 600-800 pixels niet altijd voldoende is om sommige instellingen duidelijk in de schermafbeelding weer te geven. Dit geldt vooral voor stapsgewijze instructies, waarbij het belangrijk is dat iemand naar elke foto kijkt om tot het gewenste resultaat te komen. Wanneer u dus op de miniatuur klikt, wordt de afbeelding op volledige grootte geopend, wat betekent dat deze duidelijk zichtbaar is.

Ik zag de methode met klikbare thumbnails op veel blogs en informatiesites. Over het algemeen vond ik het leuk en je kunt het gebruiken.

Beeldcompressie

Laten we nu verder gaan met het tweede punt. Hiermee kunt u uw afbeeldingen nog beter optimaliseren. Feit is dat ze standaard bijna altijd niet geoptimaliseerd zijn voor internet. Stel je voor dat je met je digitale camera prachtige foto's hebt gemaakt. Misschien wilt u ze op uw website plaatsen.

U kunt ze dus zonder problemen op uw computer bewonderen, ongeacht hoeveel ze wegen. Ook al is het maar een paar megabytes. Maar als u op zijn minst meerdere van dergelijke foto's op één webpagina plaatst, wordt de laadsnelheid onmiddellijk verminderd, en dat is zeer ernstig.

Alleen gebruikers met een zeer snelle internetverbinding van 20 megabit per seconde kunnen uw site min of meer normaal bekijken. Maar je moet begrijpen dat veel mensen een langzamere verbinding gebruiken. Velen gebruiken dezelfde 3G, sommige loggen in vanaf mobiele apparaten, enz.

Al deze mensen zullen het zogenaamde lazyloading-effect kunnen waarnemen, waarbij de foto niet onmiddellijk, maar geleidelijk, van boven naar beneden wordt weergegeven. Ik zal je eerlijk zeggen: er is weinig prettigs aan zo'n verwachting. Het is ook de moeite waard om te overwegen dat veel zware afbeeldingen niet alleen een slecht effect hebben op het laden van de pagina, maar ook op de algehele prestaties van de gebruiker in de browser. Dit is relevant als de computer van de gebruiker niet over de krachtigste bronnen beschikt.

Zo kan het verschijnen van afbeeldingen op een webpagina een eeuwigheid worden. Uiteraard kan de situatie niet zo blijven.

Een voorbeeld van beeldcompressie

Nu ga ik naar Pixabay. Dit is een gratis beeldbank waar u geheel gratis een foto kunt maken. Ik zal er een kiezen en kijken in welke resoluties deze kan worden gedownload.

Zoals je kunt zien, is dit in het origineel maar liefst anderhalve megabyte, wat veel is voor een webpagina. Een resolutie van 640 bij 420 is precies goed voor ons om in dit artikel te plaatsen. Zoals u kunt zien, is de initiële grootte al 147 kilobytes, wat 10 keer kleiner is. Maar toch is dit nog steeds behoorlijk veel, dus we zullen proberen de afbeelding iets verder te verkleinen met behulp van compressie.

Hoe comprimeer je een foto eigenlijk? Hier zie ik twee opties:

Maak hiervoor gebruik van een van de online diensten. Je kunt ze zelf vinden door simpelweg 'foto's online comprimeren' in de zoekopdracht te typen.

Open de afbeelding in Photoshop. Klik op Bestand – Opslaan voor web en stel de benodigde instellingen in.

Zo ziet het eruit in Photoshop:

Ik vind deze optie leuker omdat de kwaliteit heel flexibel kan worden beheerd. Zoals je kunt zien, is het heel goed mogelijk om naar de foto te kijken, en het gewicht is teruggebracht tot 80 kilobytes. Dit is bijna 2 keer. De kwaliteitsschuif is verschoven naar 40. Als je wilt, kun je nog minder inzetten.

Het is belangrijk om hier te begrijpen dat het uiterlijk van de afbeeldingen iets belangrijker is dan hun gewicht. Daarom is het beter om het iets meer te laten wegen, maar er normaal uit te zien, dan om het 10 keer samen te drukken, maar als je naar de foto kijkt, zullen je ogen om genade smeken. 40 is vrij klein, maar in dit geval bleek dat de foto er vrij normaal uitzag.

Dat wil zeggen dat u voor elke afbeelding afzonderlijk moet kijken hoe deze eruit zal zien wanneer deze wordt gecomprimeerd en een of ander kwaliteitsniveau moet instellen. Voor screenshots, waarbij het erg belangrijk is om iets te zien, kun je bijvoorbeeld de kwaliteit beter niet op een laag niveau van 40 zetten. Het is beter om deze op 60-80 te zetten. Vergeet ook niet het juiste afbeeldingsformaat op te geven: jpeg.

Hoe png-afbeeldingen te comprimeren

Dit is waar Photoshop het niet zo goed mee omgaat, of misschien heb ik er gewoon iets verkeerd over begrepen. Er bestaat in ieder geval zo’n dienst als optimizilla. Je kunt het vullen met een afbeelding, inclusief png, en de schuifregelaar gebruiken om het aantal kleuren aan te passen. Kortom, net als in Photoshop.

Op deze manier was het mogelijk om het gewicht van png-afbeeldingen 2-3 keer te verminderen zonder noemenswaardige kwaliteitsveranderingen.

Sprites of hoe u verzoeken aan de server kunt optimaliseren

Feit is dat naast het gewicht van de afbeelding, het aantal ervan op de pagina een rol speelt. Elke foto is één verzoek aan de server. Het is wenselijk dat er zo min mogelijk dergelijke verzoeken zijn. Maar je kunt niets doen met volwaardige afbeeldingen, en dat is ook niet nodig, laat ze elk afzonderlijk blijven laden. Een ander ding zijn de kleine pictogrammen die worden gebruikt in het siteontwerp.

Je hebt dergelijke pictogrammen waarschijnlijk op bijna elke website opgemerkt. Dit kunnen bijvoorbeeld social media buttons zijn. Pictogrammen maken design interessanter. Maar als ze allemaal één voor één worden geladen (en er kunnen meer dan tien pictogrammen zijn), dan zijn er veel verzoeken aan de server.

Om dit op te lossen, maken ze zogenaamde sprites. Dit is wanneer alle pictogrammen worden gecombineerd tot één grote afbeelding en vervolgens op de juiste plaats in de sjabloon worden ingevoegd met behulp van achtergrondpositionering. U kunt meer over deze techniek leren bij het bestuderen van CSS en website-optimalisatie. Welnu, in dit artikel zal ik alleen maar vermelden dat een dergelijke techniek bestaat, zodat je het weet.

Welnu, hiermee hebben we de eerste kant van optimalisatie behandeld. Laten we verder gaan met de volgende.

De tweede kant van optimalisatie zijn afbeeldingsbijschriften

Hiermee bedoel ik niet alleen de handtekeningen die je daadwerkelijk onder de foto's ziet. Hoewel ze ook hun eigen ondergeschikte rol spelen bij de optimalisatie. Maar in principe zijn dergelijke handtekeningen noodzakelijk voor het gebruikersgemak en vervangen ze het titelattribuut.

Naast de titel hebben afbeeldingen ook een alt-attribuut, wat nog controversiëler is dan het eerste attribuut. Eerst moet je uitzoeken waar ze voor zijn. Titel is een tooltip die verschijnt wanneer u over een afbeelding beweegt. Alt – alternatieve tekst die alleen wordt weergegeven als de gebruiker afbeeldingen heeft uitgeschakeld.

Over het algemeen kan het alt-attribuut al als ouderwets worden beschouwd. Vroeger, toen je een maand lang 30 megabytes aan verkeer ontving, schakelden veel mensen afbeeldingen uit om het gewicht van webpagina's sterk te verminderen. Tegenwoordig nadert het aantal mensen dat met uitgeschakelde foto's zit bijna nul. Ik heb hier uiteraard geen onderzoek naar gedaan, maar het ligt voor de hand.

Heeft het dus enig voordeel om de alt en titel in te vullen? We kunnen zeggen dat het zeker bestaat, maar het is niet zo groot als sommige mensen denken (vul de alt in en je komt bovenaan). Over het invullen van deze attributen heb ik meer geschreven in eerdere artikelen hierover.

Om het kort samen te vatten: het belangrijkste is dat u geen trefwoorden spamt. De tekst mag niet langer zijn dan 150 tekens en de afbeelding zo specifiek mogelijk beschrijven. Dezelfde titel en alt kunnen als optimaal worden beschouwd. Dat wil zeggen, u vult eenvoudigweg één attribuut in, kopieert de tekst en plakt deze in een ander attribuut.

Eigenlijk is het allerbelangrijkste wat jouw persoonlijke doelen zijn. Want als u niet het verkeer uit het zoeken naar afbeeldingen target, heeft het weinig zin om attributen in te vullen. Ze zullen je niet helpen stijgen in Yandex. Het enige dat kan worden gezegd is dat de Google-zoekmachine de aanwezigheid van een normale alt en titel lijkt te gebruiken als een van de rankingfactoren. Maar deze factor speelt waarschijnlijk een kleine rol.

In het artikel over het alt attribuut gaf ik een voorbeeld van producten in een online winkel. Dit is de plek waar naar mijn mening gevulde attributen goed van pas kunnen komen. Want als u de naam van het product duidelijk in uw attributen vermeldt, kan een bepaald percentage van de mensen dit product bereiken door de naam in te typen in een afbeeldingenzoekopdracht. Over het algemeen moet u ook rekening houden met het type site.

Nou, misschien is dat alles wat ik je wilde vertellen over hoe je afbeeldingen voor een website kunt optimaliseren. Ik hoop dat de informatie nuttig voor u was en dat u een deel hiervan in de praktijk zult brengen. Zoals altijd vindt u bij ons nog meer nuttige tips voor SEO. Vrolijke foto's voor jou!

Helaas werkte een van de services op het moment van de overdracht niet meer. Maar de inwoners van Khabrovsk boden nog veel meer goede oplossingen!

Een van de gemakkelijkste manieren om de responstijd van pagina's op uw site te verbeteren, is door uw afbeeldingen te optimaliseren.

Er zijn verschillende gratis tools waarmee u uw afbeeldingen kunt verkleinen en optimaliseren. In dit artikel vindt u handige hulpmiddelen om afbeeldingen voor het web te maken die zo weinig mogelijk wegen.
Een overzicht van de tools staat onder de snede.

Smush.it maakt gebruik van afbeeldingsformaat-specifieke optimalisatietechnieken om onnodige bytes uit afbeeldingsbestanden te verwijderen. Het is een verliesvrije optimalisatietool, wat betekent dat het de afbeelding optimaliseert zonder het uiterlijk of de visuele kwaliteit te veranderen. Smush.it draait op een webpagina. De app vertelt u hoeveel bytes er worden bespaard door pagina-afbeeldingen te optimaliseren en biedt een downloadbaar zip-bestand van de verwerkte bestanden.

Er is geen afbeelding omdat deze plug-in werkt vanaf de opdrachtregel. Werkt in UNIX, LINUX en ook in MS-DOS.
Optimaliseert PNG. Maakt gebruik van verschillende compressiemethoden en kan ongewenste hulpblokken verwijderen.
Pngcrush is open source.

Grafische optimalisatie in PNG-formaat. Converteert ook GIF en BMP naar PNG.
Hiermee kunt u de grootte van het PNG-bestand handmatig verfijnen of automatisch aanpassen.

Werkt vanaf de opdrachtregel. Het kan maar één ding doen: 32-bits PNG's met alfa-transparantie converteren naar 8-bit palet-PNG's met alfa-transparantie. Maar het doet het heel goed, veel beter dan Vuurwerk, al is het ook niet zonder problemen.

14. PictureBeaver (met dank aan Carl_Linnaeus)
Optimalisatie voorbeeld:

Auteur - Artem Sapegin
PictureBeaver optimaliseert automatisch webafbeeldingen (PNG, GIF en JPEG) door hulpgegevens uit bestanden te verwijderen die de weergave niet beïnvloeden. Meestal is het mogelijk om het bestandsvolume met 10-30% te verminderen.
GIF zonder animatie wordt geconverteerd naar PNG als dergelijke bestanden kleiner zijn. Voor optimalisatie worden gratis hulpprogramma's OptiPNG, jpegtran en Gifsicle gebruikt.

15. Kleurkwantiseerder (dankzij Subdivision)

Color Quantizer is een klein programma waarmee u eenvoudig afbeeldingen voor internet kunt optimaliseren.
Belangrijkste kenmerken:

Converteren naar een willekeurig aantal kleuren
ondersteuning voor png8-opname met transparantie
mogelijkheid om een ​​kwaliteitsmasker in te stellen voor belangrijke gebieden
handige paletbewerking
automatische selectie van optimale parameters voor PNGOUT

16. Enot_23)

Een zeer handige optimalisatie voor Windows.
Comprimeert PNG, converteert naar PNG van BMP, GIF, TGA. Hiermee kunt u PNG-screenshots maken.

20. TweakPNG (bedankt stalkers)

TweakPNG is een hulpprogramma op laag niveau voor het onderzoeken en wijzigen van PNG-bestanden. Voor Windows 2000 of hoger. Om het te kunnen gebruiken, moet je op zijn minst enige kennis hebben van het PNG-formaat.
Volgens stalkers helpt het veel als PNG is opgeslagen in Photoshop CS2. Feit is dat versies van Photoshop onder CS3 allerlei onzin aan het bestand toevoegen, incl. en dimgegevens. Als gevolg hiervan ziet het beeld er in IE donkerder uit dan in andere browsers, omdat... alle anderen lezen alleen de foto zelf.

Met behulp van het hulpprogramma kunt u het eenvoudig verwijderen. Je kunt ook opmerkingen weggooien zoals "bewerkt in Adobe Photoshop". Naast het wegwerken van storingen, zullen we ook een kleine winst in omvang behalen.

Om ervoor te zorgen dat een groot aantal mensen uw site bezoeken, ben ik er 100% zeker van dat u geweldige en geweldige berichten schrijft.

Je scherpt ze aan voor zoekopdrachten met een lage en middenfrequentie, koopt externe links en past in één woord de standaard SEO-regels toe.

Bent u bekend met het concept van beeldoptimalisatie? Hoe vakkundig doet u dit op uw blog (gebruikt u beeldoptimalisatie voor de site als geheel).

Feit is dat toen ik voor het eerst begon met het schrijven van deze blog, ik, om de artikelen op de een of andere manier te versieren, probeerde er afbeeldingen in in te voegen.

Je zegt, wat is hier mis mee, de man is geweldig in het aantrekkelijker maken van de inhoud voor lezers. Dat dacht ik ook, totdat ik onder het filter viel.

Na zo'n trieste gebeurtenis met mijn blog, begon ik het onderhouden, promoten en vullen van de site met interessant materiaal zeer serieus te nemen.

Wat heb ik verkeerd gedaan met de foto's op de site? ALLE! Ik heb nooit zoiets geweten, en als het toeval er niet was geweest, zou ik het nooit hebben geweten.

Om de een of andere reden leek het mij dat als ik de foto van iemand anders van andere sites zou nemen en deze voor mezelf zou kopiëren, het zou worden beschouwd als dat ik al mijn eigen afbeelding had, en de algoritmen van zoekmachines zouden dit niet kunnen bepalen.

Vaak hadden de namen zogenaamd geoptimaliseerde afbeeldingen: 3456.png of as12.jpg. Ik vraag me af welk trefwoord ze bij zo'n naam droegen?

De velden ‘ALT’ en ‘TITLE’, die ingevuld konden worden bij het toevoegen van een andere afbeelding aan de site, bleven velden die ingevuld konden worden.

Herhaal nooit mijn fouten. Leer van anderen, niet van die van jezelf. En dan ben je niet meer bang voor filters van zoekmachines en groeit het verkeer alleen maar.

In dit artikel zullen we leren hoe we afbeeldingen op de juiste manier kunnen optimaliseren en begrijpen welke rol het daarin speelt.

Waarom heb je beeldoptimalisatie nodig?

1) Zodat uw site extra bezoekers ontvangt dankzij klikken op afbeeldingen in de resultaten van zoekmachines.

Is het je opgevallen dat bij sommige zoekopdrachten in zoekmachines ook afbeeldingen die relevant zijn voor deze zoekopdracht in de resultaten boven alle resultaten worden weergegeven?

Laten we als voorbeeld de zoekopdracht in de zoekbalk invoeren "computer" en kijk naar de resultaten van de meest populaire systemen: Yandex en Google.

Google gedroeg zich een beetje anders dan Yandex.

Zoals je kunt zien in de Yandex-resultaten, zijn er bovenaan alle resultaten zeer aantrekkelijke (heerlijke) foto's verschenen, die je uitnodigen om erop te klikken.

De situatie met het Google-systeem is een beetje anders, omdat de foto's daar in het midden van de resultaten verschenen, maar ik denk niet dat dit op de een of andere manier de verzameling zal verstoren.

Een belangrijk gegeven is dat als je voor een specifiek verzoek de TOP niet haalt, dit niet betekent dat als je voor dit verzoek een geoptimaliseerde afbeelding maakt, deze niet de topposities van de afbeeldingen bereikt. Soms komt het voor dat je bij de gepromote zoekopdracht onderaan bovenaan staat, en bij de afbeeldingen bovenaan.

2) Als u commerciële vragen wilt promoten, zullen mensen deze hoogstwaarschijnlijk vinden bij de uitgifte van afbeeldingen, dus optimalisatie speelt hier de belangrijkste rol.

3) Inhoudsregels! Zonder superkrachtige en coole inhoud kun je geen populaire en nuttige website maken die .

En artikelen die alleen met materiaal zijn gevuld (zonder afbeeldingen te gebruiken) zullen niet aantrekkelijk zijn voor bezoekers en zullen niet de hele essentie van uw gedachten kunnen onthullen. Persoonlijk, als ik op een pagina beland die alleen maar tekst is, verlaat ik deze voor altijd.

4) De algoritmen van zoekmachinerobots geven artikelen die afbeeldingen gebruiken veel meer gewicht dan gewone tekst.

5) Laadsnelheid van blogpagina. In onze tijd van snelle modems wacht niemand langer dan 5 seconden totdat de gewenste pagina is geladen. En als u de afbeelding niet optimaliseert, kan zo’n pagina zelfs na 20 seconden niet worden geladen.

1) De afbeelding moet uniek zijn. Ik schreef hierover aan het begin van dit bericht. Als u denkt dat zoekmachines het unieke karakter van afbeeldingen niet kunnen bepalen, dan vergist u zich ernstig.

Als je geleende afbeeldingen moet gebruiken, probeer ze dan op zijn minst een beetje te veranderen (verander het formaat, de grootte, de rotatiehoek of maak een collage).

2) Hoe groter het afbeeldingsformaat op de pagina, hoe beter dit de weergave ervan in de afbeeldingsresultaten zal beïnvloeden.

3) Plaats geen foto's die meer wegen dan 50 KB- onthoud bezoekers die geen uur kostbare tijd zullen verspillen terwijl de pagina wordt geladen.

4) Zorg ervoor dat u uw website of bedrijfslogo optimaliseert. Dit helpt uw ​​eigen foto's tegen diefstal te beschermen en fungeert als domeinreclame.

5) Gebruik attribuut "ALT". Voer in dit attribuut een alternatieve beschrijving van de afbeelding in. Gebruikers zien precies wat daar staat als de weergave van afbeeldingen in de browser is uitgeschakeld.

Het is de moeite waard om een ​​trefwoord in deze tekst op te nemen, omdat er bij het rangschikken van pagina’s rekening wordt gehouden met het ‘alt’-attribuut.

6) Gebruik attribuut "TITEL". Schrijf in dit attribuut op wat gebruikers te zien krijgen als ze met de muis over de afbeelding bewegen. Door de beschrijving van het ‘alt’-attribuut enigszins te wijzigen, kunt u het in ‘title’ gebruiken.

7) Vergeet het niet "HOOGTE" En "BREEDTE". Deze attributen geven de hoogte en breedte van de afbeelding aan. Hoe meer informatie we zoekmachines over de afbeelding geven, hoe beter deze de zoekresultaten zal beïnvloeden.

8) Vermijd het gebruik van geanimeerde afbeeldingen als u niet wilt dat zoekmachines deze als banners beschouwen en er geen rekening mee houden bij het rangschikken.

9) De tekst rond de afbeelding moet . Yandex- en Google-robots geven meer gewicht aan tags

,

,

etc., dus het gebruik ervan in de tekst naast afbeeldingen is alleen maar een pluspunt.

10) Geef afbeeldingen de juiste namen. Als u een afbeelding over computerreparatie hebt geplaatst, moet de naam van een dergelijke afbeelding overeenkomen met het type "remont-kompyutera", maar onder geen beding "16-nu" of iets soortgelijks.

11) Denk na over het formaat. Google en Yandex beschouwen afbeeldingen in het png- en jpg-formaat als foto's, en het gif-formaat als afbeeldingen (knoppen of ontwerpelementen).

12) Optimaliseer niet alleen de afbeelding op de pagina, maar ook de pagina zelf. Hoe meer gewicht de pagina heeft, hoe meer gewicht de afbeelding zal hebben.

Hier is een sjabloon voor de juiste beeldoptimalisatie:

afbeeldingen. Selecteer in het veld "Grootte" de gewenste maat breedte En hoogte.

Conclusie

Nu zult u geen problemen ondervinden om de afbeeldingen van artikelen en de sjabloon op de site goed te optimaliseren.

Zodra ik wat meer vrije tijd heb, ben ik van plan de afbeeldingen van alle oude berichten op de site te optimaliseren.

Als je vragen hebt, stel ze dan aan mij - ik zal iedereen helpen. Doei!

Hallo allemaal vrienden! In dit artikel zal ik het hebben over het belang van het optimaliseren van afbeeldingen op uw website, of u nu WordPress of alleen een statische site gebruikt. Het optimaliseren van elke afbeelding fungeert als een belangrijke schakel in de keten en de ranking van de site bij het zoeken naar afbeeldingen (op voorwaarde dat al uw afbeeldingen uniek zijn en nergens verschijnen, bijvoorbeeld als u een trainingsartikel maakt).

Er zijn maar weinig mensen die zich met deze procedure bezighouden, maar de kleinste details vormen het algemene beeld van de vooruitgang.

Een onbetwist voordeel van een goede optimalisatie van afbeeldingen is dat ze snel worden geladen, wat leidt tot hogere snelheid en verbeterde gedragsfactoren op de site. We zullen hier nog wat verder over praten. Laten we nu wat dieper ingaan op het materiële deel van onze notitie. Laten we het proces van binnenuit bekijken. U heeft dus een artikel en u wilt er mediabestanden in plaatsen. Hieronder geef ik belangrijke tips die ik zelf toepas.

Geef uw afbeeldingen een naam voordat u ze naar de site uploadt

Met dit punt bedoel ik dat uw bestanden geen naam mogen krijgen DCIM111223. jpeg, of 1231231dsrgib.png. Over het algemeen begrijp je de essentie. Als u een foto van een rode Ford Mustang op uw website plaatst, kunt u beter de volgende naam voor de foto schrijven:

2012-Ford-Mustang-LX-Rood.jpeg

Maak er ook een regel van: "Geef NIET al uw foto's een naam met Russische letters." Ten eerste worden ze slecht verwerkt door het CMS en veroorzaken ze fouten bij het controleren van Broken Link Checker op verbroken links. Overigens raad ik u ten zeerste aan deze plug-in te installeren en de algemene status van al uw links op de site te bekijken. Houd de site, om zo te zeggen, referentieel schoon. Er is trouwens een bijzondere. Lezen.

Optimalisatie van metatags

Ja, mijn vrienden, niet alleen de pagina heeft metatags, zoals titel, beschrijving, trefwoorden. Afbeeldingen hebben ook hun eigen tags: alt en titel. Wanneer u een afbeelding invoegt, is het erg belangrijk om deze op te schrijven. Voor ons voorbeeld hierboven zou het er als volgt uitzien:

In deze schermafbeelding laten we de zoekopdracht een beschrijving van onze afbeelding zien, ingesloten in een alt-tag. Als de gebruiker door de site navigeert terwijl afbeeldingen uitgeschakeld zijn (wat tegenwoordig gek klinkt met het gekke internet), dan wordt in plaats daarvan deze beschrijving weergegeven.

Vergeet ook niet dat de afbeeldingen ook namen hebben, die erin staan. Als u er met de muis overheen gaat, wordt de naam gemarkeerd.

Concentreer u niet op op afbeeldingen gebaseerde SEO

Omdat de meeste webmasters de voordelen begrijpen van het rangschikken van een site op basis van afbeeldingen, beginnen ze zoveel mogelijk trefwoorden aan elke site toe te voegen, wat de afbeelding zelf niet altijd correct karakteriseert. Wat bedoel ik? Stel dat u een mediabestand publiceert waarop de achterruit van een auto te zien is en dat uw belangrijkste zoekopdracht voor deze pagina bijvoorbeeld een autoservice in Minsk is. Het is dus NIET NODIG om “autoservice in Minsk” aan te geven in de metatags, maar om iets aan te geven als “vervanging van achterruiten in Minsk”, dit zal logisch en competent zijn. Zoekmachines zijn niet gek en weten natuurlijke oplichting te herkennen. Wees dus natuurlijker bij het optimaliseren van afbeeldingen op uw website.

Verminder het beeldgewicht

In feite is dit een heel belangrijk punt, ook al staat het op de vierde plaats. In eerste instantie moet u al uw foto's kleiner maken. Het is niet nodig om dwaas afbeeldingen te downloaden van de iPhone-camera, die 2 megabytes weegt. Kun je je voorstellen hoeveel moeite het kost om al je foto's op één pagina te openen, en als het er tientallen zijn... De conclusies doen zich voor. Dus hoe kun je foto’s optimaliseren door hun gewicht te verminderen? Het antwoord is eenvoudig. Gebruik Photoshop. Voor mij is het een desktopprogramma dat elke blogger altijd bij de hand moet hebben. Als u niet alle functionaliteit van het programma nodig heeft, waarvan het distributiepakket ongeveer 700 megabytes weegt, kunt u een "verkorte versie" gebruiken die portable wordt genoemd.

Open onze afbeelding in dit programma. Ik raad aan om voor al je foto's hetzelfde formaatformaat te gebruiken. Ik gebruik bijvoorbeeld een vaste lengtegrootte van 520 pixels, sommige zijn kleiner, sommige zijn groter. Voor mezelf heb ik deze dimensies gedefinieerd.

Klik op OK. De volgende stap is het opslaan van de afbeelding voor internet. Ga naar het bestand en selecteer het juiste item.

Vervolgens moeten we een formaat kiezen om onze afbeelding op te slaan. Ik raad aan om png of jpeg te gebruiken. Als u screenshots maakt van uw acties, kunt u beter in de laatste optie opslaan, aangezien de afbeelding bij de opgegeven waarden minimaal zal wegen. Maak de kwaliteit rond de 40. Als resultaat krijg je zoiets als dit:

Tegelijkertijd zal het gewicht van de afbeelding erg klein zijn, en dat is wat we nodig hebben.

Afbeeldingen optimaliseren voor een WordPress-site

Dit is waar ik u raad om heel voorzichtig te zijn, aangezien de meesten van u al in de beginfase van het maken van een website een fatale fout maken en zich daar niet van bewust zijn. Het punt is dat wanneer je een afbeelding uploadt naar een mediabibliotheek, je denkt dat er maar één afbeelding is geladen. Ik haast me jullie teleur te stellen, lieve vrienden! Nee en nog eens nee. Er worden verschillende mediabestandsformaten geladen, d.w.z. uw foto wordt meerdere keren gedupliceerd in verschillende formaten! Nu kunt u zich de schok voorstellen. Ik heb dit ook een keer meegemaakt. Wees niet boos. Als je net bent begonnen met het bijhouden van je online dagboek op WordPress, dan is er nog tijd om alles in orde te maken.

Wat heb ik precies gedaan

Nu zal ik je vertellen welke acties ik heb ondernomen om de afbeeldingen op mijn website te optimaliseren.

De eerste stap was het gebruik van FTP-toegang en het handmatig (!) verwijderen van alle duplicaten. Hieronder ziet u een voorbeeld van 1 afbeelding, die in 4 formaten is gerepliceerd.

In eerste instantie heb ik de afbeelding 01_post.jpg één keer geüpload en uiteindelijk nam deze iets meer dan 72 kb ruimte in beslag. Draai nu je hoofd om en stel je voor dat je honderden foto's op je blog hebt staan... Het is triest, maar ik heb alles handmatig gedaan.

Het pad waar al uw foto's in berichten worden opgeslagen, bevindt zich op dit adres:

Public_html/wp-content/uploads/mappen per jaar/map per maand

Public_html / wp - inhoud / uploads / mappen op weer / map op maand

Zodra je dit allemaal hebt gedaan, ga je verder met de tweede stap. Daarin stellen we een regel in voor het toevoegen van mediabestanden aan de blog. Ga naar “Instellingen - Mediabestanden” en stel de miniatuurwaarde als volgt in op nul:

Sla de wijzigingen op en u kunt zich rustig verheugen. Hoe lang dit duurt, verschilt van persoon tot persoon, afhankelijk van het aantal foto's. Ik herinner je er nogmaals aan: plaats de afbeelding NIET als mediabestand, d.w.z. tijdens het uploaden moet je het als volgt doen:

Programma's voor beeldoptimalisatie

Als u niet elk van uw afbeeldingen afzonderlijk wilt optimaliseren, is er een oplossing. Hier zal ik een lijst met programma's geven waarmee je met één klik het gewicht van alle afbeeldingen kunt verminderen. En upload ze vervolgens opnieuw naar uw server. De volgorde is als volgt: download eerst alles via FTP-toegang - de hele map. Zorg ervoor dat u elk jaar en elke maand niet afzonderlijk verwart, anders krijgt u later fouten (afbeelding niet gevonden). Laten we dus beginnen met het beoordelen van de programma's.

Opstand

Radicale beeldoptimalisatietool – als je de instellingen niet wilt begrijpen, dan is dit wat je nodig hebt. Het programma kan: afbeeldingen optimaliseren, roteren, comprimeren tot een bepaald volume, de grootte in punten wijzigen en nog veel meer.

Het dialoogvenster van het programma is intuïtief: de voorafbeelding bevindt zich aan de linkerkant en de naafbeelding en de uiteindelijke bestandsgroottes bevinden zich aan de rechterkant:

Als u de batchoptimalisatiemodus wilt inschakelen, klikt u op de knop Batch. Versleep gewoon alle benodigde bestanden en vergeet niet de uiteindelijke map op te geven waar de geoptimaliseerde afbeeldingen zullen worden geüpload. Het programma doet alles zelf.

Online beeldoptimalisatie

Dit is al een online dienst voor het optimaliseren van afbeeldingen voor uw website. De interface is ook uiterst eenvoudig. Upload een afbeelding of specificeer de URL, kies naar welk formaat u wilt converteren en klik op de knop Optimaliseren.

Dit programma is ook goed omdat je de kwaliteitsparameter van Jpeg-foto's kunt vergelijken (klikbaar):

Een redelijk functioneel programma met een handige "viewer" voor afbeeldingen. Het werkt vrij snel, heeft een groot aantal functies. Batchverwerking van foto's is ook mogelijk.

In dit programma zul je de instellingen al een beetje moeten begrijpen. Als in Riot alles met één muisbeweging werd gedaan, dan zijn er hier veel meer mogelijkheden.

U kunt de grootte van de afbeelding vrij wijzigen in percentages of punten (u kunt zelfs specifiek opgeven hoeveel punten er aan de langere kant en aan de kortere kant moeten zijn). Ook is het mogelijk om er diverse in te stellen: rotaties, transformaties, verscherping, vervaging, kleurveranderingen en meer.

Om de batchverwerking te starten, moet u naar het menu Bestand-Batchconversie/hernoemen gaan of de b-sneltoets gebruiken.

Om afbeeldingen te verkleinen en te optimaliseren heeft u het volgende nodig:

1. Selecteer al uw mediabestanden.
2. Voeg ze toe aan de bestandswachtrij voor werk.
3. Geef in beide menu's aanvullende instellingen op.

De parameter Save Quality kan worden ingesteld tussen 80-94.

Voor de meeste afbeeldingen (bijvoorbeeld werkvoorbeelden, productkaarten) kan de grootte in punten aan één zijde worden ingesteld op maximaal 800.

Handige diensten voor beeldcompressie en -optimalisatie

Dit is het moment om verder te gaan met een beschrijving van de services die hun tools voor beeldoptimalisatie bieden. Er zijn er maar een paar, de coolste staan ​​op deze lijst.

PunyPNG

Een gratis en interessante online service die webmasters en ontwikkelaars waarderen als ze afbeeldingen maximaal willen comprimeren. U kunt er maximaal 10 bestanden tegelijk naar uploaden en deze vervolgens allemaal in één archief downloaden. Deze service begrijpt gif-, png- en jpg-formaten.

Vergeleken met de vorige tool beschikt onze volgende kandidaat over drag’n’drop-functionaliteit, zodat je veilig bestanden kunt slepen en neerzetten die verkleind moeten worden. Waarschijnlijk heeft slechts één een nadeel opgemerkt: het werkt uitsluitend met het png-afbeeldingsformaat.

We gebruiken dit adres - https://tinypng.com

Met deze handige tool kunt u niet alleen de afbeeldingen op uw site optimaliseren, maar ook de beeldverhouding in pixels en percentages wijzigen en verschillende effecten toepassen. U kunt de kwaliteit van het beeld instellen.

Maak je nu klaar, beste webmasters... Met deze service kun je het formaat van een afbeelding eenvoudig tot 5 keer wijzigen, zonder veel kwaliteitsverlies. Uw afbeelding ziet er precies hetzelfde uit als vóór de optimalisatie. Deze oplossing bespaart u aanzienlijk veel schijfruimte en versnelt uw site aanzienlijk.

De eenvoudigste service zonder franjes met duidelijke bedieningselementen voor het online optimaliseren van afbeeldingen. Selecteer de gewenste afbeeldingen, uitvoerkwaliteit, afmetingen en ontvang het resultaat. Een ander onmiskenbaar voordeel is de mogelijkheid om het programma naar uw computer te downloaden en ongeacht internet te werken.

Ik speelde met dit ding en besefte dat het een heel goed hulpmiddel was. Geweldige functionaliteit. Afbeeldingen kunnen worden gedraaid, er is een vergelijking van de grootte van de originele en geoptimaliseerde bestanden. Je kunt veel filters toepassen, het frame, de scherpte, de grootte en nog veel meer instellen.

Stel het gewenste interval in van 0 tot 999 en krijg een afgerond beeld. Zo is het bij mij gelukt.

Het ontwerp van de site stamt uiteraard uit de jaren 2000, maar voor het ontwerp zijn we er niet op gekomen. Alles is hier heel eenvoudig: selecteer het bestand op uw computer, het compressieniveau, de uiteindelijke afmetingen van de afbeelding en klik op Foto optimaliseren.

Snelle service met vriendelijke bediening. U kunt eenvoudig afbeeldingen uploaden of het adres opgeven en comprimeren. Of u kunt de afbeelding eenvoudigweg naar het browservenster slepen en neerzetten

Het officiële internetadres is https://kraken.io

Dat is alles, beste vrienden. Ik heb geprobeerd alle mogelijke opties voor het optimaliseren van afbeeldingen op uw site tot in het kleinste detail te beschrijven. Kies degene die je leuk vindt en gebruik deze waar mogelijk.

Onthoud dat zoekmachines van snelle sites houden en deze voorrang geven in de zoekresultaten. Dag iedereen. Vergeet niet op de sociale knoppen te klikken en het materiaal met je vrienden te delen. Abonneer je op het kanaal op Youtube. Zorg goed voor jezelf en heb een goed humeur!