https://ifwiki.ru/index.php?action=history&feed=atom&title=%D0%A0%D0%B5%D1%86%D0%B5%D0%BF%D1%82_%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA_%D0%B4%D0%BB%D1%8F_Twine_2 Рецепт картинок для Twine 2 - История изменений 2026-04-08T12:52:31Z История изменений этой страницы в вики MediaWiki 1.43.3 https://ifwiki.ru/index.php?title=%D0%A0%D0%B5%D1%86%D0%B5%D0%BF%D1%82_%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA_%D0%B4%D0%BB%D1%8F_Twine_2&diff=28373&oldid=prev Oreolek: /* Зашить картинку в HTML */ 2020-04-13T12:00:00Z <p><span class="autocomment">Зашить картинку в HTML</span></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="ru"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 12:00, 13 апреля 2020</td> </tr><tr> <td colspan="2" class="diff-lineno">Строка 36:</td> <td colspan="2" class="diff-lineno">Строка 36:</td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/pre&gt;</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/pre&gt;</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker" data-marker="−"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Теперь вместо нескольких файлов у вас есть только один<del style="font-weight: bold; text-decoration: none;">. Недостаток такого подхода в том, что размер файла быстро растёт. Игра не запустится, пока не прогрузится полностью</del>.</div></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Теперь вместо нескольких файлов у вас есть только один.</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Недостаток такого подхода в том, что размер файла быстро растёт. Во-первых, в кодировке base64 файлы «весят» больше, чем исходники. Во-вторых, это напрямую замедляет загрузку: игра не запустится, пока не прогрузится полностью.</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Зашить видео в HTML ===</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Зашить видео в HTML ===</div></td> </tr> <!-- diff cache key ifwiki:diff:1.41:old-27972:rev-28373:wikidiff2=table:1.14.1:bc2a06be --> </table> Oreolek https://ifwiki.ru/index.php?title=%D0%A0%D0%B5%D1%86%D0%B5%D0%BF%D1%82_%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA_%D0%B4%D0%BB%D1%8F_Twine_2&diff=27972&oldid=prev Oreolek в 12:31, 24 февраля 2020 2020-02-24T12:31:44Z <p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="ru"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 12:31, 24 февраля 2020</td> </tr><tr> <td colspan="2" class="diff-lineno">Строка 36:</td> <td colspan="2" class="diff-lineno">Строка 36:</td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/pre&gt;</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/pre&gt;</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker" data-marker="−"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Теперь вместо нескольких файлов у вас есть только один. Недостаток такого подхода в том, что размер файла быстро растёт.</div></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Теперь вместо нескольких файлов у вас есть только один. Недостаток такого подхода в том, что размер файла быстро растёт<ins style="font-weight: bold; text-decoration: none;">. Игра не запустится, пока не прогрузится полностью</ins>.</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Зашить видео в HTML ===</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Зашить видео в HTML ===</div></td> </tr> </table> Oreolek https://ifwiki.ru/index.php?title=%D0%A0%D0%B5%D1%86%D0%B5%D0%BF%D1%82_%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA_%D0%B4%D0%BB%D1%8F_Twine_2&diff=27971&oldid=prev Oreolek в 12:29, 24 февраля 2020 2020-02-24T12:29:01Z <p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="ru"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 12:29, 24 февраля 2020</td> </tr><tr> <td colspan="2" class="diff-lineno">Строка 1:</td> <td colspan="2" class="diff-lineno">Строка 1:</td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[https://www.youtube.com/watch?v=klGqB3BpVW8 Видео от Константина Китманова]</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[https://www.youtube.com/watch?v=klGqB3BpVW8 Видео от Константина Китманова]</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker" data-marker="−"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[<del style="font-weight: bold; text-decoration: none;">Текст на английском </del>https://twinery.org/cookbook/images/chapbook/chapbook_images.html]</div></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[https://twinery.org/cookbook/images/chapbook/chapbook_images.html<ins style="font-weight: bold; text-decoration: none;"> Текст на английском</ins>]</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Для простоты пропустим вопрос хостинга. У вас есть HTML, рядом с ним лежит картинка. Название файла картинки нужно будет писать с учётом регистра&lt;ref&gt;т.е. если картинка называется &lt;code&gt;Привет.jpg&lt;/code&gt;, её не надо подключать как &lt;code&gt;привет.jpg&lt;/code&gt;&lt;/ref&gt;, потому что иначе оно не запустится онлайн.</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Для простоты пропустим вопрос хостинга. У вас есть HTML, рядом с ним лежит картинка. Название файла картинки нужно будет писать с учётом регистра&lt;ref&gt;т.е. если картинка называется &lt;code&gt;Привет.jpg&lt;/code&gt;, её не надо подключать как &lt;code&gt;привет.jpg&lt;/code&gt;&lt;/ref&gt;, потому что иначе оно не запустится онлайн.</div></td> </tr> <!-- diff cache key ifwiki:diff:1.41:old-27970:rev-27971:wikidiff2=table:1.14.1:bc2a06be --> </table> Oreolek https://ifwiki.ru/index.php?title=%D0%A0%D0%B5%D1%86%D0%B5%D0%BF%D1%82_%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA_%D0%B4%D0%BB%D1%8F_Twine_2&diff=27970&oldid=prev Oreolek: Новая страница: «[https://www.youtube.com/watch?v=klGqB3BpVW8 Видео от Константина Китманова] [Текст на английском https://twinery.org…» 2020-02-24T12:28:46Z <p>Новая страница: «[https://www.youtube.com/watch?v=klGqB3BpVW8 Видео от Константина Китманова] [Текст на английском https://twinery.org…»</p> <p><b>Новая страница</b></p><div>[https://www.youtube.com/watch?v=klGqB3BpVW8 Видео от Константина Китманова]<br /> <br /> [Текст на английском https://twinery.org/cookbook/images/chapbook/chapbook_images.html]<br /> <br /> Для простоты пропустим вопрос хостинга. У вас есть HTML, рядом с ним лежит картинка. Название файла картинки нужно будет писать с учётом регистра&lt;ref&gt;т.е. если картинка называется &lt;code&gt;Привет.jpg&lt;/code&gt;, её не надо подключать как &lt;code&gt;привет.jpg&lt;/code&gt;&lt;/ref&gt;, потому что иначе оно не запустится онлайн.<br /> <br /> === Подключить файл ===<br /> <br /> Достаточно просто написать: &lt;code&gt;&lt;img src=&quot;./logo.png&quot; width=&quot;256&quot; height=&quot;256&quot;&gt;&lt;/code&gt; и у вас вставится картинка &lt;code&gt;logo.png&lt;/code&gt; размером 256x256 пикселей.<br /> <br /> ==== SugarCube ====<br /> В SugarCube есть особый тег для картинок: &lt;code&gt;img&lt;/code&gt;. <br /> <br /> &lt;pre&gt;<br /> [img[Описание|Файл.png]]<br /> [img[$src]]<br /> [img[Файл.png][Ссылка]]<br /> &lt;/pre&gt;<br /> <br /> См. [http://www.motoslave.net/sugarcube/2/docs/#markup-image документацию на английском.]<br /> <br /> === Зашить картинку в HTML ===<br /> <br /> Придётся потрудиться, но это всё ещё возможно. Чтобы «зашить» картинку в сам HTML файл, её надо перевести в кодировку base64 и вставить в стили:<br /> <br /> &lt;pre&gt;<br /> :: UserStylesheet[stylesheet]<br /> .base64image {<br /> width: 256px;<br /> height: 256px;<br /> background-image: url(&#039;data:image/png;base64…&#039;);<br /> }<br /> <br /> :: Start<br /> &lt;div class=&quot;base64image&quot;&gt;&lt;/div&gt;<br /> &lt;/pre&gt;<br /> <br /> Теперь вместо нескольких файлов у вас есть только один. Недостаток такого подхода в том, что размер файла быстро растёт.<br /> <br /> === Зашить видео в HTML ===<br /> Приблизительно так же можно делать даже с видео. Не стоит, но мы всё равно вам расскажем, как.<br /> <br /> &lt;pre&gt;<br /> :: Start<br /> &lt;video autoplay controls src=&quot;data:video/mp4;base64,…&quot;&gt;&lt;/video&gt;<br /> &lt;/pre&gt;<br /> <br /> [[Категория:Документация Twine]]</div> Oreolek