Размери на изображения за имейл бюлетини

Поддържайте всяко изображение в бюлетина под 100 KB, оразмерявайте го до два пъти ширината на показване и използвайте JPG или PNG вместо WebP. Gmail съкращава всяко съобщение, чийто Hypertext Markup Language (HTML) надвишава приблизително 102 KB, като заменя останалата част с връзка Преглед на цялото съобщение.

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

Какво всъщност измерва ограничението за отрязване на Gmail

Gmail измерва HTML изходния код на съобщението, а не изображенията, към които то препраща. Бюлетин, който се свързва с 10 големи снимки, остава добре в границите, докато съобщение с тежък вграден стил и вградени изображения не прави това.

Разликата има значение, тъй като решението е различно. Свързаните изображения не се броят към числото 102 KB, така че отрязването обикновено се причинява от повторени inline стилове, дълги параметри за проследяване на всяка връзка или изображения, вградени като base64 данни. Премахването на вградените изображения и изчистването на кода решава проблема с отрязването, докато компресирането на свързаните снимки подобрява времето за зареждане.

Препоръчителни размери на изображения за имейл

Проектирайте основната част на имейла с ширина 600 пиксела и експортирайте изображенията с 1200 пиксела за екрани с висока плътност. Стандартът от 600 пиксела се запазва с години, тъй като се вписва в прозореца за преглед на всеки настолен клиент без хоризонтално превъртане.

Удвояването на ширината на експортиране покрива екраните с висока плътност и спира дотук. Експортирането с 3 пъти по-голяма ширина добавя тегло, което никой имейл клиент не възпроизвежда по-добре, а имейлът е единственият канал, при който всеки килобайт се изтегля на телефон.

Защо WebP все още е грешният избор за имейл

Поддръжката за WebP от имейл клиентите остава неравномерна, а Outlook в частност остава непредвидим. Имейлът е едно от малкото останали места, където сигурните стари формати са правилният избор.

Уеб браузърите поддържат WebP, което кара хората да се предполагат, че и имейл клиентите го правят. Настолната версия на Outlook изобразява съобщенията с напълно различен двигател, а няколко корпоративни пощенски системи премахват или дават грешка при формати, които не разпознават. Счупеното изображение в бюлетин е много по-скъпо от 30-процентното спестяване на размер, което WebP би осигурил, така че JPG и PNG остават правилният избор тук.

Избор на формат в имейла

Използвайте JPG за снимки и PNG за лога, бутони и всичко, съдържащо текст. Правилото е същото като в уеб, а последиците са по-видими, тъй като имейл изображенията често са малки.

• JPG за продуктови снимки, изображения за заглавката и всякакви снимки от реалния живот.
• PNG за лога, икони и графики с плътни цветове или остри ръбове на текста.
• Анимиран GIF само когато анимацията носи значение и с тегло под 1 MB.
• Избягвайте WebP и AVIF, тъй като нито един от тях не се изобразява надеждно при всички пощенски клиенти.
• Избягвайте SVG напълно, тъй като повечето имейл клиенти го блокират от съображения за сигурност.

Изображенията се блокират по подразбиране в много клиенти

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

Напишете заместващ текст (alt text) за всяко изображение, тъй като блокираните изображения показват този текст вместо тях. Никога не поставяйте важна информация, включително офертата, крайния срок или призива за действие, само вътре в изображение. Бюлетин, изграден изцяло от едно голямо изображение, се превръща в празен правоъгълник за значителен дял от списъка и също така се представя зле при екранни четци.

Как да подготвите изображения за бюлетин

За да запазите бюлетина бърз и лесен за четене, следвайте тези 7 стъпки.

1. Проектирайте имейла с ширина 600 пиксела, която всеки настолен клиент изобразява без превъртане.
2. Изрежете всяко изображение до точната форма, която ще заема в оформлението.
3. Оразмерете до два пъти ширината на показване и не повече.
4. Конвертирайте в JPG за снимки или PNG за графики, съдържащи текст.
5. Компресирайте всеки файл до цел под 100 KB.
6. Хоствайте изображенията във вашата платформа за изпращане или на собствен сървър, вместо да ги вграждате в съобщението.
7. Изпратете тест до Gmail, Outlook и телефон, преди да планирате кампанията.

Общото тегло на имейла е по-важно от всяко отделно изображение

Поддържайте цялото съобщение под 600 KB включително изображенията, защото абонатите отварят бюлетини на телефони, често при слаба връзка. Бюлетин от 5 MB се зарежда бавно и се затваря, преди да се визуализира.

Пребройте изображенията, преди да компресирате каквото и да било. Бюлетин, съдържащ 12 снимки по 100 KB всяка, вече е 1.2 MB, което подсказва, че оформлението се нуждае от по-малко изображения, а не от по-малки такива. Намаляването на броя на изображенията обикновено подобрява както производителността, така и четливостта, тъй като дългите бюлетини с много изображения рядко се четат до края.

Тъмният режим променя начина, по който изглеждат изображенията

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

Използвайте PNG файлове с прозрачен фон за лога и икони, така че да стоят правилно върху всеки цвят. Избягвайте изображения с бял фон, където дизайнът предполага, че страницата зад тях също е бяла. Снимките обикновено са безопасни, тъй като клиентите рядко променят фотографско съдържание, докато плоските графики и текстовите изображения са мястото, където се появяват проблемите с тъмния режим.

Retina екрани и острота на изображението

Експортирайте на два пъти ширината на показване, така че изображенията да останат остри на екрани с висока плътност, след което компресирайте по-силно, за да компенсирате допълнителните пиксели. Изображение от 1200 пиксела с качество 70 обикновено изглежда по-добре и тежи по-малко от изображение от 600 пиксела с качество 95.

Задайте атрибута width в HTML кода според размера на показване, а не според размера на файла, така че клиентът да изобразява изображението на 600 пиксела, използвайки допълнителните детайли. Пропускането на атрибута width кара някои клиенти да показват изображението в пълния му размер в пиксели, което разваля оформлението на настолен компютър.

Проверка на кампания преди изпращане

• Изпратете тест до Gmail, Outlook, Apple Mail и поне един телефон.
• Прегледайте теста с блокирани изображения, като потвърдите, че съобщението все още има смисъл.
• Уверете се, че съобщението не е отрязано в Gmail, който показва връзка Преглед на цялото съобщение при отрязване.
• Потвърдете, че всяко изображение има алтернативен текст (alt text), описващ какво показва.
• Проверете визуализацията в тъмен режим, особено за лога и плоски графики.
• Сберете общото тегло на всички изображения и потвърдете, че остава под 600 KB.

Подготовка на кампания на един пак

Обработете всяко изображение в бюлетина наведнъж, така че цялата кампания да споделя една спецификация. Един бюлетин обикновено съдържа от 5 до 15 изображения, а човек, който изпраща седмично, подготвя стотици за една година.

Задайте ширината и целта в KB веднъж, пуснете изображенията и всеки файл се връща съответстващ. Всичко се изпълнява във вашия браузър на собствения ви процесор, така че неоповестени оферти, списъци с абонати, визуализирани като изображения, и работа по кампании на клиенти никога не стигат до сървър. За агенция, подготвяща стартиране, запазването на тези файлове локално избягва разкриване, което никакво спестяване от компресия не би оправдало.

Поддържайте папка с шаблони с правилно оразмерени запълващи елементи за всеки повтарящ се блок в оформлението, като например заглавката, реда с продукти в 2 колони и логото във футъра. Седмичните изпращачи използват едни и същи 4 или 5 форми за неограничено време, а напасването на нови графики към съществуваща спецификация отнема по-малко време, отколкото отново да се определят размерите за всяка кампания.