Файлове: изображения и alt текст

Модул 4: Създаване на съдържание · Време за четене: 9 минути

Учебна цел: След този урок ще можете да подготвяте, качвате и описвате изображения правилно, така че да се зареждат бързо, да изглеждат ясно и да бъдат използваеми за всички.

Ключови понятия: качени файлове, формати на изображения, big image threshold (2560 пиксела), JPEG, PNG, WebP, AVIF, компресия, srcset, lazy loading, alt текст, име на файл, авторско право

Какво се случва, когато качите снимка

Качвате снимка от телефона си: 4 000 на 3 000 пиксела, 5 MB. WordPress прави повече, отколкото си мислите:

1. Ако снимката е по-широка или по-висока от 2 560 пиксела, WordPress прави умалена версия (с -scaled в името) и я използва като „оригинал“. Истинският оригинал също се запазва. Това се нарича big image threshold и съществува от WordPress 5.3.
2. Освен това WordPress създава серия от по-малки размери: миниатюра (по подразбиране 150 x 150 пиксела, изрязана), средна (300), голяма (1024), и допълнителни размери от 768, 1536 и 2048 пиксела широчина. Вашата тема и разширения често добавят и собствени размери.
3. Всички версии се намират в wp-content/uploads/2026/11/ (година и месец на качването).

Така една снимка лесно се превръща в осем или повече файла. Затова папката uploads нараства толкова бързо (урок 1.3) и затова има значение какво качвате.

На страницата WordPress добавя към изображението srcset: списък с всички тези формати. Браузърът сам избира най-малкия размер, който е достатъчно ясен за екрана. Телефон зарежда размера от 768 пиксела, а голям екран, този от 1536. Това работи правилно само ако форматите съществуват, тоест ако качвате чрез Качени файлове, а не през FTP.

Предварително умаляване и компресиране

Дори при тези автоматични размери си заслужава да умалите снимките предварително:

• Размер: снимка, която на Вашия сайт никога не се показва по-широка от 1 600 пиксела, не е нужно да е широка 4 000 пиксела. Умалете я предварително до около 2 000 пиксела по дългата страна. Това спестява място за съхранение, намалява размера на резервните копия и времето за качване.
• Компресия: JPEG с качество от 75 до 85 изглежда за окото почти същото като качество 100, но често е наполовина по-малък.
• Мета данни: снимките от телефон често съдържат GPS местоположението, където са направени. Ако не искате всеки да знае къде живеете, премахнете го преди да качите файла. WordPress премахва голяма част от мета данните при умалените размери, но оригиналът може да ги съдържа все още.

Има разширения, които компресират изображенията при качване или ги преобразуват в по-модерен формат. Полезно, но проверете дали го правят на собствения Ви сървър, или изпращат снимките към външна услуга (урок 9.3), и дали наистина Ви е нужно разширение, когато можете да го направите предварително.

Кой формат

Ако Вашият сървър не може да обработи даден формат, WordPress показва грешка при качването или не създава по-малки размери. В Инструменти > Състояние на сайта (раздел Информация, под Обработка на файлове) виждате кои формати поддържа Вашият сървър.

Lazy loading

От WordPress 5.5 изображенията автоматично получават loading="lazy": браузърът зарежда изображение едва когато превъртите до него. Това прави дълга страница с много снимки много по-бърза. WordPress съзнателно оставя първото голямо изображение в горната част на страницата без lazy loading и често му дава предимство с fetchpriority="high", защото то трябва да се покаже възможно най-бързо. Ще се върнем на това в урок 6.3.

Задавайте винаги и широчина и височина на изображение (WordPress прави това при изображения от Качени файлове). Тогава браузърът предварително запазва място и текстът не подскача, когато снимката се зареди.

Alt текст: за тези, които не виждат изображението

Alt текстът (алтернативен текст) описва какво се вижда на изображението. Екранните четци го прочитат на слепи и слабовиждащи посетители, и той се показва, ако изображението не се зареди. Търсачките го използват, за да разберат изображението.

Добрият alt текст описва какво казва изображението в конкретния контекст:

• Лошо: IMG_4032.jpg или снимка.
• Лошо: магазин за велосипеди велосипед електрически велосипед купи евтин велосипед (натрупването на ключови думи не помага на никого).
• Добро: Механик регулира спирачките на син електрически велосипед в работилницата.

Ако изображението е чиста украса (линийка, фонов десен), оставете alt текста празен. Тогава екранният четец го пропуска. Празно е различно от липсващо: изображение без alt често кара екранния четец да прочете името на файла. Изображение, което е линк (например logo, водещ към началната страница), описва къде води линкът: Към началната страница на Fietsenwinkel De Spaak.

В Качени файлове поставяте alt текста при самото изображение, а в блоковия редактор, при блока за изображение. Внимание: alt текст, който въвеждате в Качени файлове, не се променя автоматично при изображения, които вече стоят на страници.

Имена на файлове и авторско право

• Име на файл: e-bike-remmen-afstellen.jpg казва повече от IMG_4032.jpg и попада в адреса на изображението. Малки букви, тирета, без интервали.
• Авторско право: изображение от Google Изображения не е свободно за ползване. Фотографи и фото банки редовно изпращат фактури за използване без лиценз. Използвайте собствени снимки, снимки с ясен лиценз или фото банка, чиито условия познавате, и пазете доказателство за лиценза си.

Съхранение и почистване

Качени файлове не се почиства сами. Изображение, което премахнете от страница, остава в библиотеката и в uploads, с всичките си размери. При сайт с години съдържание това се натрупва значително. Почиствайте от време на време, но внимателно: изображение може да се използва на място, което библиотеката не вижда (в настройка на тема, уиджет или имейл). Направете първо резервно копие.

Обобщение

• WordPress създава от всяко качено изображение няколко размера и умалява големите снимки до 2 560 пиксела; браузърът избира чрез srcset подходящия размер.
• Умалявайте и компресирайте снимките предварително и премахвайте данните за местоположение.
• Използвайте JPEG или WebP за снимки, PNG за logo и снимки на екрана; SVG само с разширение, което почиства файла.
• Lazy loading работи автоматично, освен за първото голямо изображение; широчина и височина предотвратяват подскачане.
• Alt текстът описва какво казва изображението в контекста; чистата украса получава празен alt текст.

Тест

Задача

Задача A4.4: Изображения на Вашата начална страница. Въведете адреса на Вашия сайт. Програмата чете началната страница и проверява първите 20 изображения: имат ли атрибут alt (празен е допустим, липсващ не е), имат ли широчина и височина, и колко голям е всеки файл (чрез HEAD заявка)? Изображения над 300 kB се отбелязват. Коригирайте това, което е отбелязано в червено, в Качени файлове или на страницата, и проверете отново.

Допълнително четене

Тези статии описват стъпките в панелите на WebOké; в други панели работят по подобен начин.

• Ръководство за DirectAdmin 18.5: Качването е твърде голямо (грешка 413) или time-out
• Качването не е успешно: увеличете upload_max_filesize и max_execution_time
• Качени файлове (wordpress.org, на английски): https://wordpress.org/documentation/article/media-library-screen/
• Писане на alt текстове (W3C, на английски): https://www.w3.org/WAI/tutorials/images/decision-tree/