派迪科技如何使用響應(yīng)圖像斷點(diǎn)生成器自動(dòng)執(zhí)行網(wǎng)頁的設(shè)計(jì)制作

在制作適應(yīng)各種分辨率的圖像時(shí)，我們需要生成一系列不同大小的資源。我們需要選擇一個(gè)最大分辨率，一個(gè)最小分辨率，以及介于兩者之間的一些尺寸（這是個(gè)棘手的問題）。可以根據(jù)頁面的布局和有關(guān)設(shè)備的一些合理假設(shè)來確定最大值和最小值。但是，當(dāng)開發(fā)人員開始實(shí)施響應(yīng)式圖像時(shí)，還不清楚如何調(diào)整中間圖像的大小。有些人在圖像寬度之間選擇了固定的步長(zhǎng)：其他人則選擇了固定數(shù)量的步驟并將其用于每個(gè)范圍：有些人選擇了常見的顯示寬度：當(dāng)時(shí)，由于我很懶惰并且不喜歡管理許多資源，所以我建議增加一倍：

所有這些策略本質(zhì)上都是任意的。杰森認(rèn)為必須有更好的方法。最終他意識(shí)到我們根本不應(yīng)該在像素方面考慮這些步驟。我們應(yīng)該以“文件大小的合理跳躍”為目標(biāo)；這些步驟應(yīng)以字節(jié)為單位定義。

例如，假設(shè)我們有以下兩個(gè)JPEG：

我們不想將1200像素寬的資源發(fā)送給只需要較小像素的人的最大原因不是多余的像素；這是多余的296 KB無用數(shù)據(jù)。但是不同的圖像壓縮方式不同。盡管像像素這樣的復(fù)雜照片隨著像素大小的每增加而急劇增加，但是簡(jiǎn)單的徽標(biāo)可能根本不會(huì)增加太多的重量。例如，此1000像素寬的PNG僅比200像素寬的PNG大8 KB 。

遺憾的是，還沒有任何易于使用的工具來生成目標(biāo)字節(jié)大小的圖像。而且，理想情況下，您需要一種可以為您生成整個(gè)響應(yīng)圖像資源的東西，而不是一次僅生成一個(gè)。Cloudinary已構(gòu)建了該工具！

下一個(gè)邊界？自動(dòng)藝術(shù)指導(dǎo)！

因此，我們?yōu)閿帱c(diǎn)問題建立了解決方案，并在此過程中建立了一個(gè)工具，該工具使生成適合分辨率的圖像變得容易。上載高分辨率的原件，并<img>以合理的斷點(diǎn)和資源進(jìn)行全面響應(yīng)以進(jìn)行備份。

基本的工作流程（上傳圖片，獲取響應(yīng)圖片）很吸引人。我們一直專注于斷點(diǎn)問題，但是當(dāng)我們發(fā)布解決方案時(shí)，人們很快就問：“它還能做什么？”

還記得我說過大多數(shù)時(shí)間大多數(shù)開發(fā)人員都需要基于分辨率的適應(yīng)嗎？有時(shí)，這還不夠。有時(shí)，我們想沿正交軸調(diào)整圖像：藝術(shù)方向。

每當(dāng)我們可視地更改圖像以適應(yīng)不同的環(huán)境時(shí)，我們就是在“藝術(shù)指導(dǎo)”。適應(yīng)分辨率的圖像到處看起來都是相同的-只是調(diào)整大小。以藝術(shù)為導(dǎo)向的圖像以視覺上可見的方式變化。在大多數(shù)情況下，這意味著裁切，以適應(yīng)新的布局或以小尺寸查看圖像時(shí)最重要的部分保持可見。

您需要的是一種可以某種方式“看見”貓并智能地將其植入的算法。

我們花了幾個(gè)月的時(shí)間，但我們也構(gòu)建了它，并將其打包為所有Cloudinary用戶可用的功能。

它是這樣工作的：當(dāng)您指定要使用“自動(dòng)重力”（g_auto）裁切圖像時(shí)，圖像將通過一系列測(cè)試運(yùn)行，包括邊緣檢測(cè)，面部檢測(cè)和視覺唯一性。這些不同的標(biāo)準(zhǔn)然后全部用于生成圖像“最重要”部分的熱圖。

整齊！

顯而易見，我們可以并且應(yīng)該使用g_auto的智能功能來為Generator添加自動(dòng)美術(shù)指導(dǎo)。在對(duì)標(biāo)記邏輯進(jìn)行了幾次升級(jí)和一些（令人吃驚的是）UX決策之后，我們做到了：該工具的第2版（現(xiàn)已具有美術(shù)指導(dǎo)）已投入使用。

讓我們?nèi)ビ斡[

您如何使用響應(yīng)式圖像斷點(diǎn)生成器？

工作流程已從第一個(gè)版本開始大量延續(xù)：上傳圖像（或選擇一個(gè)預(yù)設(shè)），并設(shè)置最大和最小分辨率，步長(zhǎng)（以字節(jié)為單位！）和最大資源數(shù)（或者，您可以簡(jiǎn)單地使用我們最及時(shí)的默認(rèn)設(shè)置）。點(diǎn)擊“生成”，瞧！您將直觀地看到結(jié)果圖像的響應(yīng)斷點(diǎn)，一些示例標(biāo)記以及一個(gè)大的“下載圖像”按鈕。

如果您想一次處理多個(gè)圖像怎么辦？如果您要用數(shù)百或數(shù)千（或數(shù)十萬！）圖像來構(gòu)建整個(gè)網(wǎng)站，尤其是當(dāng)您使用用戶生成的內(nèi)容時(shí)，您將不僅需要簡(jiǎn)單的按鈕操作；您將需要完全自動(dòng)化。為此，有Cloudinary的API，您可以使用該API調(diào)用直接為Generator供電的智能裁剪和響應(yīng)圖像斷點(diǎn)功能。使用API，您可以為任何形狀或大小的項(xiàng)目創(chuàng)建自定義，優(yōu)化和全自動(dòng)的響應(yīng)式圖像工作流程。

例如，下面的Ruby代碼會(huì)將圖像上傳到Cloudinary，將其智能裁剪為16：9的寬高比，并生成一組具有合理的響應(yīng)圖像斷點(diǎn)的縮減資源：

最后的想法

但是回到發(fā)電機(jī)。現(xiàn)在，它不僅可以“選擇”圖像斷點(diǎn)，而且還可以選擇藝術(shù)指導(dǎo)的作物。它將為您生成所有乏味的資源和標(biāo)記；上傳一張高分辨率的原始圖片，并獲取所有需要的標(biāo)記和縮減資源，以便在網(wǎng)頁上包含可縮放且以藝術(shù)為導(dǎo)向的圖像。

我是否提到過響應(yīng)式圖像斷點(diǎn)生成器是免費(fèi)的？和開源？旋轉(zhuǎn)一下，請(qǐng)向我們發(fā)送反饋。誰知道呢，也許我們很快就會(huì)再使用版本3！