Оптимизация графических конструкций для Web

Статья содержит информацию об оптимизации графического дизайна для Интернета.

A+ A-

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

Совершенство графического дизайна

Совершенство художественного оформления не только навык. Это отношение.

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

Признания графического покупателя

Теперь, для исповеди, я не графический дизайнер по профессии - как правило, моя роль состоит в том клиента. Графический покупатель. Таким образом, у меня есть экономический интерес в обеспечении лучшего компромисс между качеством и размером файла.

Немного предыстории Обо мне

Мой день задание выполняется и управление Войти настольное приложение Facebook под названием Чит Чат, как таковой я склонен быть недостающим звеном между дизайнерами и программистами.

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

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

Слон в комнате - Компромисс между размером файла и качество изображения

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

Используйте Отличный инструмент

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

Короче говоря, я бы рекомендовал использовать Adobe Fireworks CS6, в моем опыте это гораздо лучше, чем любой другой инструмент при экспорте большой веб-готовые изображения для минимально возможного размера файла.

Выберите свой графических форматов Мудро

В то время как большинство дизайнеров уже будут знать, что некоторые форматы лучше, чем другие для некоторых вещей, более продвинутые пользователи должны быть осведомлены о том, что некоторые браузеры - т.е. Internet Explorer 6 не поддерживает прозрачные изображения изначально.

Более того, некоторые смартфоны не поддерживают определенные графические форматы. Из-за различных алгоритмов, используемых для сохранения изображений, некоторые форматы лучше, чем другие в определенные вещи. Я бы порекомендовал вам проверить различные форматы, чтобы посмотреть, что выглядит лучше всего для самого маленького размера файла. Как правило, Jpgs лучше всего подходят для фотографий, PNG файлов лучше всего подходит для текстур и изображений и GIF лучше всего подходит для анимации. Тем не менее, GIF часто может достичь меньший размер файла, чем PNG - чаще всего, однако, качество часто страдает.

Сколько краски вам нужно?

Формат PNG является большой формат, в котором, чтобы сохранить ваши иконки, как правило, он будет предлагать большие размеры файлов, сохраняя при этом фантастическое качество. Формат PNG предлагает несколько суб-форматов - различные скорости передачи данных, в которой формат PNG сэкономит - 8 бит, 16 бит и 24 бит. При сохранении изображений для Интернета, как правило, 8 бит будет ваш лучший курс действий.

Формат PNG предлагает вам возможность сохранить ваши графики с ограниченным количеством цветов, в качестве компенсации, формат затем предлагает уменьшенный размер файла. Уменьшение количества цветов, вам нужно от 256 до 128, или, возможно, 64 может сделать немного по-другому в глаза, но значительное пропорциональное разнице размера файла. Уменьшение одного 2,5 Кб файла путем 0.5Kb путем уменьшения количества цветов может показаться, что не очень много, более 20 изображений, которые по-прежнему предлагает скидку 20% - 10Kbs. Это делает разницу.

Растяжение изображения в браузере

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

Чтобы дать вам пример, на chitchat.org.uk - веб-сайт, который распространяет нашу Facebook чате приложение, мы используем повторяющийся узор из Facebook рисунков профиля.

Стандартизация

Сохранение меню и пункты стандартизированы могут помочь уменьшить размер файла веб-сайта.

Apache Сжатие

Если вы не на стороне сервера специалист а - или немного компьютерной Geek, как я, вы, вероятно, не будет знать об этой уловке. Если вы разрабатываете PSD-файл для веб-дизайна или разработки для веб-сайта, вполне вероятно, что вы будете иметь целевую скорость, с которой работать. Это может привести к некоторым довольно попало дизайн жертвы.

Тем не менее, здесь есть уловка, чтобы иметь в виду, что не будет сразу видно. Скорее всего, ваш клиент будет иметь доступ к профессиональным веб-хостинга, они хотели иметь доступ к чему-то под названием HTAccess предполагая, что они у себя на веб-сервер Apache - которые делают большинство веб-сайтов. В этом файл .htaccess, несколько строк кода может сделать это таким образом, что веб-хостинга поставляет сжатый (думаю, что "заархивированные") файлы в браузере, которые извлекаются на лету браузере.

Это приводит к более быстрому времени загрузки.

Код:

SetOutputFilter DEFLATE
SetEnvIfNoCase REQUEST_URI (?: GIF |? JPE г | PNG). $
нет-GZIP не DonT-варьироваться
SetEnvIfNoCase REQUEST_URI
. (?: Ехе |? Т GZ | застежка-молния | BZ2 | сидеть | ЭОР) $
нет-GZIP не DonT-варьироваться
SetEnvIfNoCase REQUEST_URI PDF-файл $ нет-GZIP не DonT-варьироваться
BrowserMatch ^ Mozilla / 4 GZIP-только-текст / html
не BrowserMatch ^ Mozilla / 4.0 [678] нет-GZIP
BrowserMatch bMSIE! Нет-GZIP! GZIP-только-текст / html

Ads

Поделиться

последний

Лучшие альтернативы Ubuntu искать, если вы Linux Lover

Давайте начнем знакомство с чем-то; простой, но немного не ...

Как добавить подпись в Gmail Входящие - Добавить подпись Google в Gmail

Входящие с помощью Google была одна из лучших вещей, которы...

Еженедельно Tech News: Nokia, Google и Nintendo

Привет всем, это Пятница, 3 марта, и так же, как всегда, мы...

Raspberry Pi Проекты для начинающих - Что вы можете сделать с Raspberry Pi

Raspberry Pi представляет собой серию малой мощности, одноп...

Лучший VPN для Android 2017 года - Как использовать VPN в Android

Прошли те дни, когда виртуальные частные сети были только д...

Комментарии