Astăzi vom arunca o privire cuprinzătoare asupra lucrului cu imagini pe web. Știu că totul a fost scris pe această temă, dar voi încerca să-mi completez punctul de vedere și să rezum diverse informații.
Ce trebuie urmat atunci când alegeți imagini pentru web?
1) Drepturi de autor
În primul rând, drepturile de autor asupra imaginilor trebuie respectate. În practică, acest lucru înseamnă că, dacă nu aveți propriile fotografii, trebuie să le folosiți pe cele de pe photobanks. Aveți fie o variantă plătită pentru a alege: puteți pur și simplu cumpăra imaginea, sau puteți alege din băncile foto gratuite pe cele care sunt, de asemenea, destinate utilizării comerciale. Aceasta este o utilizare comercială atunci când puneți o imagine într-un anunț pentru a crește vânzările. De exemplu, utilizarea aceleiași imagini în blogul dvs. este neobișnuită.
Fotografii gratuite:
Puteți găsi, de asemenea, o altă listă de photobanks gratuite aici: https://jurosko.sk/obrazky-zadarmo/
Fotobănci plătite:
Pentru fiecare imagine, verificați ce tip de licență acoperă.
2) Dimensiunea fotografiei
Fotografiile trebuie redimensionate înainte de a putea fi adăugate pe web. Instrucțiunile despre modul de redimensionare a fotografiilor după adăugarea lor pe web sunt mai jos.
Imagini mari în pixeli (peisajul este suficient 2000px, la o înălțime de aprox 600 px max) ar trebui să fie max până la 200 - 300kB pentru un.
Imaginile mai mici sunt ideale pentru a avea până la 100kB iar in dimensiunea de aprox 1000x1000px max.
Asigurați-vă că nu aveți imagini pe site pe care le au 1 MB și altele. Imaginile mari vor încetini, de asemenea, încărcarea site-ului, aveți grijă mai ales cu telefoanele mobile.
Vă recomand să puneți imagini într-o prezentare de diapozitive (imagini în mișcare care se schimbă, utilizate de obicei pe pagina de pornire/rotator de imagini) de aceeași dimensiune, cu siguranță înaltă și ideal lată. Dacă prezentarea de diapozitive nu este adaptată la diferite opțiuni, probabil că nu veți sări în sus. Acest lucru creează un efect nedorit atunci când web-ul „sare” în sus și în jos în funcție de înălțimea imaginilor.
De asemenea, este recomandabil să utilizați imagini similare în culori într-o singură prezentare, care sunt simultan armonizate cu web-ul. Imagini multicolore, în timp ce una va fi întunecată, cealaltă deschisă și altele asemenea nu creează efectul integrității paginii, așa că este bine să ne gândim la asta.
Tip: Dacă încărcați mai multe versiuni de imagini pe web și le redimensionați diferit, este o idee bună să le ștergeți din biblioteca media pe cele pe care nu le utilizați data viitoare pentru a evita ocuparea spațiului. De asemenea, va fi mai clar când trebuie să găsiți ceva acolo, când nu există un singur articol 10. În plus, cel puțin nu veți copleși inutil locul de pe găzduire.
Programe de editare a imaginilor
Dacă programul de editare a imaginilor pe care îl utilizați are opțiunea Salvare pentru web, asigurați-vă că îl salvați în acest format (cum ar fi Photoshop).
De asemenea, are opțiuni mai avansate pentru editarea imaginilor Gimp - https://www.gimp.org/ Este practic similar cu Photoshop și este gratuit.
Datorită clarității secțiunii, nu este posibil să analizăm programele aici, așa că vom arăta doar ceva mai simplu și mai practic.
IrfanView
Puteți descărca această aplicație de la: https://www.irfanview.com/
În acest program, puteți edita cu ușurință mai multe imagini într-un singur director. Aceasta înseamnă că nu vom edita manual imaginile una câte una, dar vom stabili regulile astfel încât programul să o ajusteze automat pentru toate imaginile selectate.
Mai întâi, punem imaginile pe care dorim să le edităm într-un singur director de pe computer și pregătim acolo un nou director mic (imaginea nr. 1).
Imaginea nr. 1 - Pregătirea unui director pentru imagini.
Deschideți orice imagine pentru a apărea în IrfanView, apăsați tasta B - sau selectați din meniul Fișier - Conversie lot/Redenumire (imaginea nr. 2).
Imaginea nr. 2 - Setări de conversie în lot.
Apoi am stabilit lucrurile conform imaginii nr. 3:
Imaginea nr. 3 - Pași individuali de conversie lot.
Punctul 1 - alegem conversia în lot și redenumirea fișierelor.
Punctul 2 - marcați fișierele din directorul dat
Punctul 3 - faceți clic pe Adaugă totul, va adăuga automat fișierele la listă.
Punctul 4 - făcând clic pe butonul Opțiuni, setăm setări redenumire lot și modelul de nume
În conformitate cu Figura 4, am setat modelul la $ N_sm, ceea ce înseamnă că fișierul redus este denumit cu numele său original și completat cu „_sm”. Este important să-și păstreze denumirea originală pentru a rămâne așa. Desigur, îl poți numi altul.
Imaginea nr. 4 - Redenumirea imaginilor.
Apoi ne-am pus format de iesire și jpg. Faceți clic pe buton Opțiuni, puteți schimba calitatea imaginii rezultate ca procent (Figura 5). Putem lăsa 100% la început, am da mai puțin dacă generează imagini încă mari.
Imaginea nr. 5 - Setarea formatului de ieșire.
Faceți clic pe butonul Setări avansate și selectați metoda de reducere a dimensiunilor (Figura 6). Dimensiunea poate fi modificată fie în procente, fie în pixeli (cm sau inci). Pentru acest exemplu, redimensionăm la o dimensiune maximă de 900 × 900 px. De asemenea, putem ajusta valoarea rezoluției imaginii - dpi. Dimensiunea DPI de 72 este suficientă pentru site-ul web. În cele din urmă, confirmăm făcând clic pe butonul OK.
Imaginea nr. 6 - Setări dimensiune imagine.
Încă o dată, vom verifica calea către directorul cu fotografiile mai mici. Faceți clic pe Utilizați aspectul curect în director - acesta va încărca directorul unde avem aceste fotografii, faceți clic pe Răsfoire și selectați un director pre-pregătit pentru a scoate imagini mici (Figura 3, punctul 5).
Alternativ, puteți juca și cu setările și bifați din caseta de selectare imagine 5 Setați dimensiunea fișierului 65,00 KB (RIOT). Acest lucru va reduce, de asemenea, dimensiunea imaginilor mai mult pe web. Trebuie să testați cât de mult trebuie schimbat, astfel încât imaginile să fie suficient de mari în pixeli și suficient de mici în kB.
Când totul este setat, confirmăm întregul proces făcând clic pe butonul Start lot.
În poza nr. 7 atunci vedem că fotografiile sunt de aproximativ 100kB. În acest fel pot accesa webul.
Imaginea nr. 7 - Imagini redimensionate.
În concluzie, vreau să subliniez că dimensiunea unei pagini mai mari de aproximativ 1000 px este suficientă pentru imaginile obișnuite de pe web. Lăsăm dimensiunea de aproximativ 1900px în lățime pentru prezentările de diapozitive pe toată suprafața.
De asemenea, puteți face ajustări foarte simple la tipul de decupare și redimensionare în programul Paint din Windows. Dar nu mai puteți juca cu setarea de calitate dpi și așa mai departe. Dar asta e suficient pentru câteva poze.
3) Descrierea imaginilor
Apelați imaginile titlu, alt A Descriere De îndată ce le încarcă pe multimedia pe web - este bine pentru motoarele de căutare în ceea ce privește SEO.
Titlul este numele imaginii, alt este descrierea pe care robotul o vede când vine pe web și descrierea este afișată când vedeți imaginea într-o fereastră mărită după ce faceți clic pe ea (aceasta, dar depinde și de șablon sau galerie folosită).
În același timp, imaginați-vă site-ul citind orb iar computerul său citește descrierile imaginilor. Ce credeți că va ști ce este în imagine când numele său este DSC1234.jpg sau când se numește ierburi-pe-rețetă.jpg?
Scrie Alt, titlu și descriere ca text, adică cu accente. Dar numele imaginilor de la denumirea fișierelor scrie fără diacritice și spații, utilizați numai caractere alfabetice, numere, puncte de subliniere sau cratime.
Nu utilizați în același timp nume lungi (nu trebuie să depășească 30 de caractere). Este posibil să existe o problemă de mutare cu fișierele care au un nume lung.
Sfat pentru tine: Somstrasnedlhynazov-obrazku-kterynevie-kedysamaskoncit-acimaestepokracovat-niejeozajuplnefajn-napad.jpg Nu exact asta duce drumul 🙂 Și crede-mă, am întâlnit cu adevărat nume similare.
Subtitrarea imaginii trebuie setată acum la înregistrare, pentru că în acest caz "mai tarziu" mijloace "nu".
4) Optimizați imaginile direct pe web
Dacă aveți deja imagini încărcate pe web, le puteți optimiza și folosind pluginul Compress JPEG & PNG images (https://wordpress.org/plugins/tiny-compress-images/)
Cu toate acestea, trebuie să aveți un cont pe site-ul lor (https://tinypng.com) și să îl conectați la un plugin de pe site-ul dvs.
Dacă vă deranjează conectarea, este posibil să utilizați pluginul Smush, care funcționează fără conectare. (https://wordpress.org/plugins/resmushit-image-optimizer/)
Alegeți doar unul dintre pluginurile oferite. Nu are sens să ai diferite pluginuri pe web pentru o operație. Din nou, principiul este, cu cât sunt mai multe și cu cât sunt mai puține pluginuri, cu atât mai bine.
Nu vom schița subiectul configurării acestor pluginuri astăzi. Cred că voi procesa treptat informațiile necesare, pe baza comentariilor și remarcilor dvs., aici sau în grupul meu de pe Facebook.
5) Dimensiunile imaginii - decuparea miniaturilor în wordpress
Șabloanele diferite au dimensiuni diferite ale imaginii. Nu este deloc standardizat, astfel încât fiecare proiectant și dezvoltator poate decide ce dimensiuni de imagine să utilizeze în șabloane. În același timp, există 2 moduri de a le tăia, una în care este tăiată la dimensiunea exactă și cealaltă, în care este redusă doar în funcție de latura mai mare la dimensiunea dorită a previzualizării.
Cu toate acestea, niciuna dintre aceste metode nu poate oferi vederi complet frumoase, așa cum am avea nevoie. Prin urmare, există pluginuri care pot ajuta utilizatorul la editarea miniaturilor.
Unul dintre ele este pluginul Crop-Miniaturi (https://en.wordpress.org/plugins/crop-thumbnails/)
În acest plug-in puteți seta și eventual decupa manual tipuri individuale de imagini folosite, după cum este necesar. Nu este întotdeauna necesar să tăiați toate tipurile de dimensiuni. Tot ce trebuie să faceți este să alegeți o croială doar pentru dimensiunea care nu vi se potrivește pe pagină.
Imaginea nr. 8 - Crop-Thumbnails plugin și setări de imagine direct în wordpress.
Acest lucru se poate face direct în articol, făcând clic pe buton Decupare Imagine prezentată. Dacă vă aflați în lista multimedia, puteți face acest lucru și pentru fiecare imagine separat (Figura 8). Va apărea o fereastră cu selectarea tipului de dimensiune pe care doriți să îl modificați (Figura 9). După ce îl selectați, veți putea edita dimensiunea din dreapta. Apoi alegeți partea corespunzătoare a imaginii pe care doriți să o decupați. Faceți clic pentru a confirma această operațiune Salvați recolta și, în cele din urmă, actualizați articolul.
Imaginea nr. 9 - Crop-Thumbnails plugin - decupați imaginile
Pentru ca schimbarea să aibă efect, este necesar să reflectăm site-ul web folosind Ctrl + F5. Într-un caz mai complicat, este necesar să ștergeți memoria cache folosind butoanele Ctrl + Shift + Del și, de asemenea, ștergeți memoria cache.
6) Galerii în wordpress
Galeriile sunt bune de gestionat prin intermediul Imagely https://www.imagely.com/ - versiunea de bază este un plugin gratuit pe wp https://wordpress.org/plugins/nextgen-gallery. Sau nu ezitați să utilizați un alt plugin pentru galerie.
Problema imaginilor este foarte largă. Nu am avut timp să atingem întrebări precum: cum să adăugăm imagini în editor, cum să adăugăm un link pentru a mări o singură imagine, cum să creăm galerii folosind wordpress multimedia sau separat în funcție de directoare, de exemplu prin galeria Nextgen plugin, cum să creați un efect lightbox dacă tema dvs. nu acceptă se referă doar la o imagine separată, etc.
Voi discuta aceste subiecte în blog.
În următoarele articole, pregătesc soluții pentru probleme obișnuite, cum ar fi: cum să lucrați cu ftp, ce să faceți dacă site-ul are un ecran gol sau o eroare fatală etc. Alternativ, nu ezitați să-mi trimiteți prin e-mail ce vă interesează și vă voi răspunde cu plăcere.