Резолюция и размери на изображения за уеб

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
За да изглеждат нашите публикации и нашият уеб сайт добре.
Необходимо е да добавям в публикациите изображения, които са с коректния размер.
Не прекалено малки.
Не прекалено големи.
Нека да видим кои са размерите на изображенията.
Съвсем базови насоки.
Ако говорим за едно правоъгълно изображение.
Обикновено сме свикнали или за един проводник да говорим за широчина и височина.
И в реалния свят обикна използваме сантиметри.
Да кажем 16 сантиметра на 8 сантиметра.
Не това е размерът на изображенията, когато се говори за уеб.
Обикновено когато се говори за уеб.
Имаме изображение в пиксели.
И казвам едно изображение е 800 пиксела на 400 пиксела.
Или 800х400 пиксела.
За да се ориентираме какво означават тези цифри.
Нека да видим няколко резолюции.
Екраните, които имаме, обикновено имат резолюция.
И HD резолюцията е 1280х720, една често срещана резолюция.
Ако вашият монитор има по-висока резолюция.
Тя е 1920х1080.
Което наричаме Full HD.
Обикновено изображенията, които създаваме за уеб.
Трябва да гравитират с максимална резолюция към тези резолюции.
Разбира се има вече и ретина дисплей.
Доста отдавна първия MacBook Pro беше с резолюция 2880х1800, ако не се лъжа.
Което е доста висока резолюция.
Резолюциите непрекъснато се вдигат.
Но екраните и дизайна е направен по такъв начин, че горе-долу това е максималната резолюция.
Затова, ако сложите някакво изображения с 50х50 пиксела.
То ще изглежда много малко и невзрачно във вашия уеб сайт.
Ако сложите пък прекалено голямо изображение.
Примерно снима ли сте нещо с телефона си.
Един обикновен телефон има една резолюция, извадил съм примерна резолюция 3264х2448.
А представете си примерно, ако използвате някой по-хубав фотоапарат.
За каква висока резолюция може да става въпрос.
Тя обикновено не е необходима.
Не е необходимо да се слагате чак толкова голямо изображение.
Не че "WordPress" или сайта ви ще изглежда грозно с по голямо изображение.
Напротив обикновено темите и настройките са направени, така че те ще го премащабират, така че да се вижда добре.
Но не е необходимо толкова голяма, защото файла ще бъде прекалено голям.
Съответно когато го качвате може да имате затруднения.
Може "WordPress" да не го приеме.
Или пък по-големия проблем, е че хората, когато зарежат вашата уеб страница.
Ще трябва да зареждат някакви мегабайти с информация.
Страницата ви ще се зарежда бавно.
Което е фактори при определяне на "seo".
Тоест търсачките като "Google", ако видят, че вашата страница е бавна.
Дават малко по-нисък рейтинг.
Има много фактори за определяне на това колко трафик ще ви пратя.
Но един от допринасящите фактори е скоростта на вашия сайт.
Така че вие не искате прекалено големи изображения.
Ненужно големи изображения да слагате на вашия уеб сайт.
Нека да видим и за размера на файла.
"WordPress" по подразбиране има ограничение до два мегабайта.
Тоест, ако файлът ви е над 2МВ "WordPress" няма да ви го разреши.
Естествено това ограничение може да бъде коригирано.
Но не ви препоръчвам да го правите.
Защото всъщност препоръчително е вашият файл да бъде до 100-200 КВ.
Ако е повече от това, най-вероятно сте сложили прекалено висока резолюция.
И е хубаво да му добавите компресия.
Тоест примерно да го запишете като JPC файл.
Да сложите компресия и това ще съкрати значително големината на файла.
Максимума ориентировъчно до 500 КВ.
Обикновено гледайте, ако файлът ви е над 500 КВ.
Най-вероятно правите нещо грешно.
Това са общи насоки, за най-често срещани сайтове.
Ако правите сайт с фото галерия.
Примерно за фотография.
Където се изисква висока резолюция, високо качество.
И примерно аудиторията на сайта е такава каквато ще се взира в самото изображение.
Естествено тези препоръки не важат до такава степен.
И може да направите файловете си по-големи с по-висока резолюция.
Но за масовия стандартен сайт.
Стремете се да не правите прекалено големи файлове или пък прекалено малки.
Така че да не се виждат.
В следващия урок ще разгледаме няколко инструмента.
С които ще може да редактираме нашата файлове.
И да създаваме реално нашата файлове, които да са подходящи за нашия уеб сайт.
И накрая бих искал да кажа примера от "Facebook".
Tе препоръчват файла да бъде с размер, за изображението.
Да бъде с размер 1200х630.
Говоря за изображението, което обикновено слагаме като "Feature Teams" на статията.
И минимум размер 600х315.
Тези препоръки естествено зависят от вашата тема.
Ако във вашата тема, в документацията на вашите тема са описани препоръчителните размери на изображенията.
Използвайте тях.
Но ако се чудите какво да използвате.
И вашата тема поддържа голямо изображение.
Каквото видяхме досега като "Featured Images".
Или избран "Images" за публикацията.
Опитайте се да ползвате тези настройки.
Ако вашата тема поддържа тези настройки, които препоръчва "Facebook" 1200х630 пиксела.
Използвайте тази настройка, защото не само ще изглежда добре на вашия уеб сайт.
А ще изглежда добре, когато хората го споделят в "Facebook".
Така че с един удар два заека.
Повечето хора си гледат само техния уеб сайт.
И после се чудят защо никой не идва от социалните мрежи.
И казват социалните мрежи не работят за трафик, хората само глупости споделят в тях.
Не е така.
До голяма степен дали ще работи "Facebook" за вас.
И ще ви праща трафик.
Зависи от това дали сте избрали правилните изображения.
Естествено всичко е свързано с тестове.
Направете публикация.
Публикувайте в "Facebook".
Ако изглежда добре продължавайте по същия начин.
Ако не изглежда добре коригирайте размерите.
Но моята препоръка е "Featured Images" изображението, ако вашата тема е такава, че поддържа голямо изображение и изглежда добре с 1200х630.
Ползвайте точно този размер на изображението.

Тест за преминаване към следващия урок

 
Кое НЕ е подходящо за подбора на изображенията в сайта ни?
Файлът да не е прекалено голям - до 500 kb и максимум 2MB допустими
Изображението да е съобразено с препоръчителните резолюции на Facebook
Да се прави компресия на файла чрез .jpg формат при нужда от намаляване на изображението
Да се използва максималната резолюция на изборажението

Въпроси и отговори

  • Иван Цукев:

    В следващите модули имаме специален урок за това. Ако промяна на езика на самия Wordpress не го направи, трябва да се преведе самата тема. В модула за теми разглеждаме как става това.

    Николай Коцев:

    Как да ползвам три различни размера на картинката, т.ч. да имам добро качество при десктоп и да не се зарежда прекалено бавно при мобилни устройства?

    Иван Цукев:

    Николай, всъщност много рядко се правят различни картинки за десктоп и мобилно устройство, въпреки че логиката ти е напълно правилна.

    Причината основно е, че това са допълнителни усилия, коит повечето хора искат да си спестят.

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

  • Защо на 3 снимки с еднаква височина, на слайдера едната избутва публикациите надолу?

    Константин Чалбуров:

    Имам 3 снимки, които с еднаква височина (630 пиксела), като ги сложа на слайдера едната снимка се появява с по-голяма височина и избутва публикациите надолу. Как да го оправя?

    Грациела Георгиева:

    Здравей, Моят съвет е при подобен тип въпроси да прикачваш и изображения. Моля да сложиш един printscreen, за да ни се изясни ситуацията. :))

    Людмил:

    А ширината еднаква ли е!?

    Ivan Pukov:

    И още нещо покажаи малко повече информация . Един screenshot би бил от полза, но поскоро линк с тестове би бил по-полезен. Мисля , че все още тук няма хора , които могат да чета мисли и едвам ли ще хвърлят боб да разберат какъв точно е проблема ти - па камо ли да помогнат. Първо да започнем от това , какъв е този слайдера и как е навързан към тези 3 снимки - Макар че предполагам , че ако отговориш на този въпрос , ще си решиш проблема и се чудя защо задаваш въпрос без дори да си направил труда потърсиш решение в нета. Мързела е хубаво нещо , но не винаги е полезен :)

  • Защо да се resize - ва снимка за сайта?

    Петър Триндев:

    Малко съображения от практиката. Приемам, че екранът на вашия компютър е с резолюция (правилният, но по дълъг термин е "разделителна способност") 1280х720. Т.е. в тази резолюция виждаме снимките независимо, че в оргинал може да са с резолюция 12800х7200 т.е. 10 пъти по-голяма. За показване на екрана компютърът автоматично "смачква" 10 пиксела в 1 пиксел по височина и по ширина. Препоръчвам ви тест: вземете най-голямата по размер снимка, която имате и я намалете до размер 1280х720. Запишете това копие на снимката в папката на оргинала. Превключвайте бързо от едната на другата снимка – няма да забележите разлика в качеството, а само във времето на зареждане, което естествено е по-голямо при оргинала. Или в слайдера поставете една до друга оргиналната снимка с лимони и нейно копие с 3 пъти по-малка резолюция. Виждате ли разлика? А съотношението в мегабайти е 5 пъти (327:61), което влияе на скоростта на зареждане. В резюме – по-голяма резолюция ни трябва, само ако ще вадим и увеличаваме детайл от снимката, но това не е нашият случай в Wordpress. Важно е съотношението ширина/височина на снимката. В днешно време стандартът е 16/9=1,78. В това съотношение са: екранът на лаптопа (в см.), резолюцията му (1200/675 или 1280/720(HD) или 1920/1080(Full HD)), екраните на телевизорите, на смартфоните и т.н. И вероятно ще трябва да се съобразява съотношението прието в избраната тема. Дано не греша с тези разсъждения!

    Мария Балева:

    Здравейте, много добре сте описали логиката защо трябва да се resize-ва снимка за уеб сайт.Колкото по-голяма е резолюцията, толкова повече информация съдържа снимката и толкова по-голям е размерът й. Става ясно, че качването на снимки с висока резолюция ще повиши времето за зареждане на уеб сайта. Препоръчително е снимките да са с подходяща резолюция, нито малка, нито голяма. Когато говорим за оптимизация, имаме предвид, че уеб страницата трябва да изглежда и да работи оптимално на най-различни устройства с различни размери на екрана. Повечето wordpress теми имат и препоръчителни размери за изображенията в сайта, за да изглеждат добре нещата.

    Jullian Angelov:

    При високоскоростен интернет и какъвто и да е компютър размерът на файловете за зареждане не е критичен. Но в последните години процентът на мобилните устройства нараства и вече спокойно може да се каже че надхвърля 35%. От една страна въпреки че някой от тях вече са дву-четири ядрени, даже има и с 8 ядрени процесори, но са далеч още от масовото използване) те са по- бавни от какъвто и да е компютър дори използвайки WiFi. От друга страна по ред причини българите си вземат "малки " планове за мобилен интернет. И когато се наложи да се зареждат файлове от по половин - два мегабайта снимката, то първо се изчерпват доста по- рано "бързите" мегабайти от плана, а после "неограниченият достъп пада при различните оператори на 64 или 128 килобита и тогава големите файлове се зареждат вече наистина бавно.

    Васил:

    а за още по-голямо улеснение, аз ползвам този сайт https://compressor.io/compress качвам *.jpg, компресира го и няма никаква разлика в качеството. после при тест на скороста на страницата е на шест

  • Как да елиминирам автора и датата ва дадена публикация, които се появяват на сайта?

    Asen Goshev:

    Как да елиминирам автора и датата ва дадена публикация, които се появяват на сайта? Само аз публикувам друг не може.

    Иван Цукев:

    Здравей, погледни в настойките на темата.

    Ако там няма такива опции (повечето нямат, но някои по хубави теми имат.), трябва да се направи child theme и да се редактира темата с CSS правила. Обикновено е лесно - два три реда код, но ти трябва човек, който разбира.

  • Какъв е препоръчителният размер на изображение, което служи за корица на сайта?

    Елена Дункова:

    Изображението, което в някои теми стои най-отгоре в сайта и заема целия екран по ширина, с каква ширина е препоръчително да бъде - 1280 pix или е по-добре да се предвиди да бъде на 1920 pix? Предполагам, че ширината може да варира по наш избор.

    инж. Юлиан Ангелов:

    Повечето теми за WordPress само дават препоръчителна големина на изображението. Ако сложим изображение с друга големина - обикновено WP го изобразява, но или изрязва част от него, или дори го премащабира, като обаче запазва съотношението ширина / височина на изображението и отстрани или отгоре в полето за изображение се появяват кашета. Всичко зависи от избраната тема.