包简介

Drop-in HiDPI solution. No new view helpers or workflow required. No JavaScript hacks. Just a few assumptions.

README 文档

README

Drop-in HiDPI solution for TYPO3

This extension will extend/override typo3's default view helpers and add srcset support. The difference to other solutions is that there is absolute no further set-up required other than installing this extension.

How to use it

Just install the extension and you are all set.

<f:image image="{image}" width="100" />

will result in

<img src="/normal/image.jpg" width="100" height="100" srcset="/hidpi/image.jpg 1.7321x" />

You just need to make sure that the normal image isn't already way to big for the 1x variant.

Read more about how this works and why i use 1.7321x as a scaling factor in the "how does it work?" section.

How to not use it

You can disable the implementation on a per case base by setting the right options. Here are some examples:

<f:image image="{image}" hidpi="{enable: 0}" />
<f:media file="{image}" hidpi="{enable: 0}" />
<f:media file="{image}" additionalConfig="{hidpi: {enable: 0}}" />

If you have a lot of problems or problems in areas where you can't easily change the implementation you might need to disable override in the extension configuration. In that case you'll need to manually use the extended ViewHelpers of this extension in your fluid templates.

<html xmlns:hidpi="http://typo3.org/ns/Hn/HiDPI/ViewHelpers" data-namespace-typo3-fluid="true">
    <hidpi:image image="{image}" />
    <hidpi:media file="{image}" />
</html>

how does it work?

Implementation

This extension uses the old srcset specification using the x syntax. This is not only because the support for this format is the best but also because the normally better implementation using sizes is actually worse for some of the assumptions of this extension.

You image tag will look like this:

<img src="/normal/image.jpg" width="100" height="100" srcset="/hidpi/image.jpg 1.7321x" />

A little known detail is that you can omit the 1x in srcset if you provide a normal src which you want to do for maximum compatibility.

Assumptions

This extensions works on a few assumptions. For detailed information look at the documentation of the HiDpiHandler class but here is a short recap:

HiDPI is most important for smartphones which means that resolutions above ~1000 pixels wide aren't required. Because of this assumption I don't need to know how the image scales in your responsive design.
Large images don't profit as much from HiDPI. This extends the last assumption in that it allows me to simply not include a srcset on images bigger than 1000 pixels.
HiDPI images don't require as much quality. Because of this I can massively decrease the quality of the HiDPI image so there is only a ~20% size increase for jpeg's. Other formats (namely png) can't be compressed further so there is no difference there. If the image is bigger than 150kb it will be dropped to prevent giant png's.
Pixel perfect scaling isn't required. Because of this assumption I opted to not deliver 2x images which have 4x the pixels. Instead I deliver 3 times the pixels or about factor ~1.73. The reason for this is that this massively decreases filesize and reducing jpeg quality only gets you so far before the color artifacts get noticeable in skies etc. There is a possible fix for this in mozjpeg but for simplicity I used this compromise resolution. Another reason for this is because I don't really know how big the image will really be on the screen so 2x might actually be bigger than the screen.

As you can see there are a lot of assumptions that may or may not match your exact case but the most important aspect is to never create a worse result than without this extension. That's why this extension rather fails to create a srcset than to create a horrible/oversize result. Manual optimization will definitely create better results but this drop-in solution will create good results without any additional work.

Options

There are a few optional options that you can optionally opt to operate.

To set them globally use $GLOBALS['TYPO3_CONF_VARS']['EXTCONF'][$extkey]['options'] either in your main extensions ext_localconf.php or in AdditionalConfiguration.php.

To set them in a single case use the new hidpi="{options}" attribute of the image/media view helper or alternatively using the additionalConfig="{hidpi: {options}}" on the media view helper.

enabled: true - can be used to disable handling of the srcset altogether on a per case bases.
maxDimension: 1000 - can be used to increase the maximum HiDPI image size.
maxFactor: 1.7321 - allows to in-/decrease the HiDPI scale factor. Note that this extensions scales jpeg quality accordingly.
minFactor: 1.4142 - allows to in-/decrease the minimum HiDPI scale factor. This comes into play if the image either already is near the maxDimension limit or if the source image (or the crop of it) doesn't have more pixels to to show in the HiDPI variant.
maxFileSize: 153600 - this is the limit for the file size. It acts as a failsafe in cases of very detailed images or pngs that just get huge at higher resolutions.

Browser support

Basically every browser in this table: https://caniuse.com/#feat=srcset

I don't respect things like picturefill by default since this is basically progressive enhancement but there are a lot of SignalSlots in the HiDpiHandler so you can modify the output at your will.

Run the tests

This project has some basic tests to ensure that it works in all typo3 versions described in the composer.json. These tests are run by bitbucket and defined in bitbucket-pipelines.yml.

To run them locally, there are some composer scripts provided in this project. Just clone the project, run composer install and then composer db:start, wait a few seconds, then composer test. You can also run composer test -- --filter TestCase to run specific text classes/methods/datasets.

Here is a list of available commands:

composer db:start will start a database using a docker command. You don't have to use it if you have a database available but you'll need to define the typo3Database* variables.
composer db:stop unsurprisingly stops the database again... and removes it.
composer test will run all available tests. If your first run fails then you might want to run cc.
composer test:unit will just run the unit tests.
composer test:functional will just run the functional tests.
composer cc will remove some temp files. If your functional test fail for no apparat reason try this.

hn/hidpi 适用场景与选型建议

hn/hidpi 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 2.3k 次下载、GitHub Stars 达 0，最近一次更新时间为 2019 年 06 月 08 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「media」「image」「img」「retina」「srcset」「2x」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 hn/hidpi 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 hn/hidpi 我们能提供哪些服务？

定制开发 / 二次开发

基于 hn/hidpi 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 hn/hidpi 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

wrav/simplesharing 8

Simple Sharing generates social media share links within CP entry pages, allowing you to quickly & easily share entries.

slavkovrn/yii2-lightbox 1

Yii2 LightBox image galary widget uses Lightbox v2.10.0 by Lokesh Dhakar

slavkovrn/yii2-imagecarousel 5

The Yii2 extension uses jQuery jquery.carousel-1.1.min.js and makes image carousel from php array of structure defined.

slavkovrn/yii2-imagegalary 2

The Yii2 extension uses jQuery PrettyPhoto and OwlCarousel js and makes image galary from php array of structure defined.

hitesh399/laravel-media 1

Laravel Media Popup to upload/view the files

gigcodes/asset-manager 0

Asset Manager Laravel package for Gigcodes UI Library

hn/hidpi

包简介

关键字：