Standard billedstørrelser og hvordan du tilføjer brugerdefinerede størrelser

når du uploader et billede, gør du en masse arbejde bag kulisserne, så du kan servere billedet til dine besøgende. Du kan piggyback på denne proces og tilføje brugerdefinerede billedstørrelser for at gemme at skulle ændre størrelsen på billeder manuelt.

i dette indlæg vil jeg forklare, hvordan og hvorfor vi skaber forskellige billedstørrelser. Så lærer jeg dig, hvordan du tilføjer dine egne billedstørrelser ved at ændre funktionerne.php fil, regenerere thumbnails og tilføje dine nye billedstørrelser til Gutenberg billede blok og/eller ordtryk loop.

billedstørrelser forklaret

hver gang du uploader et billede til mediebiblioteket, er dette de ekstra billedstørrelsesindstillinger, der oprettes som standard:

• Thumbnail
• Medium
• Medium Large
• Large

hvis dit tema angiver yderligere billedstørrelser, opretter ordtryk også dem.

bevarer også den oprindelige størrelse, du uploader, og navngiver den fuldt ud som i fuld størrelse.

du kan se alle disse (med undtagelse af Medium_Large) i Gutenberg image block billedstørrelse falde ned, når du indsætter et billede på en side eller et indlæg.

hvorfor skaber vi så mange billeder?

billeder er som bukser. Du vil sikre dig, at du får den rigtige størrelse. Bukser og billeder, der er for små, ser dumme ud, og det er smerteligt indlysende for dig og alle andre, at de ikke passer rigtigt. For små billeder på din hjemmeside vil se strakt ud eller billedbillede.

derimod, hvis de er for store, er det super spildt. Du ville ikke sætte et par bukser lavet til en mand på en baby, ikke? Det er så meget ekstra stof, der ikke engang er nødvendigt. Den baby vil gå tabt i et bukseben 😉

billederne er de samme. Hvis dit billede er for stort til containeren, spilder du båndbredde og tid på at hente det til at blive vist på din side. Og for hvad? For ingenting.

ideelt set skal de billeder i fuld størrelse, du uploader, være store nok til at passe til den største billedcontainer på din side, men ikke større. Så når du bruger billeder på din hjemmeside, skal du bruge den nøjagtige størrelse billede, du har brug for.

da det tager værdifuld tid at skalere billeder for at skabe den rigtige størrelse i Photoshop eller anden billededitor, påtager sig denne opgave og gør det for dig. Tak Skal Du Have!

alt hvad du skal gøre er at vælge den passende størrelse, når du indsætter et billede på din side for at få ydelsesfordelene ved at bruge et billede, der er helt rigtigt.

hvis standardbilledstørrelserne ikke passer perfekt til dit tema, kan du justere standardindstillingerne i sektionen medier > indstillinger eller tilføje brugerdefinerede størrelser, så du har flere muligheder at vælge imellem.

standard billedstørrelser er som følger:

• 150 stk. firkant for miniaturebilleder
• 300 stk.bredde for mellemstore billeder
• 768 stk. maks. bredde for mellemstore billeder
• 1024 stk. maks. bredde for store billeder.

Medium_large blev tilføjet for at drage fordel af lydhør Billedstøtte, hvorfor det ikke er inkluderet på indstillingssiden. Apropos responsive billeder …

Responsive billeder

alle disse billeder i forskellige størrelser tjener et andet formål, så du bør ikke indstille standardindstillingerne til nul for at forhindre, at du opretter dem, som nogle tutorials antyder.

tilføjet responsive billeder til kernen i version 4.4. I stedet for at udfylde billede src attributter med URL ‘en for kun et billede, tilføjede også srcset (sæt kilder), som er en liste over URL’ er med billeder i forskellige størrelser.

Gæt hvilke billeder Det bruger til at oprette denne liste? Bruger de samme billeder i forskellige størrelser, det skaber, når du uploader et billede.

den tilbyder denne liste til bro.sereren, så den kan vælge et billede, der passer til den besøgendes enhed. Hvis den besøgende bruger en mobilenhed, modtager de et mindre billede i srcset. Hvis de besøger din hjemmeside på en desktop Retina-enhed, vil de modtage den Retina-ready billedfil i fuld størrelse, du uploadede. Igen er det derfor, du skal uploade et billede, der er stort nok til at udfylde dette behov.

når du tilføjer en brugerdefineret billedstørrelse, tilføjes den til srcset, så længe den har samme billedformat. Hvis den brugerdefinerede billedstørrelse beskærer billedet i en anden form, udelades det fra sættet.

“Internetoptimering” større billeder

5.3 introducerede en ny måde at administrere store billedfiler ved at registrere og generere en “internetoptimeret maksimal størrelse” af dem.

hvordan virker det?

når et nyt billede uploades, registrerer det, om det er et “stort” billede baseret på, om dets højde eller bredde er over big_image threshold.

standardtærskelværdien er 2560ph (dette kan ændres ved hjælp af det nye big_image_size_threshold filter).

hvis et billedes højde eller bredde er over denne tærskel, skaleres det ned – med tærsklen brugt som maks.højde og maks. bredde værdi.

det nedskalerede billede vil blive brugt som den største tilgængelige størrelse.

vil du deaktivere skaleringen?

skaleringen styres af big_image_size_threshold filteret.

returnering false fra filteret tilbagekald vil deaktivere det (som nedenfor):

add_filter( 'big_image_size_threshold', '__return_false' );

miniaturer og Featured billedstørrelse

vi har nu nået den del af vores tutorial, hvor vi vil afsløre hele miniaturebilledet/det fremhævede billede rod. Grundlæggende kan problemet koges ned til dette; fordi ordtryk opretholder bagudkompatibilitet, når det udvikler sig, ændres navnene på ting, men funktionerne henviser stadig til ting ved deres gamle navne.

billedstørrelsen blev introduceret i version 2.9, men blev hurtigt ændret til fremhævede billeder i version 3.0, men desværre sidder navnet Fast. Så du vil ofte høre fremhævede billeder kaldet miniaturer i tutorials og endda i funktionsnavnene.

her er nogle eksempler:

• hvis dit tema ikke har fremhævede billeder, og du vil aktivere denne funktion, tilføjer du add_theme_support( 'post-thumbnails' ); til din funktionsfil.
• hvis du vil vise billedstørrelsen i et tema, skal du bruge funktionen the_post_thumbnail().

miniaturebilleder og fremhævede billeder deler en standardstørrelse på 150 stk.med 150 stk. Hvis du bruger the_post_thumbnail() funktion uden et argument for at angive størrelsen, vil den bruge standard 150pks kvadratstørrelse.

for at gøre dette mindre forvirrende for dig selv, så du faktisk kan bruge den rigtige størrelse, foreslår jeg at oprette en brugerdefineret billedstørrelse og navngive den fremhævet-stort eller noget lignende. Så når du vil bruge det billede i you ‘ re the loop, bruger du the_post_thumbnail('featured-large').

før du begynder at oprette brugerdefinerede billedstørrelser i

når du begynder at oprette brugerdefinerede billedstørrelser, skal du undgå at gå overbord og oprette billeder til ethvert tænkeligt formål. Ellers vil du brænde gennem plads på din hosting, og hvis du bruger en billedoptimeringstjeneste, der opkræver dig pr.

hvis din plan giver dig mulighed for at optimere 100 billeder, men hver upload genererer 9 ekstra størrelser, der også skal optimeres, rammer du din grænse, når du uploader 10 billeder. Husk dette, når du tilføjer brugerdefinerede størrelser og vælger billedoptimeringsplaner.

Smush Pro har ikke billedoptimeringsgrænser og leveres med en CDN, så du kan holde din server lagerplads klar. Du kan tilføje flere brugerdefinerede billedstørrelser, end du normalt ville. Tænk på det som svarende til at sætte flydende mc Hammerbukser i stedet for små tynde jeans på disse babyer, fordi stoffet er billigt 🙂

prøv Smush Pro Gratis i 7 dage.

Sådan tilføjes brugerdefinerede billedstørrelser

her er koden, vi vil tilføje til vores funktionsfil for at tilføje billedstørrelser:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

denne funktion accepterer 4 parametre i denne rækkefølge:

1. det navn, du giver din brugerdefinerede billedstørrelse
2. billedbredden i billedpunkter
3. billedhøjden i billedpunkter
4. skal billedet beskæres, så det passer til den bredde og højde, du har angivet ovenfor

beskæring

beskæringsparameteren er en boolsk, så du bruger sand eller falsk. Hvis du udelader det helt, vil det som standard være falsk.

hvis du indstiller beskæringsparameteren til sand, beskæres dit billede, så det passer til de dimensioner, du angiver, når det opretter det brugerdefinerede billede.

hvis din brugerdefinerede billedstørrelse f.eks. er en 600 stk. med 600 stk. firkant, og du indstiller beskæring til sand, så hvis du uploader et 600 stk. med 800 stk. rektangulært billede, bliver 200 stk. hugget af for at gøre billedet firkantet.

add_image_size( 'custom-image-square', 600, 600, true );

Indstilling af beskæringsparameteren til sand er nyttigt for billedstørrelser, der skal være nøjagtige, som fremhævede billeder eller postarkivbilleder, der skal passe perfekt til en bestemt dimension.

for billeder, der kan have mere vridningsrum, f.eks. billedstørrelse og billeder på sider, der har tendens til at have variable højder og bredder, kan du indstille beskæring til falsk. Dette ændrer størrelsen på billederne, men det ændrer ikke billedets form eller afskærer nogen billedpunkter.

Tag et kig på vores image SEO guide, hvis du forsøger at drive trafik til dine sider med dine billeder.

regenererende miniaturebilleder

et af de vigtigste trin, når enten:

1. ændring af standardbilledstørrelser
2. tilføjelse af brugerdefinerede billedstørrelser eller
3. skift til et nyt tema, der har forskellige brugerdefinerede størrelser

regenererer miniaturebilleder.

i denne sammenhæng refererer miniaturer til alle de ekstra billeder, der oprettes, herunder de brugerdefinerede billedstørrelser, der er inkluderet i dit tema, og dem, du opretter via din funktionsfil.

når du foretager en ændring af den måde, hvorpå du opretter yderligere billeder, vil det kun påvirke de billeder, du uploader fremadrettet. Det opdaterer ikke de billeder, der allerede findes i dit mediebibliotek.

for at ændre de billeder, du allerede har uploadet, skal du bruge det populære Regenate Thumbnails-plugin.

når du har installeret det, finder du det i afsnittet Værktøjer.

når du regenererer dine miniaturebilleder i dine nye størrelser, har du mulighed for at slette gamle ubrugte billedstørrelser for at frigøre serverplads.

Sådan tilføjes brugerdefinerede billedstørrelser til rullemenuen i Gutenberg-billedblokken

du behøver kun at tilføje koden nedenfor til din funktionsfil, hvis du vil have dine brugerdefinerede billedstørrelser vist i rullemenuen i Gutenberg-billedblokken. Hvis du har oprettet en brugerdefineret billedstørrelse, der skal bruges bag kulisserne til dit tema, kan du springe dette trin over.

vi kommer til at hænge på image_size_names_choose filteret.

i arrayet tilføjer jeg navnet på den brugerdefinerede størrelse, som jeg angav i funktionen add_image_size, og det navn, som jeg vil vises i rullemenuen inden for parenteserne.

som jeg lærte, da jeg lavede denne tutorial, skal du regenerere miniaturebilleder, før billedet vises i rullemenuen.

Tilføj billedstørrelse fuld kodestykke

dernæst kombinerer vi alt, hvad vi lærte i en kodeblok med et eksempel i den virkelige verden.

lad os sige, at du vil tilføje brugerdefinerede billedstørrelser til din blog.

her er de billedstørrelser, du vil tilføje:

• a 1600ph by 400ph featured image
• en 800ph størrelse, der spænder over bredden af din blogs indholdssektion

da vores tema ikke i øjeblikket understøtter fremhævede billeder, starter vi med det.

du vil derefter se mine brugerdefinerede størrelser. Bemærk, at jeg ikke beskærede de billeder, der vil spænde over bredden af blogindholdet. Jeg vil hårdt beskære mine fremhævede billeder, da jeg vil have dem til at rette op lige rigtigt.

det eneste billede, jeg vil tilføje til Gutenberg-rullemenuen, er blogbilledet, da jeg bruger den fremhævede billedstørrelse i mit tema.

når jeg har tilføjet denne kode til min functions.php fil, er det næste trin at regenerere miniaturebilleder.

for at bruge mit brugerdefinerede featured billede til mine indlæg i løkken, tilføjer jeg følgende til single.php eller index.php

se hvordan jeg tilføjede 'featured-large' i the_post_thumbnail() funktion? Det vil vise mit fremhævede billede under mine blogindlæg titler, over mit indhold.

tilpassede billedstørrelser bedste praksis

her er et par flere tip, så du ikke får problemer med at oprette brugerdefinerede billeder.

1. upload altid den største fil, du kan. Hvis din billedstørrelse er for lille, kan du ikke oprette alle de størrelser, den har brug for for at betjene dine billeder korrekt på en række enheder.
2. hvis du har brug for at ændre størrelsen på standardstørrelsen medium_large, skal du bruge funktionen update_option(). Du kan bruge den samme funktion til at opdatere enhver anden standard billedstørrelse.
3. hvis du er uden for loopet, kan du bruge funktionen get_the_post_thumbnail() til at bruge et af dine brugerdefinerede billeder.
4. her er mere om blød beskæring og hård beskæring, når du opretter brugerdefinerede billedstørrelser, hvis du støder på problemer.

det er alt, hvad der er at tilføje brugerdefinerede billedstørrelser

når du først har forstået, hvordan brugerdefinerede billedstørrelser fungerer, kan du ændre dem, så de passer til dine behov og spare meget tid. At få dit billede størrelser højre også hjælper dig med at forbedre din hjemmeside ydeevne og søgemaskine placeringer, så det er en vigtig ting at få ret.

hvis du virkelig vil tage din billedoptimering til et andet niveau, så tjek Smush. Vi har tilføjet en fantastisk CDN til Smush Pro, der har automatisk billedstørrelse, hvilket hjælper dig med at undgå at håndtere at ændre din funktionsfil for at tilføje brugerdefinerede billedstørrelser.

der er også andre fantastiske billedoptimeringsfunktioner, der kommer indbygget, som doven indlæsning og konvertering af billeder til næste generationsformater. Prøv Smush Pro Gratis i 7 dage og se, hvordan billedoptimeringsfunktionerne kan forbedre din side.

Tags:

• kode
• billeder