Оптимизиране на изображенията за банери - css, html5, оптимизация, банер, ретина

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

Трябва да създам някои HTML5 банери с различни размери, някои за мобилни, други за настолни. Моят лимит за всеки е 100kb. Получих изображения и текст в InDesign файлове.

Какъв е най-добрият начин за оптимизиране на тези изображения и текстови групи?

Досега ги превръщах в PNG-8, използвайки Fireworks, със средни резултати. Ако те „станат средни сега, те ще изглеждат ужасно на екраните на Retina. Не искам това.

За да се противопоставим на това, трябва ли да ги запазя в по-големи размери и да ги мащабирам в HTML5 / CSS?

Чувствам, че съм пропуснал нещо основно, но съм търсил цял следобед и не мога да намеря реален отговор.

Отговори:

Изглежда, че ще имате полза от внедряването на HTML5 <picture> елемент:

Допълнителна информация:

1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
2. http://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015