Save for web

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

Ако сте вече потребител - Регистриран съм
Видео
В това кратко видео ще ви покажа някои особености и при запазване на изображението за уеб.
Ако това е изображението, което възнамерявам да използвам в моята уеб страница.
Първото нещо, което искам да знам за него е размера му в пиксели, който мога да видя от "image" - "image size".
В случая виждам, че това изображение с доста голяма резолюция.
4912 пиксела по 3264 пиксела.
Да видим каква е големината на файла в момента.
Големината на файла в момента е около 10 мегабайта.
Мога ли да кача това изображение така направо в интернет? Отговорът е, мога,обаче не се налага да оправя така.
В момента не можем да пренебрегнем някои основни недостатъци, които има, които основно са свързани с размера на изображението.
Първо, 10 мегабайта изображение значи, че когато отворите уеб страницата, за да се зареди това изображението тези 10 мегабайта, трябва да се свалят през мрежата и временно да се използва това изображение на вашия компютър с реалния му размер.
За да видите това изображение когато отворите страницата, трябва да изчакате през вашата мрежа да се свалят 10 мегабайта.
В повечето случаи това не е такъв проблем.
10 мегабайта не са прекалено много, но е изключително нерационално използване на трафика по този метод.
Защото надали ще имате само едно изображение в страницата която показвате, и надали ще имате 4000 пиксела големина за показването му в реалният размер.
За да коригираме тези неща трябва да запазим изображението по различен начин.
Аз просто използвам това изображение като добър пример за илюстрация, тъй като ще видим осезаема разлика по начина, по който се запазва.
Но това може да го правите за всяко изображение, което запазвате с основната идея да го качите в интернет.
И така, за запазването, по подходящ начин на изображението за интернет ще използвам опцията Save for Web.
От менюто "файл".
Ще се отвори ето този прозорец, който вие първоначално ще го видите по този начин.
В това "preview", тук в момента виждам изображението в реалният му размер на 100%, виждате че това изображение е огромно.
Виждам реалният му размер в пиксели.
И виждам, файловото разширение, в което по принцип ще се запазва изображението.
Това все още не е избрано, в момента го решаваме, кое ще бъде най-подходящото и какви да бъдат настройките.
Това са настройките, с които започва по подразбиране.
За да направим сравнение, за това какви настройки ми трябват, ще използвам другият изглед, който е с 4 изображения.
И.
Преди да намаля, по-скоро да регулирам изображението, така че да виждам цялото или по-голяма част от него Първото нещо, което ще направя е да намаля самият размер на изображенията.
Да кажем, че в случая съм избрал максималната големина на изображението да бъде 1000 пиксела.
Ако въведа в ширина 1000 пиксела, виждате, че по височина пикселите автоматично се променят, така че да се запази в съотношението между ширина и височина.
Това е дадено с ето тази иконка.
Докато двата параметъра са заключени, промяната на единия води автоматично до промяната и преизчислението на другия.
Мога да ги отключа, но това не е нещо което искам да направя сега.
Искам това взаимоотношение да се запази.
За да го видя този ефект приложен, ще натисна таб.
И така вече, ще имам разделителна способност на основното изображения от .
psd файла.
То е с нова големина 1000 пиксела по 664.
В първото "preview" виждам оригиналното изображение без никакви промени.
Ще го намаля, така че да виждам цялото изображение.
В това preview, ще използвам ново разширение.
В момента всички "previews" са с .
jpeg разширение.
аз искам да сменя файловото разширение на .
gif ,
за този вариант.
Ще оставя всичко както по подразбиране, само ще обърна внимание на това, че в момента използвам 256 цвята.
Mога да запазя и прозрачност, ако е необходимо.
Това, всъщност е доста важно.
При връзка, която осигурява скорост на сваляне един мегабайт, който да кажем, че е средна скорост.
При положение, че нормалната е около два мегабайта.
Но ако използвате 2G или 3G мрежа, може да отидете на 128 килобайта за секунда или дори още по-малко.
Особено ако гледате това изображение на мобилно устройство.
Да кажем, че средната скорост, която ще използвам в момента, като експериментална, е един мегабайт за секунда.
Aко скоростта ми за сваляне е един мегабайт в секунда - това изображение, с тези настройки, ще се зареди за четири секунди.
Така е по-нормално, отколкото в предишния случай с оригиналното изображение.
И за да видим разликата, ще върна на 100% изображението както беше.
В този случай, това изображение ще се зареди за 101 секунди; при същата скорост и същите настройки.
Ще върна големината отново на 1000 пиксела.
Натискам табулатор.
Така и оригиналното изображение в .
gif формат,
който съм избрал от тук, при нормална скорост на сваляне около eдин мегабайт за секунда, ще се зареди във вашата уеб страница за четири секунди.
Да видим какво става при другите варианти.
Ако запазя изображението като .
jpeg
Този формат е следващият най-разпространен вариант за файлово разширение, което ще използвам за изображение, което ще качвам в интернет.
При тези предварително направени настройки, това в случая е средно качество.
Аз ще намаля качеството тук, на най-ниското, което значи качество 10.
А в следващото "preview" ще го увелича на максималното, което е 100.
Да погледнем в момента как се промениха нещата.
С максимално качество 100 ще се зареди за 6 секунди и размера му ще бъде 476 к С максимално ниско качество, ще бъде само 38 килобайта, ще се зареди за една секунда.
Тук ще се зареди за 6 секунди.
Ще променя най-ниското качество на "високо".
Шестдесет като качество.
Две секунди, 122 килобайта.
Това според мен е оптималното решение на фона на другите, които разгледахме.
След като съм избрал това да бъдат финалните ми настройки искам така да запазя изображението.
Натискам бутона "запази", избирам място където да се запазят.
По подразбиране тук във формат, ще бъде избрано "images only".
Избрал съм .
jpeg формат.
Тук ще сменя името на нещо, което да е подсещащо.
И ще дам "save".
Отново съм в моят .
psd документ.
Да погледнем запазеното изображение в Windows Explorer.
Това е изображението, с което започнахме.
4900 пиксела по 3200, 10 мегабайта големина на изображението.
Това е изображението което запазихме.
1000 пиксела по 664, 122 килобайта, само.
По принцип това изображение вече е готово за качване в интернет.
Но при запазването, имаме още една възможност, която ще ви покажа сега.
Отново използвам на "save for web".
Използвахме .
jpeg
С High качество, 60.
Големината беше 1000 по 664 пиксела.
Имаме същите настройки за запазване.
В момента, когато избера "save", вместо да оставим на "images only" мога да избера "html and images".
Тази възможност ми дава да запазя изображението като html документ.
След това този html документ и неговият source да могат да бъдат използвани директно за вграждането на снимката в сайта.
Ще запазя това име по подразбиране и ще го запазя по този начин.
Отново съм в .
psd документа, затварям го и вече няма да го използвам и ще погледнем резултата в Explorer.
И така.
Това беше основното изображение.
Това беше изображението което запазихме, след като избрахме коректните настройки, а това е html страницата с прилежащите ѝ изображения, което е само това изображение.
Което с двойно натискане ще се отвори в браузъра.
От тук, може да се види източника и този код да се използва директно за вграждането на снимката във вашата страница.

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

  • Може ли да направя едно уточнение?

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

    едно уточнение? За мобилният интернет - абонаментните планове обикновено се предлагат с някякви "бързи" мегабайти включени в плана, след изтичането на които падат на ниска скорост. За Мтел и Норд ( бивпият Globul) тази скорост е 64 килобита за секунда, а за Vivacom - 128 килобита за секунда. Освен това имайки регламентиран обем "бързи " магабайти вие обаче нямате гаранция че ще я получите. Може да попаднете на място къдети или няма 3G / 4G или по някакви причини я клетката е заета с много потребители я друго и накрая да получите 2G. При това в договора е описана скорост а първите ( 500-2000-5000 или колкото е договора) мегабайти, но не е уточнявано какво става ако ползвайки "първите" не ви се предостави високоскоростна услуга. А ефектът от бавното зареждане се мултиплицира с всяко вмъкнато изображение - колкото ги имате в сайта. По отношение на намалянето на размера на изображението - повечето CMS (WordPress) имат таква вградена възможност както в самата среда, така и за инсталируемите приложения ( примерно тия които създават галерии) Но нерядко начинът им на действие не е този, който бихме желали ( прмерно привеждат всички намалени вече файлове само в JPG, като прозрачният фон се заменя с бял и това налага преработка на изображението, защото закрива други елементи от страничката, или до еднотини размени на изображенията, което невинаги е удачно и е добре да ги използваме след като сме ги разучили как действат.

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

    На свой ред повечето мобилни устройства имат големина на екрана от порядъка на 480 х 800 пиксела, някой производни на около 900 х 500 и малко (елитарно скъпи и рядко продавани) имат над 1000px по по- голямото си измерение Браузърът на мобилното устр. естествено свива изображението за да го вмести заедно с другите елементи на страничката на екрана и разликата от поставеното от нас изображение до реално показаното излиза че напразно би породила трафик. Може би правейки страничката ако искаме да я оптимизираме до край трябва да имаме за всяко изображение 2 версии - за компютър и за мобилно устройство и чрез средства на средата за създване на сайтове да се зареждат малкият файл в мобилното устр-во. Но това вече е предмет на други дисциплини в Аула. Цветността на всеки пиксел от изображението ( както беше обяснено в уроците в които ползвахме Eyedropper Tool ) е съставено от 3 байта за 3-те цвята. А размерът на изображението в общ брой пиксели е произведение на пикселите в широчина и пикселите във височина на изображението. Ако намалим цветността от 24 битова ( по 1 байт за всеки от трите цвята) на 8 битова ние можем да намалим обема на файла 3 пъти при катастрофално влошаване на качеството освен ако не е банер. А ако намалим малко размера на изображението в разумна степен, то произведението от пикселите би намаляло доста повече в проценти, а разликата всъщност се утроява, защото с всеки пиксел отпадат по 3 байта които го описват. Ето какво се получава при преминаване от 24 битова цветност (16 милиона цвята) към 8 битова (256 цвята), а размерът на файла намалява едва 3 пъти:

    Краси Кръстев:

    Здравей, Юлиян.

    Добро уточнение и една добра тема за дискусия.

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

    Благодаря! :) Ами... да дискутираме!

    Rumen Gotsev:

    Здравейте, Името Норд е неправилно! Произнася се и се пише на латиница: Т-е-l-e-n-o-r, на българска кирилица е Т-е-л-е-н-о-р. Цитирам: „За Мтел и Норд ( бивпият Globul)... “

  •  Каква е принципната  разлика между подготовката на изображенията за  facebook и тези за web?

    Александър Терзов:

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

    Ивайло Искренов:

    Здравей, в самата подготовка на изображението, можеш да използваш показаните похвати и за web и за facebook. Показана е оптимизация за големината и резолюцията на изображенията, като универсален метод. Във видеото за изображения за facebook, основно е показано съобразяването с коректните крайни размери на изображението, така че то да се визуализира правилно в сайта на facebook - размери който в други сайтове са различни, но това не значи не не може да се оптимизира изображението по предишният посочен метод.

    Александър Терзов:

    Благодаря, но за съжаление не мога да се сетя кой е "предишния посочен метод". А като конвертирам снимките от 4272х2848 пиксела до 851х315 те се деформират.

    Ивайло Искренов:

    Изображението се деформира, защото изходната резолюция е с различно съотношение ширина-височина спрямо оригиналното съотношение, което при теб е 1,5 (4272/2848=1,5). За да не се деформира изображението ти и искаш да запазиш ширината да е 851 пиксела, трябва да направиш височината 851/1,5=567 пиксела.

  • Защо нямам Save for web?

    инж. Юлия Петрова Савова:

    Защо нямам Save for web? Как да запиша изображението, за да е подходящо за web? С PS CC 2018 съм.

    Ивайло Искренов:

    Здравей, провери за тази команда в менюто Export ->

    инж. Юлия Петрова Савова:

    Благодаря. Там е.

  • Може ли да запазим със  Save to Web изображението с 300 Px/i?

    Венелин Тодоров:

    Може ли да запазим със Save to Web изображението с 300 Px/i? Ако да какви настройки трябва да направим. При мен се запазва зададеният размер, но в 72 Px/i. Благодаря

    Ивo:

    Здравей, при сейване с опцията Save for web, нямаме контрол на настройката dpi - пиксели за инч и това не е необходимо, тъй като за изображенията за web има значение само големината на изображението в пиксели, а гъстотата (dpi) е инструкция за принтирането - колко точки да се отпечатат в квадратен инч.

    Венелин Тодоров:

    Благодаря, така мисля и аз, но все пак си струваше да попитам.Не намирах отговор досега. Интересното е, че файловете са почти толкова голени колкото и при 300 dpi.Хубава вечер.