Для того чтобы страницы сайта открывались быстро нужно использовать картинки как можно меньшего веса (размера файла). При этом, после компрессии качество изображений не должно сильно пострадать.

Чтобы выяснить, какой формат является оптимальным, мы провели тестирование форматов GIF, JPG, PNG и WEBP, и сравнили размеры получающихся файлов.

Методика тестирования

Компрессия осуществлялась на работающем сайте с помощью двух программ:
• Графическая библиотека GD, встроенная в PHP по умолчанию.
• Сторонняя программа ImageMagick и ее php-расширение Imagick.

Путем уменьшения настройки качества от 100 до 0 процентов, находилось значение, при котором качество изображения оставалось приемлемым.

Сразу скажем, что обе программы GD и Imagick дают одинаковый результат при одном и том же параметре качества (Q), поэтому все примеры приведены только для изображений, полученных в программе GD.

Реальные размеры для больших изображений 1600x900px, для миниатюр 400x225px — видимые размеры могут отличаться.

Миниатюрное изображения (thumbnail) 400x225px

По степени сжатия формат WEBP неоспоримый лидер.

При работе с фреймворком Bootstrap обычно сталкиваются с тремя основными проблемами:

1. Как поместить контент внизу колонки?
2. Как создать многорядную галерею колонок одинаковой высоты в одном .row?
3. Как центрировать горизонтально несколько колонок, если их суммарная ширина меньше 12 единиц и оставшаяся ширина нечетна?

Для решения первых двух проблем, необходимо скачать небольшой плагин.

Решение третьей проблемы подсмотрено здесь.

Общий код

<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize scroll', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>

Имеется в виду: какие адреса использовать для переходов внутри сайта? Допустим, мы хотим создать на домене site.ru с уже работающим сайтом другой подсайт, файлы которого будут находиться в папке shop. URL этого подсайта будет такой:

http://site.ru/shop

Почему мы усложнили задачу, будет ясно в конце данной статьи.

1. Абсолютные ссылки (absolute)

href="http://sites.ru/shop/" — ссылка на главную страницу магазина
href="http://sites.ru/shop/t-shirts/t-shirt-life-is-good/" — cсылка на страницу товара