purtroppo non posso permettermi di ridurle in larghezza perché poi dentro ci sarà del testo.
Ok. Però, se l'elemento contenitore principale ha una dimensione fissa (immagino sia così), puoi capire da te che non puoi far altro che ridurre la larghezza dei box/immagini per farci stare un ulteriore box. Che sia poi agendo direttamente sul file immagine o da proprietà html o dal css, il discorso non cambia.

Potresti provare ad agire da css. In base alle regole applicate sui box (mi riferisco a <div class="masonry width-1-4 height-1-2">
), potresti provare ad apportare queste modifiche:
codice:
    .masonry.width-1-4 { width: 186px; } /* anziché 233px */
    .masonry.height-1-4 { height: 233px; }
    .masonry.width-1-2 { width: 468px; }
    .masonry.height-1-2 { height: 374px; } /* anziché 468px */
    .masonry.width-3-4 { width: 703px; }
    .masonry.height-3-4 { height: 703px; }
Chiaramente, se altri elementi sulla pagina utilizzano tali regole, queste saranno applicate indistintamente. Per cui fai tu le dovute considerazioni.

Inoltre mi pare di capire che tu stia lavorando su un template responsive. In tal caso dovresti assicurarti se, effettuando eventuali modifiche a quei singoli elementi, non si vada a sfasciare in qualche modo la struttura nelle altre risoluzioni, e quindi compromettere il funzionamento del responsive.