наименьший размер файла для прозрачного однопиксельного изображения


Я ищу наименьшее (с точки зрения размера файла) прозрачное изображение размером 1 пиксель.

В настоящее время у меня есть gif размером 49 байт, который кажется самым популярным.

Но я помню, что много лет назад у меня был один, который был меньше 40 байт. Возможно, 32 байта.

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

UPDATE : Хорошо, я нашел 42-байтовый прозрачный одиночный пиксель gif: http://bignosebird.com/docs/h3.shtml

UPDATE2 : похоже, что все, что меньше 43 байт, может быть нестабильным в некоторых клиентах. Этого не может быть.

11 59

11 ответов:

Проверьте это blank.gif файл (43 байта). Менее 49 :D

Вот 32-байтовый прозрачный GIF, который (должен) работать везде

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=

47 49 46 38 39 61 01 00 01 00 00 00 00 21 F9 04
01 00 00 00 00 2C 00 00 00 00 01 00 01 00 00 02

Объяснение

Достижение минимально возможного GIF зависит от реализации спецификации GIF, которая используется. Веб-браузеры обычно снисходительны, когда речь заходит о декодировании GIF-файлов. Вы можете найти действительно маленький GIF, который работает как прозрачный в одном браузере, но белый/черный в другом. И он может даже не открываться в таких программах, как Gimp, Paint и Photoshop.

Самый маленький почти допустимый прозрачный GIF равен 32 байтам. "Почти действительный", потому что трейлер и некоторые данные LZW могут быть отброшены, и он все равно будет открыт практически во всех программах.

Это делается с помощью GIF spec , и каждый компонент может быть разбит следующим образом:

  1. сигнатура файла / версия, 6 байт
  2. логический дескриптор экрана , 7 байт
  3. необязательно: глобальная таблица цветов , 6 байтов1
  4. необязательно: расширение графического Управления , 8 bytes2
  5. дескриптор изображения , 10 байт
  6. LZW Data , 1-4 bytes3
  7. необязательно: прицеп (0x3B), 1 byte⁴

1 глобальную таблицу цветов можно безопасно удалить, отключив ее в дескрипторе логического экрана
2 это необходимо для прозрачности в большинстве программ
3 требуется только 3 байта данных LZW, и эти байты могут быть практически любыми. Хотя строго требуется только первый байт 0x02.
Трейлер можно извлечь без вредных последствий.

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

Другие Примеры:

Тот самый следующие 24 байта отображаются как прозрачный GIF в Chrome, однако он непрозрачно белый в Firefox:

47 49 46 38 39 61 01 00 01 00 00 00 00 2C 00 00 00 00 01 00 01 00 00 02

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

следующие 14 байт раньше работали только в Chrome, но больше нет:

47 49 46 38 39 61 01 00 01 00 00 00 00 2C

data:image/gif;base64,R0lGODlhAQABAAAAACw=

Вот что я использую в массиве байтов C# (избегает доступа к файлам)

static readonly byte[] TrackingGif = { 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x1, 0x0, 0x1, 0x0, 0x80, 0x0, 0x0, 0xff, 0xff, 0xff, 0x0, 0x0, 0x0, 0x2c, 0x0, 0x0, 0x0, 0x0, 0x1, 0x0, 0x1, 0x0, 0x0, 0x2, 0x2, 0x44, 0x1, 0x0, 0x3b };

В asp.net MVC это может быть возвращено следующим образом

return File(TrackingGif, "image/gif");

Чтобы расширить ответ Джейкоба на массив байтов, я сгенерировал массив байтов c# для транспаранта 1x1 gif, который я сделал в photoshop.

static readonly byte[] TrackingGif = { 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, 0x01, 0x00, 0x81, 0x00, 0x00, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x21, 0xff, 0x0b, 0x4e, 0x45, 0x54, 0x53, 0x43, 0x41, 0x50, 0x45, 0x32, 0x2e, 0x30, 0x03, 0x01, 0x01, 0x00, 0x00, 0x21, 0xf9, 0x04, 0x01, 0x00, 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0x08, 0x04, 0x00, 0x01, 0x04, 0x04, 0x00, 0x3b};

Http://polpo.org/blank.gif составляет 37 байт прозрачный gif, сделанные с gifsicle.

В css-готовом формате base64:

data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==
  • Смотрите: http://www.google-analytics.com/__utm.gif , 35B

  • Альтернатива в Perl (45B):

    ## tinygif
    ## World's Smallest Gif
    ## 35 bytes, 43 if transparent
    ## Credit: http://www.perlmonks.org/?node_id=7974
    
    use strict;
    my($RED,$GREEN,$BLUE,$GHOST,$CGI);
    
    ## Adjust the colors here, from 0-255
    $RED   = 255;
    $GREEN = 0;
    $BLUE  = 0;
    
    ## Set $GHOST to 1 for a transparent gif, 0 for normal
    $GHOST = 1;
    
    ## Set $CGI to 1 if writing to a web browser, 0 if not
    $CGI = 0;
    
    $CGI && printf "Content-Length: %d\nContent-Type: image/gif\n\n", 
        $GHOST?43:35;
    printf "GIF89a\1\0\1\0%c\0\0%c%c%c\0\0\0%s,\0\0\0\0\1\0\1\0\0%c%c%c\1\
        +0;",
        144,$RED,$GREEN,$BLUE,$GHOST?pack("c8",33,249,4,5,16,0,0,0):"",2,2,4
    +0;
    

Запустите его ...

$ perl tinygif > tiny.gif
$ ll tiny.gif
-rw-r--r--  1 stackoverflow  staff    45B Apr  3 10:21 tiny.gif

Прозрачная точка, 43 байта:

echo "\x47\x49\x46\x38\x39\x61\x1\x0\x1\x0\x80\x0\x0\xff\xff\xff\xff\xff";
echo "\xff\x21\xf9\x04\x1\x0a\x0\x1\x0\x2c\x0\x0\x0\x0\x1\x0\x1\x0";
echo "\x0\x2\x2\x4c\x1\x0\x3b";

Оранжевая точка, 35 байт:

echo "\x47\x49\x46\x38\x37\x61\x1\x0\x1\x0\x80\x0\x0\xfc\x6a\x6c\x0";
echo "\x0\x0\x2c\x0\x0\x0\x0\x1\x0\x1\x0\x0\x2\x2\x44\x1\x0\x3b";

Без таблицы цветов (возможно, окрашенной в черный цвет), 26 байт:

echo "\x47\x49\x46\x38\x39\x61\x1\x0\x1\x0\x0\xFF";
echo "\x0\x2C\x0\x0\x0\x0\x1\x0\x1\x0\x0\x2\x0\x3B";
Первые два я нашел некоторое время назад (во времена уязвимости timthumb), и я не помню источников. Последний я нашел здесь. P.S.: использовать в целях слежения, а не в качестве спейсеров.

Я думаю, что это самый запоминающийся 1x1 (38 байт):

data:image/gif,GIF89a%01%00%01%00///;

Согласно спецификации заголовка GIF:

GIF Header

Offset   Length   Contents
  0      3 bytes  "GIF"
  3      3 bytes  "87a" or "89a"
  6      2 bytes  <Logical Screen Width>
  8      2 bytes  <Logical Screen Height>

Первый %01%00 - ширина = 0x0001

Обратите внимание, что 1px %01%00 равно 0x0001

Не %00%01 иначе это будет 0x0100

Вторая-высота, такая же, как и выше

Следующие 3 байта вы можете ввести что угодно, браузер может разобрать его

Например /// или !!! или ,,, или ;;; или +++

Последний байт должен быть: ; , !

Кстати, если вы используете /// или \\\ на 3 байта рядом с размером

Заголовок страницы будет отображать последний символ, в противном случае будет отображаться gif,...

Проверено с Chrome, Firefox оба работали, IE не работает

Http://www.maproom.co.uk/0.gif - это 43 байта, немного бреется.

На самом деле вы не должны использовать "spacer gif". Они использовались в 90-х годах; сейчас они очень устарели, и у них нет никакой цели вообще, и они вызывают несколько проблем доступности и совместимости.

Используйте CSS.

Я помню, как однажды, давным-давно, я попытался создать самый маленький gif. Если вы следуете стандарту, если я правильно помню, размер составляет 32 байта. Но вы можете "взломать" спецификацию и иметь 26-28 байт, что будет показано в большинстве браузеров. Этот GIF не совсем "правильный", но иногда работает. Просто используйте спецификацию заголовка GIF и шестнадцатеричный редактор.