Плагин для Google Chrome PerfectPixel

Содержание материала:

Про CSS

Адаптивный Pixel Perfect

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

Например, так появился генератор HTML-дерева: он позволяет посмотреть структуру документа, обнаружить простые ошибки в БЭМ-классах и проверить дерево заголовков. Полезный инструмент не только для ученика, но и для наставника, регулярно им пользуюсь.

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

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

Ученики получают учебный дизайн из трёх страниц, каждая из которых имеет макеты для трёх состояний: мобильный, планшетный и десктопный — всего девять макетов. В процессе вёрстки адаптивной страницы имеет смысл периодически менять размер окна и проверять, что при добавлении стилей для десктопной версии не поломалась, например, мобильная. Как тут лучше всего проверять соответствие макету?

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

Первым делом я конечно вспомнила про плагин Pixel Perfect (он как минимум есть для Chrome и Firefox), но он не подходит по ряду причин. Например, загруженные макеты не умеют меняться при переходе между страницами и при изменении окна браузера, а переключать их каждый раз руками довольно быстро надоест. Тем более, что есть медиавыражения, которые прекрасно могут переключать макеты за нас.

Моё самое первое решение выглядело вот так:

Этот код вставляется в каждой страницы. В нём задаются нужные медиавыражения, а ссылки на картинки меняются на актуальные макеты для каждой конкретной страницы.

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

Но по мере написания стилей на странице появляются свои фоны и картинки, и макеты в нижнем слое становятся не видны. Как быть?

Следующим моим решением стало расширение для Хрома, которое на каждой странице создаёт полупрозрачный слой с макетами. При изменении размеров окна макеты меняются с помощью медиавыражений, как и в предыдущем случае. Бонусом было добавлено управление прозрачностью слоя с макетами и возможность включить режим наложения difference , чтобы было легче находить различия.

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

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

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

Если макеты задать фоном для , при изменении прозрачности макеты тоже станут полупрозрачными, поэтому в качестве слоя с макетами лучше использовать элемент :

Как и в предыдущем случае, макеты будут лежать под разметкой, но сейчас если у задан фон, их не будет видно. Сделаем слой с разметкой полупрозрачным, добавив opacity для :

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

Она позволяет управлять прозрачностью (в данном случае вместо макетов просто полосатый фон), её можно таскать по странице и можно выключить, если не нужна.

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

Установка в итоге выглядит вот так:

Установите пакет в папку с проектом через npm:
Положите картинки с макетами в ваш проект в папку img (или в другую папку с картинками внутри проекта).
Вставьте в страницы такой код: Отредактируйте его под свой проект: настройте медиавыражения, поменяйте адреса картинок на рабочие.
Обновите страницу и пользуйтесь.

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

UPD: библиотека переехала на npm, спасибо всем участникам обсуждения.

Зачем в такая колбаса кода? Почему бы медиавыражения и пути к картинкам не убрать в конфиг/настройки скрипта?

Базовая часть — переключение макетов при изменении размеров окна — легко может быть сделана с помощью медиавыражений, для этого не нужен JavaScript. Такой код любой верстальщик может написать сам, своими руками. Pixel Glass просто делает управление прозрачностью чуть более удобным.

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

Мне вообще не нравится как вы всё сделали, я бы сделал всё по-другому!

Сделайте : ) Будет здорово, если появятся новые удобные инструменты.

PerfectPixel by WellDoneCode

автор: welldonecode

Необходим браузер Opera.

Официальный порт PerfectPixel с более чем 170 000 активными пользователями. Позволяет вам сравнить ваш HTML с оригинальным изображением, полученным от дизайнера

Снимки

О расширении

PixelPerfect

Программа PixelPerfect, разработанная компанией WellDoneCode, предназначена для реализации таких функций, как «Изображение сверху», «Наложение» и «Положительный отзыв приобретение». PixelPerfect — это бесплатная программа с закрытым исходным кодом, работающая на многих платформах, в числе которых Chrome, Firefox и Internet Explorer.

Программа	PixelPerfect
Лицензия	Бесплатная
Разработчик	WellDoneCode
Официальный сайт

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

Найдено 0 похожих программ, которые могут быть использованы только в качестве частичной альтернативы PixelPerfect.

Что такое Pixel Perfect верстка

Pixel Perfect верстка — это особая техника создания структуры html-кода, которая позволяет сверстанному html-шаблону максимально точно совпадать с оригинальным PSD-макетом пиксель в пиксель. При наложении html-шаблона на макет PSD должно произойти полное совпадение графических элементов, изображений и текста.

Применение Pixel Perfect верстки

Техника работы с Pixel Perfect версткой осуществляется за счет применения особых плагинов, созданных специально для определенных браузеров, а также с помощью специализированных скриптов. Основные этапы работы с Pixel Perfect версткой включают в себя такие процедуры:

Оригинальный PSD-макет необходимо сохранить в формате .png через программу Photoshop.
Html-шаблон, сверстанный по данному макету, открывается в браузере, после чего с помощью применения плагина копию в формате .png необходимо наложить на сверстанную страницу.
После наложения становится видна разница между расположением элементов на png-копии и html-макете. Далее проводится коррекция значений для точного совпадения.

Плагины и скрипты для Pixel Perfect верстки

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

Pixel Perfect под Firefox;
Pixel Perfect под Google Chrome;
X-Precise;
pixLayout и другие.

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

Pixel Perfect верстка в email-рассылках

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

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

Расширение PerfectPixel by WellDoneCode

Представляем очередной авторский обзор расширения в рамках нашей акции.

Расширение PerfectPixel для Google Chrome помогает верстальщикам и веб-разработчикам создавать разметку сайта, максимально соответствующую утвержденному заказчиком дизайну.

Открываете страницу, которую разрабатываете, в Chrome, запускаете PerfectPixel, добавляете новый слой — картинку-задание, и теперь можете в реальном времени накладывать изображение на результат, сравнивать и справлять дефекты. Ознакомится с работой расширения можно посмотрев это видео:

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

Для удобства разработчика имеется функция Lock/Заблокировать — при активации вы можете взаимодействовать с элементами страницы, которые находятся под активным слоем. Также можно менять прозрачность слоя, задавать ему явные координаты, менять масштаб (полезно для тестирования Retina изображений).

Для тех, кто хочет максимально эффективно работать с инструментом, поддерживаются горячие клавиши и режимы работы мыши, полный список которых имеется на официальном сайте проекта: www.welldonecode.com/perfectpixel/shortcuts.

Панель управления можно свернуть в правый край экрана путем двойного клика на заголовок. Мини-режим полезен при тестировании responsive дизайна на маленьких размерах экрана.

Расширение регулярно обновляется, добавляются новые функции, горячие клавиши, исправляются ошибки. Мы приветствуем любые замечания и пожелания, пожалуйста пишите нам на email: [email protected] В недалеком будущем планируется выпустить версии для других браузеров: Firefox, Safari, IE, реализовать синхронизацию слоев и настроек через облако. Подпишитесь на рассылку для того чтобы быть в курсе сроков выхода новой функциональности на официальном сайте: www.welldonecode.com/perfextpixel.

Буду рад ответить на ваши вопросы здесь в комментариях либо по почте.

Рад знакомству с коммьюнити Хром.РФ!

Алексей Белозеров,
Со-автор расширения PerfextPixel

PerfectPixel от WellDoneCode

Allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them. Works with DevTools and Firebug

Метаданные расширения

Используется

Add-on for web developers and markup designers. Official Firefox version of PerfectPixel for Chrome with 200 000+ active users

This add-on allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them.

Add-on is AD supported. Ads are injected into PerfectPixel panel only, no any injections into websites. If you wish to disable ads please check «Disable ads» checkbox in add-on preferences

Add-on tracks anonymized usage information of PerfectPixel panel UI with help of Google Analytics and Yandex.Metrika, to help us improve user experience. If you wish to disable tracking please uncheck «Send anonymous statistics to developers» checkbox in add-on preferences

Features:
* Works with both Developer Tools and Firebug
* No image size restrictions
* Multiple overlays support
* Inversion and scaling support
* Separate overlays for each website
* Overlays are saved between browsing sessions
* Minimalistic easy-to-use UI
* Drag-n-drop file uploading
* Keyboard arrow keys and mousewheel support

Tips:
* Double-click on header logo to expand/collapse main window

Сообщить о нарушении правил этим дополнением

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

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

Это дополнение может:

Получать доступ к вашим данных на всех сайтах
Получать доступ ко вкладкам браузера
Хранить неограниченное количество данных на стороне клиента

Узнать больше о разрешениях

Pixel perfect верстка

Я веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?

Быстрее создается страница, чем когда бегаешь между браузером и PSD.
Гораздо качественнее получается результат, от чего и ваш клиент в восторге аж придраться не к чему.
Банально удобнее видеть макет и тут же позиционировать элемент под ним.

Топ-пост этого месяца: Маршрутизация React и в других JS-фреймворках возможные проблемы и их решения

Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал.
Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp

После создания я смог его протестировать только на одном живом проекте, так что возможны баги, ну и так как это мой первый публичный проект для всех, прошу строго не судить. Однако прошло уже не мало времени как я ушел в back end, а мои друзья верстальщики продолжают работать используя данный скрипт.
Лично для меня процесс верстки стал гораздо удобнее. И доказывать клиенту что этот элемент расположен правильно, теперь не составляет труда. Так как ваш клиент также может использовать скрипт, не устанавливая доп. ПО.

Вкратце:
При создании нового проекта нужно будет подключать скрипт, и не забывать его удалять при сдаче.
После подключение нужно создавать папку или указать в диалоговом окне имя папки где лежит наша картинка, или же сразу прямой url. Я использую ‘.ajax’ с отключенным кроссдоменном. Так что картинки нужно хранить на том же домене где и сайт.

Далее можно настроить позиционирование и прозрачность картинки так как вы этого хотите.
Скрипт сохраняет каждую манипуляцию с картинкой в cookie, бегая по страницам сайта не нужно будет настраивать все заново.
Во время создания скрипта я представлял как разработчик будет переходить на другую страницу и видеть дизайн предыдущей страницы, тогда появилась идея создать layouts. Используя хот-кеи можно быстро поменять изображение соответствующее текущей странице сайта.
Последней удобной функцией пока стала ‘Hover mode’, картинка прячется автоматически если вы стараетесь инспектором выбрать какой-то элемент, и показывается снова.
Все хот-кеи тут:

П.С. Скрипт я писал в первую очередь для себя и друзей. Друзья одобрили и сказали делись со всеми. Вот делюсь.
Надеюсь он будет полезен и вам.

6 расширений Google Chrome для дизайнеров и веб-разработчиков

Сохраните себе, чтобы не потерять!

1. Web Developer

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

С помощью CSSViewer вы можете быстро посмотреть набор стилей для любого элемента страницы. Простой, но очень удобный плагин.

3. HTML Validator

Согласитесь, каждый раз заходить на сайта W3C чтобы проверить валидность кода не очень удобно? Расширение HTML Validator делает процесс удобным и практически молниеносным.

ColorPicker — это «пипетка» для Google Chrome. С помощью этого расширения вы можете определить значение цвета в любой области страницы.

5. Chrome Palette

Chrome Palette — еще одно полезное расширение для работы с цветом. Благодаря Chrome Palette можно за считанные секунды сформировать палитры из любого изображения.

Очень полезное расширение для Google Chrome. What Font позволяет разработчикам и дизайнерам определить, какие шрифты используются на веб-странице.

Найдены возможные дубликаты

Этот пост опоздал на много лет, все перечисленное уже давно встроено в дефолтный Developer Tools.

В каком архиве статью откопал?

Уууупс, и меня поглотила временная аномалия, отбросив год так в 2010, когда эти расширения были актуальны.

Штука действительно крутая! Очень радует адекватный редактор css и js в браузере, работа с кэшем и куками, проверка адаптива сразу на все экраны (правда косячить начало с последних 3х обновлений), да и валидаторы уже встроены в него

Хрень какая, актуальность поста — 10 лет

чувак, да ты упоролся.

правая кнопка мыши «посмотреть код» на элементе

уже лет как 5 действует.

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

а валидатор свой засунь в жопу его бесполезным разработчикам. эта ваша валидность верстки была модна где-то лет 7 назад. сейчас на дворе 2020 и всем насрать насколько сайт косоежит в ИЕ или насколько он несоответствует их странным представлениям о структуре верстки.

нормальный верстала сразу строит каркас под СЕО-оптимизацию и абсолютно похеру сколько процентов соответствия выдаст валидатор. Хром, Фокс и Оперу держит — и норм.

Можно ссылку на статью о «Каркасе под СЕО-оптимизацию»?

есть еще древняя статья на хабре, в принципе те же самые примеры, но там предлагается тестить на шестом ишаке, нуигонах

а валидатор свой засунь в жопу его бесполезным разработчикам. эта ваша валидность верстки была модна где-то лет 7 назад. сейчас на дворе 2020 и всем насрать насколько сайт косоежит в ИЕ или насколько он несоответствует их странным представлениям о структуре верстки.

Вы не правы! Если вы руководствуетесь статьёй по ссылке, то там вот что написано:

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

Во-вторых — SEO-верстка должна быть валидной. То есть пройти валидацию (проверку на соответствие стандартам W3C). Проверить валидность верстки сайта можно через официальный валидатор W3C.

Ходит много споров по вопросу важна ли валидность верстки для СЕО оптимизации сайта. Верстка с ошибками — как текст с ошибками. Неграмотный текст — неграмотная верстка. Делайте грамотную SEO-вестку.

Статья то тоже 14го года, кого сейчас вообще гребет IE ниже десятки? Рассуждаю, как веб-дизайнер. Почему негативно отношусь к нему, потому что еще месяца полтора назад я сам себя держал за жопу и не придумывал ничего интересного, так как прогер наш говорил «извиняй, друже, не можем мы эту хуйню реализовать, ибо в IE не будет отображаться корректно». Горело знатно.

Из изменений — только поддержка не ниже IE10, в остальном же требования не поменялись. А то, что прогер (скорее всего верстальщик) не может что-то реализовать в для ослика, то это проблемы специалиста, а не чьи то ещё. Просто все современные фронтенды жизни не могут представить без билиотек и всяких свисто-перделок, которые появились совсем недавно. В нативный js и адекватный css уже не могут! Встречал чела, который не мог эл-ты выровнять по вертикали без flex’а. И это печально.

Топ-пост этого месяца: Создание Off Canvas меню разметка HTML, стили CSS, код JavaScript и поддержка браузерами

Вот ответь на вопрос, пожалуйста. Я, скорее всего, многого в этом не понимаю, но нашему верстальщику 50 лет, он говорит, что опыт у него 20 лет почти в разработке сайтов.

Я ему рассказывал, что можно сделать так, чтобы на сайте номер телефона был просто текстом, на сотке он открывался как набор номера. Я рассказывал ему, что можно делать якорные ссылки. И на той недели он узнал от меня, что можно анимировать свг. Я придираюсь или это совсем пиздец?

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

Прочитал свои два коммента и понял, что двойными стандартами попахивает и противоречием самому себе. Поэтому поясню!

Есть молодые и «горячие» верстальщики, сввоеобразные хипстеры, которые ни строчки кода написать на js не могут, а всё на библиотеках решают (вызов библиотеки по ммнуалу не считается за написание кода). Они даже не до конца догоняют, как работает @media в css. Чаще всего эти люди хвастаются HTML5 и SCSS, при этом растыкивая section, header и footer не думая, зачем они нужны, а их исходники SCSS смотреть страшно. У этих специалистов фронтенд будет нормально работать только на последних версиях браузеров и на ПК, где не меньше 4 ГБ ОЗУ, т.к. скриптов там тьма-тьмущая.

А есть старики, которые застряли, в лучшем случае, в 2005 году и для них использование «новомодных» инструментов сродни сатанизму. Такие товарищи редко могут в адаптив, не приветствуют анимацию и псевдоклассы в css, а использование jQuery вызывает расстройство кишечника.

Так вот первые — делают красиво, но вёрстка не пройдёт валидацию, а скрипты конфликтуют друг с другом и дико грузят клиента (ониж на маках все сидят, такие модные)

Вторые же «на лицо ужасные — добрые внутри». Их код валиден, с какой стороны не подойди, но выглядит продукт убого и слабо вписывается в нынешний веб.

Лично моё мнение — держать нужно золотую середину. Об использовании каждой библиотеки думать несколько раз. Не нужно тянуть весь Бутстрап ради грида и фотмочек. Но и в каменный век отходить не нужно, отказываясь от более современных «примочек» (например, того же html5)

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

Кстати говоря, роботы поисковика — не что иное, как парсеры разметки. Валидную разметку он быстрее распарсит, а значит и индексация страницы пройдёт быстрее. Роботы любят заглядывать туда, где всё легко и просто! Поэтому не нужно всё лить на СЕОшников и забивать на вёрстку

Плагины Firefox для веб-разработчика

Вначале был Firefox

Я постоянно пользовался Firefox. Он меня вполне устраивал, особенно в процессе разработки и тестирования сайта. Google Chrome я попробовал сразу же после его выхода. Понравилась скорость рендеринга страниц.

Но через небольшое отрезок времени вернулся к Firefox, по причине отсутствия расширений и дополнений таких как Google Page Rank и панель веб-разработчика Webdev. Теперь с плагинами для Google Chrome проблем нет, их уже существует большое множество.

Плагин FireBug для Firefox

Это основной плагин веб-разработчика. Вы можете редактировать, выполнять отладку, просматривать CSS, HTML и JavaScript. Результат внесенных изменений отображается мгновенно. Плагин FireBug очень удобен для поиска фрагмента кода, отвечающего за вывод того или иного блока на странице, и, соответствующего ему CSS-стиля.

Плагин имеет замечательную функцию Inspect, с помощью которой можно посмотреть какие тэги и свойства определяют положение отдельного элемента на странице. Кроме того, во вкладке Layout можно посмотреть какие поля и отступы заданы для этого элемента.

Плагин FireBug для Firefox для веб-разработчика

Плагин Web Developer для Firefox

Плагин Web Developer — настоящий швейцарский нож веб-разработчика. Он позволяет легко и просто получить подробную информацию любых(!) элементов и их атрибутов на странице.

Плагин Web Developer для Firefox

Возможности плагина:

Работать с cookies (просмотр, изменение и удаление)
Работать со стилями CSS (просмотр, изменение, а также отладка таблиц стилей для принтеров, КПК и пр.)
Различные хаки с формами (просмотр элементов, изменение метода передачи данных, изменение максимальной длины и пр.)
Работать с изображениями (отключать отображение, показывать размер и свойства.)
Проводить анализ юзабилити
Эмулировать и самостоятельно задавать различные разрешения браузеров.

и многое другое, — всего не перечислишь.

Скачать плагин Web Developer для Firefox .

С ростом популярности гугловского браузера, этот же автор разработал аналогичный плагин и для Google Chrome.

Плагин Pixel Perfect для Firefox

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

Плагин HTML Validator для Firefox

HTML Validator упростит процесс создания валидной HTML разметки в соответствии с веб-стандартами. Теперь нет необходимости не нужно заходить на официальную страницу валидатора.

Плагин HTML Validator для Firefox

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

Скачать бесплатно PixelPerfect 0.2.1 Final

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

PixelPerfect подойдет только в тех случаях, когда вам срочно необходим вьювер, но у вас по каким-либо причинам нет стандартной программы для просмотра. Утилита поддерживает всего несколько популярных форматов – JPG, BMP, PNG и GIF.

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

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

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

• Позволяет просматривать изображения.
• Поддерживает всего 4 формата.
• Возможность растянуть фото по ширине.
• Не требует установки в систему.
• Очень маленький размер (меньше 150 КБ).
• Поддержка Windows XP и выше.

Программу PixelPerfect можно скачать абсолютно бесплатно.