Самый простой способ конвертировать сайт тяжелого изображения в html/css/javascript?

Question

У меня есть этот PSD, который мне нужно преобразовать в html и css и javascript. Это очень тяжело для изображений, как вы можете видеть, и для одной полной страницы. Какой самый быстрый способ загрузить что-то подобное. Я рассматривал другие вопросы с подобными ситуациями, но я хотел получить мнение об этой конкретной ситуации. Лучше всего расщепить изображения на спрайты, pngcrushing и ленивую загрузку? Использование Svgs? Преобразование изображения в CSS? и т.д? Заранее спасибо.

Answer 1

Вот несколько советов, которые применяются, как правило, с подробностями и примерами для вашей конкретной ситуации:

1. Использования правильной разметки с хорошей семантикой

   Всегда встраивать, что вы собираетесь делать в семантический правильный HTML:

   <header> 
       <h1>Cactus</h1> 
   </header> 
   <div id="main"> 
       ... 
   </div> 
   <footer> 
       <a href="#">Contact Us</a> 
   </footer> 
   

2. Использование текста в вместо изображений

   Не используйте изображения с текстом на них. Вместо этого используйте реальный текст. Это в основном для SEO и доступности (например, для слепых посетителей, которые используют экранный ридер). Если вы не хотите придерживаться шрифта по умолчанию, такого как Helvetica, вы можете использовать веб-шрифты с помощью правила CSS @font-face.

   Примеры: "Музыка Discovery", "Скачать Mac App", "скачать на App Store"

3. Предпочитают свойства CSS

   Некоторые эффекты могут быть сделаны с CSS3: фоновые градиенты, тень окна, радиус границы и изображения границы отлично подходят для стилизации. Если вы можете добиться аналогичного результата с помощью свойств CSS, предпочтите их для фоновых изображений.

   Например, кнопка «Загрузить приложение для Mac» легко сделать с помощью CSS-только без изображений.

4. Минимизация считают запросы

   Все остальное должно быть изображение. Каждый запрос требует времени, поэтому минимизируйте счет. Фоновое изображение большое, и я бы сделал два изображения: один идет от вершины к заголовку «Начало работы с Cactus». Второй начинается внизу, где написано «Узнайте, как работает кактус». Между этими двумя изображениями просто цвет, поэтому используйте свойство CSS background для этой части.

   Другие изображения включают значки и фотографии. Поместите все их в один файл (спрайт).Если вы собираетесь использовать Compass (я очень рекомендую его) есть встроенный инструмент, который позволяет SuperEasy преобразовать набор графических файлов в один большой спрайт с их соответствующей CSS классов: Spriting with Compass

5. Оптимизировать для мобильные устройства

   Если вы собираетесь сделать свой сайт ответственным (= хорошо выглядящим и пригодным для использования на каждом устройстве), вам нужно обратить внимание на различия в дизайне.

   На мобильных устройствах меньше места, поэтому большое фоновое изображение может быть меньше. Это уменьшает время загрузки страниц, что имеет решающее значение для мобильных устройств.

   Кроме того, вам может потребоваться немного изменить макет, но ваш дизайн кажется вполне совместимым с меньшей шириной, если вы создадите спрайт с меньшими изображениями.

Answer 2

Используйте css спрайт для небольших изображений. Для фонового изображения не помещайте изображение целиком и не храните его частично. Оптимизируйте изображение как можно больше (до 80%). Было бы лучше, если бы вы могли использовать CDN для изображений, css и javascript.