dom1n1k

Средствами CSS это сделать нельзя.

Можно через Canvas, но это будет довольно муторно и громоздко.

Ещё умеют отбрасывать тени SVG-картинки, но векторные. Чисто теоретически... можно попробовать поковыряться в сторону того, чтобы завернуть PNG в SVG контейнер, потом фильтрами наложить маску и отбросить тень. Но если и получится, то будет опять-таки громоздко. И почти наверняка не будет работать в IE10-.

Ещё можно попробовать расслоить картинку на две - само изображение и тень. Тень тогда можно сжать сильнее, с малым количеством цветов. И возможно, что общий вес снизится.

Но вообще, кмк, всё же лучше не морочить себе голову, а оставить картинки как есть.

Судя по всему, какой-то виджет (социалки, карусели, лайтбоксы?) в процессе своей инициализации выдает в дом элемент больше 320px, и тот распирает страницу.
Надо искать виновника поочередным перебором, либо (если нужен быстрый костыль) сказать какому-то врапперу overflow: hidden;

Если «фиксировать width не предлагать», то практически никак.
То, что шрифты рендерятся по-разному на различных ОС — известный факт и ничего с этим не поделать.
Если вам критичны размеры блоков до пикселя, то и управлять нужно ими (размерами блоков) напрямую. А если вы управляете ими косвенно (через размеры текста) — погрешности неизбежны.

Если бы был известен контекст задачи, то возможно, можно было бы подсказать какие-то половинчатые решения-костыли. Но именно в такой постановке — никак.