在學(xué)校的網(wǎng)站維護(hù)工作中有一個(gè)特別容易讓人頭疼的交接場(chǎng)景教務(wù)處老師發(fā)來一批Word文檔里面有教案、有試卷分析、還有各類通知希望能掛到新做的校務(wù)系統(tǒng)網(wǎng)站里。光看正文還好麻煩的是文檔里那些圖片——截圖、掃描圖、公式、示意圖到了WordPress后臺(tái)要么顯示不出來要么位置全部錯(cuò)亂要么干脆上傳失敗。這個(gè)問題在教育行業(yè)特別普遍因?yàn)閃ord文檔幾乎是學(xué)校行政和教學(xué)的核心文件格式而WordPress作為CMS系統(tǒng)對(duì)Word文檔里的圖片處理邏輯完全是另一套體系。本文就圍繞這個(gè)場(chǎng)景拆解Word圖片格式兼容問題的根源、可行的處理路線、以及我在實(shí)際項(xiàng)目中踩過的坑和最終采用的方案給正在做校務(wù)系統(tǒng)、校園網(wǎng)站、教師內(nèi)容管理平臺(tái)的同行一個(gè)參考。1. 問題根源教育行業(yè)的內(nèi)容生產(chǎn)習(xí)慣與Web端圖片機(jī)制的沖突1.1 老師們的Word文檔到底長(zhǎng)什么樣教育行業(yè)的Word文檔跟互聯(lián)網(wǎng)公司里的Markdown文檔、飛書文檔完全是兩個(gè)物種。如果抽樣檢查學(xué)校電腦里的文檔你會(huì)看到大量這樣的文件教案、教學(xué)設(shè)計(jì)、教學(xué)反思、試卷分析、家長(zhǎng)會(huì)發(fā)言稿、課題申報(bào)書、論文、各類總結(jié)報(bào)告。這些文檔的共同特點(diǎn)是排版靠手動(dòng)空格和回車圖片靠截圖粘貼格式靠Word自帶的樣式庫公式有時(shí)用MathType有時(shí)用Word自帶的公式編輯器偶爾還嵌套著老舊的文本框和藝術(shù)字。圖片來源更是五花八門。最常見的三種第一種是直接截圖老師用微信截圖、QQ截圖、或者鍵盤PrintScreen鍵把課件、試卷、網(wǎng)頁內(nèi)容截下來粘貼進(jìn)文檔這類圖片大多是PNG格式第二種是從其他文檔或網(wǎng)頁里復(fù)制內(nèi)容連圖帶文一起粘進(jìn)來圖片可能帶鏈接、帶邊框、甚至帶一堆內(nèi)聯(lián)樣式第三種是掃描件和拍照件用于試卷、手寫教案、通知紅頭文件這類通常是JPG但清晰度參差不齊。這些圖片在Word里顯示的沒問題跟它們?cè)赪ordPress里的能否正常顯示是兩回事。很多老師眼里這就是一張圖而實(shí)際上在Word文檔內(nèi)部圖片可能是嵌入對(duì)象、浮動(dòng)框架、鏈接文件、OLE對(duì)象、甚至是Word自己的繪圖畫布。這些差異直接決定了上傳到WordPress后能不能正常展示。1.2 WordPress不認(rèn)識(shí)的圖片類型清單WordPress的媒體庫和圖片處理管線從設(shè)計(jì)之初就是圍繞Web圖片格式做的。媒體庫默認(rèn)允許上傳的圖片類型是jpg、jpeg、png、gif、webp可能還包括ico、bmp但有一個(gè)前提服務(wù)器的GD庫或者Imagick擴(kuò)展要支持處理這些格式。問題恰恰出在Word文檔里的其他圖片形態(tài)上。我見過不少朋友在校務(wù)系統(tǒng)上線初期遇到詭異現(xiàn)象圖片傳上去是空白、傳上去顯示文件包含損壞的內(nèi)容、或者干脆上傳按鈕直接報(bào)錯(cuò)。最后排查下來源頭十有八九是WMF和EMF這兩個(gè)格式。這兩個(gè)是Windows下的矢量圖元文件格式老版Word、剪貼板復(fù)制圖表、MathType公式、以及一些從老教材配套光盤里復(fù)制來的圖片都會(huì)以這種格式潛伏在docx里。但WordPress的安全策略和PHP的上傳白名單里通常沒有這兩個(gè)擴(kuò)展名即使強(qiáng)行改了后綴傳上去Web瀏覽器也不認(rèn)。再說BMP雖然WordPress在某些配置下允許上傳但一張幾MB的BMP會(huì)直接拖垮網(wǎng)頁加載速度還會(huì)在生成縮略圖時(shí)消耗大量服務(wù)器資源。教育系統(tǒng)里經(jīng)常有老教師用Word 2003時(shí)代流傳下來的文檔里面插著BMP圖片的情況非常常見。1.3 常見誤區(qū)以為只是重新上傳一遍就行這里必須先打破一個(gè)幻覺很多人以為Word圖片兼容問題就是把Word里的圖片一張張另存出來再傳進(jìn)WordPress媒體庫然后手動(dòng)插回文章。這個(gè)思路理論上沒錯(cuò)但實(shí)際操作時(shí)你會(huì)發(fā)現(xiàn)幾個(gè)殘酷的現(xiàn)實(shí)。第一Word里的圖片不是一張圖那么簡(jiǎn)單。你從Word里右鍵另存圖片得到的可能是裁剪后的部分、可能是被壓縮過的低清版本、也可能根本不是原圖而是OLE對(duì)象的預(yù)覽圖。第二圖片在Word中的位置是相對(duì)于段落和頁面的另存出來再手動(dòng)插回Web編輯器原來的圖文關(guān)系全部失效重新排列的工作量堪比重新排版。第三批量處理的時(shí)候一個(gè)老師的電腦里可能有幾百份歷史文檔每份有十幾張圖手動(dòng)處理完全不現(xiàn)實(shí)。所以處理Word圖片格式兼容核心不是在WordPress端做圖片管理而是要在Word文檔遷移到Web的路徑上做一次系統(tǒng)性的格式轉(zhuǎn)換和圖片提取。理解了這個(gè)前提后面的技術(shù)方案才有討論的意義。2. 先搞懂Word圖片的格式家族兼容問題才好解2.1 位圖JPG、PNG、GIF、BMP問題相對(duì)小位圖是純潔的平面像素圖也是WordPress最喜歡的正常圖片。JPG用于照片和掃描件PNG用于截圖和透明底圖GIF用于簡(jiǎn)單動(dòng)畫BMP是老古董。這一類圖片只要從Word里提取出來經(jīng)過壓縮和格式轉(zhuǎn)換上傳到WordPress基本沒有兼容問題。唯一的坑在于Word本身會(huì)對(duì)插入的圖片做壓縮如果老師插入原圖時(shí)勾選了壓縮圖片選項(xiàng)或者文檔保存時(shí)選擇了Web/屏幕輸出那么文檔里嵌入的已經(jīng)是低分辨率版本你再怎么提取也拿不回原始高清圖。這一點(diǎn)在教學(xué)設(shè)計(jì)大賽投稿、試卷掃描存檔這類場(chǎng)景里特別要命因?yàn)閳D片的清晰度直接決定評(píng)委或者家長(zhǎng)能不能看清內(nèi)容。另外從Word里復(fù)制內(nèi)容時(shí)剪貼板里的圖片經(jīng)常是PNG格式但分辨率會(huì)跟隨Word的顯示縮放導(dǎo)致導(dǎo)出的PNG寬度可能只有幾百像素。處理這類圖片要提前設(shè)置好目標(biāo)寬度不能盲目放大。2.2 矢量與元文件WMF、EMFWordPress的默認(rèn)黑名單WMFWindows Metafile是Windows早期的16位矢量圖元文件EMF是它的32位升級(jí)版。這兩個(gè)格式在很多老Word文檔里非常常見尤其是從舊版Office、老教材配套光盤、化學(xué)結(jié)構(gòu)繪圖軟件、MathType公式編輯器里帶出來的內(nèi)容。為什么WordPress處理不了這兩類一是PHP的getimagesize函數(shù)和GD庫對(duì)WMF/EMF支持不佳無法讀取寬高信息媒體庫會(huì)直接判定為無效圖片二是瀏覽器端根本不渲染這兩種格式即使上傳成功訪客看到的也是破圖三是這類文件可能包含可執(zhí)行指針代碼存在安全風(fēng)險(xiǎn)WordPress社區(qū)和各大安全插件都會(huì)把這些格式列入黑名單。處理WMF/EMF的正確姿勢(shì)是在服務(wù)器端用LibreOffice或ImageMagick轉(zhuǎn)成PNG再導(dǎo)入媒體庫。轉(zhuǎn)出來的PNG是按Word中的實(shí)際顯示尺寸和DPI渲染的清晰度一般夠用。但要注意轉(zhuǎn)出來的PNG背景可能是黑色或透明這取決于原圖是否帶背景填充實(shí)際操作時(shí)需要加白底處理。2.3 隱形圖片OLE對(duì)象、公式、文本框、鏈接圖片這一部分是最容易忽略的隱形圖片。OLE對(duì)象是Windows的復(fù)合文檔技術(shù)Word里的嵌入Excel表格、嵌入PPT頁、嵌入Visio圖、MathType公式本質(zhì)都是OLE對(duì)象。Word在界面里顯示的是對(duì)象的外觀快照但那不是真正的圖片文件。處理OLE對(duì)象常見的辦法有兩種一種是用目標(biāo)軟件打開OLE對(duì)象再導(dǎo)出為圖片比如MathType公式可以用MathType自帶的導(dǎo)出功能轉(zhuǎn)成PNG或LaTeX另一種是用Pandoc這類工具在轉(zhuǎn)換文檔格式時(shí)將部分OLE對(duì)象轉(zhuǎn)換成圖片或MathML/LaTeX。實(shí)際操作里教育文檔最常見的OLE對(duì)象就是公式我放在后面單獨(dú)說。文本框是另一個(gè)高頻隱性問題。Word里的文本框在docx文件結(jié)構(gòu)里是獨(dú)立的繪圖元素文本框里可以放文字、圖片、表格。有些老師喜歡用文本框做標(biāo)題、做卡片式排版但Web端的圖片渲染完全沒有文本框這個(gè)容器概念直接用編輯器轉(zhuǎn)換時(shí)文本框里的圖片會(huì)脫離容器變成飄在頁面上的孤島位置全亂。鏈接圖片Linked Image相對(duì)少見通常出現(xiàn)在復(fù)制--粘貼--選擇性粘貼--鏈接這種操作之后docx文件里只存了圖片路徑并沒有圖片本體。一旦把Word文件拷貝到另一臺(tái)電腦圖片路徑失效文檔里就剩一個(gè)空框。處理時(shí)要把鏈接圖片在源機(jī)器上解除鏈接再重新嵌入。2.4 用實(shí)際手段查驗(yàn)一個(gè)docx文件里的圖片真相在決定用什么方案處理之前我強(qiáng)烈建議先做一次病理檢查把一個(gè)docx文件當(dāng)zip包拆開看看里面的圖片到底是什么貨色。操作方法很簡(jiǎn)單把docx后綴改成zip解壓后看word/media文件夾所有嵌入的圖片都在這里。這個(gè)文件夾能告訴你很多信息文件后綴是否混雜著emf、wmf、bin后綴圖片的命名是否是image1.png這樣按順序排列media文件夾整體大小和圖片個(gè)數(shù)是否異常有經(jīng)驗(yàn)的還能通過查看word/document.xml文件了解每張圖片的引用方式、裁剪參數(shù)和實(shí)際尺寸。我的習(xí)慣是先在測(cè)試環(huán)境里跑一段腳本把目標(biāo)目錄下所有docx文件解壓統(tǒng)計(jì)media文件夾內(nèi)的圖片格式分布占比。如果emf和wmf占比超過5%說明這批文檔需要專門的矢量化轉(zhuǎn)換流程如果全是png說明主要壓力在壓縮和批量導(dǎo)入如果連bin后綴都有說明里面嵌了OLE對(duì)象需要逐個(gè)打開驗(yàn)證。這個(gè)前置檢查能幫你避免在驗(yàn)證階段才被按個(gè)擊破的窘境。3. 三條遷移路線選錯(cuò)路線后面瘋狂返工3.1 路線一編輯器直接復(fù)制粘貼或插件導(dǎo)入這是最省事、也最容易出問題的路線。把Word文檔內(nèi)容從Word里CtrlC、CtrlV粘貼到WordPress古騰堡編輯器里Gutenberg會(huì)自動(dòng)做一次Word格式轉(zhuǎn)HTML的轉(zhuǎn)換圖片會(huì)以Base64或遠(yuǎn)端地址的形式塞進(jìn)HTML。這樣做會(huì)出現(xiàn)三種情況一是小圖、單圖能正常顯示但位置和樣式靠?jī)?nèi)聯(lián)CSS硬撐后期維護(hù)極其困難二是WMF/EMF圖片直接變成碎圖或者空框三是大文件粘貼后編輯器卡死因?yàn)闉g覽器內(nèi)存里需要同時(shí)維護(hù)Word格式和HTML格式。雖然市面上有Word導(dǎo)入類的插件比如FileCat、WP Word Import它們支持上傳docx并提取內(nèi)容但本質(zhì)上仍是依賴WordPress內(nèi)置的docx轉(zhuǎn)HTML邏輯對(duì)復(fù)雜格式的支持參差不齊。教育場(chǎng)景下這個(gè)路線只適合已經(jīng)做完格式清洗、圖片全部轉(zhuǎn)成PNG/JPG且是常規(guī)排版的文檔。一旦涉及公式、文本框、復(fù)雜目錄這條路基本走不通。不過它有一個(gè)優(yōu)點(diǎn)PHPWord和大部分導(dǎo)入插件不會(huì)執(zhí)行Word文檔內(nèi)的宏代碼安全性可控適合內(nèi)網(wǎng)系統(tǒng)快速發(fā)布。3.2 路線二文檔轉(zhuǎn)換用中間工具統(tǒng)一處理這是我在實(shí)際項(xiàng)目中主力采用的路線。思路是把Word文檔作為源文件先通過中間工具轉(zhuǎn)換為更適合Web的內(nèi)容結(jié)構(gòu)再進(jìn)行發(fā)布。常用的中間格式是HTML或Markdown中間工具首選Pandoc其次LibreOffice命令行再次是Word另存為網(wǎng)頁功能。Pandoc可以讀取docx里的段落、標(biāo)題、圖片說明、表格和公式并自動(dòng)提取圖片到指定文件夾同時(shí)把圖片引用路徑改寫成相對(duì)路徑。這樣你不用逐張手動(dòng)保存圖片轉(zhuǎn)換一次就能得到一份相對(duì)干凈的HTML/Markdown文件和配套圖片文件夾。LibreOffice命令行的作用是弱化版Pandoc它可以無頭模式運(yùn)行適用于批量處理老版.doc也能完成docx轉(zhuǎn)HTML。這條路線適合批量生產(chǎn)流程老師把Word文檔交給系統(tǒng)管理員管理員跑一次Pandoc腳本一份文檔生成一個(gè)文件夾里面是HTML和圖片再在WordPress后臺(tái)把這套內(nèi)容導(dǎo)入或者通過腳本自動(dòng)生成文章。優(yōu)點(diǎn)是可擴(kuò)展、可批處理、可控性強(qiáng)缺點(diǎn)是需要寫腳本和維護(hù)轉(zhuǎn)換規(guī)則有一定技術(shù)門檻。3.3 路線三結(jié)構(gòu)化重構(gòu)把內(nèi)容當(dāng)作數(shù)據(jù)來治理這條路線的核心思想是不轉(zhuǎn)換格式轉(zhuǎn)換生產(chǎn)流程。也就是說不再追求把已有Word文檔變成網(wǎng)頁而是要求老師在建站初期就往WordPress后臺(tái)直接錄入內(nèi)容或統(tǒng)一做一個(gè)帶格式預(yù)設(shè)的投稿模板讓內(nèi)容在Word里寫好、在后臺(tái)用塊編輯器重新排版。這樣做的好處是圖片一開始就以Web格式和相對(duì)布局存在不存在兼容問題內(nèi)容具備結(jié)構(gòu)化語義方便多年沉淀和檢索網(wǎng)站的移動(dòng)端適配、無障礙訪問、SEO優(yōu)化全部受益。缺點(diǎn)是對(duì)老師的要求極高老教師習(xí)慣了Word的二維排版讓他理解Gutenberg的塊模型需要培訓(xùn)成本且歷史存量文檔還是要靠路線一或路線二清一次。教育行業(yè)里新建校務(wù)系統(tǒng)的存量文檔一般不多但新建內(nèi)容的速度極快。我見過很多學(xué)校耗費(fèi)人力做了一次性轉(zhuǎn)換解決了存量問題但新內(nèi)容全部繞開后臺(tái)直接發(fā)Word共享群半年之后網(wǎng)站內(nèi)容又變成半癱瘓狀態(tài)。所以路線三本質(zhì)上不是技術(shù)方案而是一項(xiàng)管理規(guī)范只有跟學(xué)校的信息化考核制度綁定才能真正落地。3.4 教育行業(yè)怎么選結(jié)合存量文檔、維護(hù)人力和公式需求三條路線怎么選我自己的判斷依據(jù)有三條。存量文檔占比如果學(xué)校有大量必須發(fā)布的存量Word文檔比如歷年中考試卷分析、優(yōu)質(zhì)課教案集、課題結(jié)題材料推薦路線二做批處理和轉(zhuǎn)換腳本如果存量少新內(nèi)容為主直接上路線三建站初期就把選題、格式、圖片規(guī)范定下來。維護(hù)人力學(xué)校的技術(shù)崗?fù)挥幸粌蓚€(gè)人還兼職電教、攝影和修電腦。如果負(fù)責(zé)的人對(duì)腳本不熟建議采用路線一加路線二的混合日常簡(jiǎn)單文檔用復(fù)制粘貼復(fù)雜文檔用Pandoc腳本跑腳本我可以免費(fèi)分享在文末。公式需求數(shù)學(xué)、物理、化學(xué)學(xué)科是公式大戶。如果目標(biāo)網(wǎng)站要發(fā)布公式密集的講義和試卷強(qiáng)烈推薦路線二并且要專門設(shè)計(jì)公式轉(zhuǎn)換鏈把MathType和老版Word公式轉(zhuǎn)成MathML或LaTeX再由MathJax渲染。這一塊依賴方案做得好能直接挽救一個(gè)學(xué)校數(shù)學(xué)組的工作效率。4. 基于Pandoc中轉(zhuǎn)的批量處理實(shí)操4.1 環(huán)境準(zhǔn)備與轉(zhuǎn)換Pandoc在各平臺(tái)都有安裝包安裝完成后在終端或者CMD里執(zhí)行轉(zhuǎn)換。教育系統(tǒng)服務(wù)器的操作系統(tǒng)Linux和Windows都有命令基本一致我以Windows環(huán)境和Pandoc 3.1版本為例。pandoc 教案.docx --extract-mediamedia -t markdown -o 教案.md轉(zhuǎn)換后目錄里會(huì)多出一個(gè)media文件夾所有圖片被提取出來。注意Windows環(huán)境下Pandoc保存文件名可能是絕對(duì)路徑格式會(huì)在Markdown里出現(xiàn)類似這樣的引用相對(duì)路徑?jīng)]問題。如果源文件是老版.doc二進(jìn)制格式Pandoc讀不了先統(tǒng)一轉(zhuǎn)成docx。假設(shè)你裝好了LibreOffice用它的無頭模式批量處理soffice --headless --convert-to docx --outdir D:\converted D:\raw\*.docLibreOffice轉(zhuǎn)換老版.doc時(shí)圖片格式和公式可能會(huì)發(fā)生一次劣化尤其是MathType公式。處理這情況的經(jīng)驗(yàn)是先把所有.doc升級(jí)成.docx再用Pandoc轉(zhuǎn)HTML/ Markdown不要希望在LibreOffice一步到位。4.2 圖片提取、重命名、路徑回填Pandoc提取的圖片命名是按順序來的image1.png、image2.png這樣放在media文件夾里。但教育場(chǎng)景下幾十個(gè)文檔的media文件夾混在一起容易出現(xiàn)同名覆蓋最好在轉(zhuǎn)換腳本里給每個(gè)文檔單獨(dú)建目錄或者提取后按文檔名重命名。我實(shí)際用的腳本邏輯是這樣遍歷一個(gè)錄入目錄下的所有 docx 文件為每個(gè)文檔建立輸出子目錄目錄名就是文檔標(biāo)題Pandoc 轉(zhuǎn)換時(shí) --extract-media 指到該文檔自己的子目錄轉(zhuǎn)換完成后用 PowerShell 或 Python 遍歷圖片統(tǒng)一重命名成文檔標(biāo)題_序號(hào)用字符串替換把 Markdown 文件里的舊圖片路徑改成新路徑這樣處理的優(yōu)勢(shì)是后續(xù)上傳到 WordPress 時(shí)不會(huì)因?yàn)橥募?dǎo)致覆蓋。圖片路徑回填還有一個(gè)坑Pandoc生成的HTML里圖片的引用路徑往往帶了media/前綴但Markdown里相對(duì)路徑也可能帶/開頭導(dǎo)致上傳時(shí)排查麻煩。建議在腳本里統(tǒng)一做一次正則替換把路徑中的絕對(duì)盤符和file:///前綴清掉。4.3 用WordPress媒體庫API或腳本導(dǎo)入轉(zhuǎn)換結(jié)束后就面臨把圖片和HTML/Markdown導(dǎo)入WordPress的問題。有兩種常見方式。第一種是直接把Markdown內(nèi)容復(fù)制到后臺(tái)的塊編輯器里手動(dòng)上傳圖片。這種方式適合文檔數(shù)量少的情況。有一個(gè)免費(fèi)插件叫Markdown Content Importer可以直接讀取Markdown文件并創(chuàng)建文章圖片路徑寫成本地路徑后再配合媒體庫導(dǎo)入工具能省下不少人力。第二種方式用WP-CLI或者寫PHP腳本調(diào)WordPress函數(shù)。我寫過一個(gè)簡(jiǎn)單的導(dǎo)入腳本邏輯是讀取一個(gè)文件夾下的HTML/Markdown文件將所有img標(biāo)簽的src指向media文件夾內(nèi)的對(duì)應(yīng)圖片用media_handle_sideload函數(shù)把圖片塞進(jìn)媒體庫拿到新的附件ID然后重置文章正文里的圖片路徑更新到wp_posts表。這樣幾千張圖的大批量導(dǎo)入幾分鐘就能跑完。腳本需要注意的點(diǎn)media_handle_sideload要求服務(wù)器允許寫入uploads目錄上傳過程中如果生成縮略圖失敗要在admin里檢查wp_generate_attachment_metadata的返回值教育網(wǎng)環(huán)境下PHP執(zhí)行超時(shí)是常態(tài)腳本里要設(shè)置set_time_limit(0)并且分批處理。4.4 檢查清單從瀏覽器呈現(xiàn)回查docx差異處理完一批文檔不要著急宣布轉(zhuǎn)換完成先做一次抽查。我的檢查清單如下每張圖片是否能在頁面正常顯示是否出現(xiàn)破圖WMF/EMF轉(zhuǎn)換失敗的高頻癥狀圖片是否被拉伸失真尤其表格類和截圖類圖片容易因?yàn)閷挾茸赃m應(yīng)導(dǎo)致變形圖片是否還在文字的正確位置附近還是全被擠到文檔末尾公式類的圖片是否清晰可讀文字是否有亂碼或缺失表格縮略圖是否完整Web端表格被截?cái)嗟那闆r在試卷分析中很常見頁面加載速度是否異常是否有圖片尺寸過大導(dǎo)致的首屏緩慢這些檢查最好在測(cè)試環(huán)境里做不要在正式校務(wù)系統(tǒng)上做破壞性測(cè)試。如果用了圖片懶加載和CDN檢查一次緩存刷新機(jī)制是否及時(shí)避免老師那邊看到的是舊圖片。5. WordPress側(cè)的二次治理壓縮、響應(yīng)式與懶加載5.1 圖片壓縮的邊界別把表格截圖壓糊Word文檔里的圖片尤其是從????課程軟件、錄屏軟件、智慧教室平臺(tái)導(dǎo)出的截圖往往帶有大量文字和小圖標(biāo)。這類圖片對(duì)壓縮算法非常敏感如果用默認(rèn)的80%質(zhì)量JPEG壓縮很容易出現(xiàn)文字邊緣發(fā)虛、圖標(biāo)鋸齒、顏色斷層。處理這類圖片的原則是有文字截圖的圖片盡量保留PNG格式或者用WebP無損模式照片類和掃描件類用JPEG適當(dāng)壓縮純色為主的圖標(biāo)和圖形用PNG-8或WebP有損模式就夠。實(shí)際運(yùn)維中我會(huì)針對(duì)media文件夾里的圖片按類型分目錄處理而不是統(tǒng)一一個(gè)壓縮參數(shù)。圖片壓縮工具有很多WordPress側(cè)我推薦用Smush或ShortPixel這類插件但它們對(duì)WMF/EMF轉(zhuǎn)換來的PNG不友好因?yàn)樗鼈冎粔嚎s上傳后的圖片。如果是在轉(zhuǎn)換階段就做好尺寸和格式管理導(dǎo)入后再讓插件做無損壓縮能省不少存儲(chǔ)空間。教育網(wǎng)帶寬一般不大幾張幾MB的大圖能直接把校園網(wǎng)里某臺(tái)老服務(wù)器打爆。5.2 srcset與響應(yīng)式實(shí)現(xiàn)WordPress從5.5開始就自動(dòng)為訪問媒體庫的圖片生成多個(gè)尺寸版本并在文章里輸出srcset屬性和sizes屬性。但這有一個(gè)前提文章里的img標(biāo)簽是WordPress自己的wp-image-{id}類名并且是通過媒體庫插入的。如果你走的是Pandoc轉(zhuǎn)換加腳本導(dǎo)入這條路很容易出現(xiàn)一種情況雖然圖片上傳到了媒體庫但文章正文里圖片img標(biāo)簽沒有classwp-image-xxxWordPress就不會(huì)自動(dòng)加上srcset。這種情況下手機(jī)訪問網(wǎng)站時(shí)瀏覽器會(huì)把一張2000px寬的PNG直接按屏幕寬度渲染流量和內(nèi)存都會(huì)飆升校園網(wǎng)和機(jī)房老電腦的體驗(yàn)會(huì)很難受。解決辦法有兩個(gè)。一是寫一個(gè)過濾器函數(shù)掃描文章內(nèi)容把img標(biāo)簽替換成帶srcset的版本二是用插件的圖片懶加載Retina支持功能常見的有WP Rocket、Perfmatters它們能自動(dòng)為圖片生成響應(yīng)式屬性。不管哪種方式都不要忘記在文章內(nèi)容里檢查圖片的實(shí)際顯示寬度避免超大圖片被CSS縮放后依舊加載原尺寸。5.3 加載性能懶加載、格式取舍WebP是否用WordPress 5.5以后默認(rèn)給圖片加了懶加載所以基礎(chǔ)體驗(yàn)有保障。但我在教育行業(yè)部署時(shí)還會(huì)額外做兩件事。第一件是給圖片加漸進(jìn)式加載。學(xué)校機(jī)房和老師家里的老舊電腦網(wǎng)速通常一般如果圖片采用baseline編碼從上到下刷新視覺上會(huì)一直白屏體驗(yàn)極差。在壓縮環(huán)節(jié)就把JPEG轉(zhuǎn)成progressive格式能讓頁面先顯示模糊輪廓再變清晰體感速度快不少。第二件是WebP的取舍。WebP的壓縮率比JPEG和PNG高30%到50%能顯著提升加載速度但教育系統(tǒng)里還有一個(gè)隱藏風(fēng)險(xiǎn)學(xué)校機(jī)房里的老Windows電腦還在用IE11或舊版Edge這類瀏覽器不支持WebP。所以除非你能通過WordPress插件或者服務(wù)器配置實(shí)現(xiàn)支持WebP就給WebP不支持就給JPEG/PNG的降級(jí)方案否則建議先不上WebP保證兼容性優(yōu)先級(jí)高于性能。等學(xué)校機(jī)房瀏覽器版本跟上來再說在學(xué)校里新技術(shù)往往要排在穩(wěn)定可用后面。5.4 圖片命名與SEO、無障礙規(guī)范教育行業(yè)網(wǎng)站經(jīng)常要接受上級(jí)單位的網(wǎng)站普查和評(píng)估圖片Alt屬性、Title屬性都是硬性指標(biāo)。但Word文檔里插入的圖片基本沒有Alt文本轉(zhuǎn)換導(dǎo)入后自然也是空白這會(huì)導(dǎo)致網(wǎng)頁檢查不合格同時(shí)無障礙訪問也無從談起。處理建議是在轉(zhuǎn)換腳本里根據(jù)文檔內(nèi)容上下文為圖片自動(dòng)生成Alt占位符比如教案_第2節(jié)_圖1后續(xù)再人工補(bǔ)充。圖片文件名也盡量用語義化命名不要保留image1.png這種默認(rèn)名。我把這個(gè)邏輯做進(jìn)了自己的導(dǎo)入腳本里識(shí)別Markdown里的圖片引用序號(hào)再結(jié)合文檔標(biāo)題生成一個(gè)可讀的默認(rèn)Alt管理員再花少量時(shí)間補(bǔ)細(xì)節(jié)比一個(gè)一個(gè)手動(dòng)加Alt高效得多。另外圖片的Title、Caption和描述字段可以留空或者簡(jiǎn)填避免和Alt沖突。對(duì)于包含敏感信息的圖片比如學(xué)生成績(jī)、試卷答案還要做好權(quán)限控制別讓帶權(quán)限的圖片被搜索引擎索引或者被未登錄用戶直接訪問這在教育行業(yè)尤其需要注意。6. 教育場(chǎng)景的專項(xiàng)坑位公式、老版doc、掃描件與批注6.1 公式MathType、OMML的轉(zhuǎn)換路徑與兜底方案公式是教育行業(yè)Word文檔里最核心的圖片格式兼容問題沒有之一。數(shù)學(xué)、物理、化學(xué)試卷里的公式要么用MathType輸入要么用Word自帶的公式編輯器OMML格式。這兩類在docx文件結(jié)構(gòu)里的存儲(chǔ)方式完全不一樣。MathType公式在docx里是OLE對(duì)象文件后綴可能是.binWord需要本機(jī)裝有MathType才能真正渲染。Word自帶的公式編輯器則把公式存儲(chǔ)為OMMLOffice Math Markup LanguagePandoc可以將其直接轉(zhuǎn)換為MathML或LaTeX再經(jīng)MathJax在網(wǎng)頁端渲染效果很好。所以我的處理規(guī)則是優(yōu)先推動(dòng)老師用Word自帶公式編輯器而不是MathType。但存量文檔里已經(jīng)用MathType寫了不少公式怎么辦兜底方案是先用MathType自帶的導(dǎo)出功能把文檔里的公式批量轉(zhuǎn)為L(zhǎng)aTeXMathType 6.9以上支持批量導(dǎo)出再在WordPress里用MathJax渲染。或者偷懶一點(diǎn)直接在轉(zhuǎn)換前用LibreOffice打開docx把MathType OLE對(duì)象轉(zhuǎn)換成Word原生公式再用Pandoc轉(zhuǎn)MathML但這個(gè)過程偶爾會(huì)丟失公式的下標(biāo)和粗體信息需要人工抽查。6.2 老版.doc文件先用LibreOffice無頭模式翻新老版.docWord 97-2003里可能會(huì)有大量懸浮圖片、嵌入文本流、文本框Pandoc對(duì)老版.doc支持不足所以必須先翻新成docx。翻新命令上文提過用soffice --convert-to docx。翻新后要注意兩點(diǎn)一是LibreOffice轉(zhuǎn)換.doc時(shí)可能改變圖片路徑和格式最好用專門的doc版本檢查二是生成的docx需要再次檢查公式對(duì)象是否被正確保留很多老Word文檔里的MathType公式在LibreOffice里會(huì)變成圖片而不是保留可編輯結(jié)構(gòu)。教育行業(yè)還有一個(gè)特有場(chǎng)景上級(jí)部門下發(fā)的紅頭文件模板是.doc格式里面的紅頭、紅章、落款都是圖片。轉(zhuǎn)存時(shí)如果圖片被LibreOffice重新采樣紅色印章的顏色會(huì)偏移打印出來有偏差。所以凡是涉及蓋章文件的處理盡量保留原始圖片格式不要輕易走Web轉(zhuǎn)換流程或者過渡性使用高分辨率PNG。6.3 掃描版PDF與圖片型PDFOCR不能省學(xué)校資料里大量存在掃描版PDF比如老試卷、印刷教材、手寫教案、家長(zhǎng)簽名確認(rèn)單。這些PDF本質(zhì)上就是一張張圖片包Pandoc轉(zhuǎn)換這種PDF時(shí)會(huì)直接當(dāng)作圖片處理整篇可能變成一張巨大的JPG。這種文件直接掛到WordPress上對(duì)訪客極其不友好加載慢、看不清、搜索不到內(nèi)容。正確做法是先做OCR把掃描版PDF識(shí)別成可編輯文本再按文本流程轉(zhuǎn)換。教育行業(yè)免費(fèi)的OCR方案千兆梯次下主要有Tesseract和PaddleOCR。Tesseract對(duì)印刷體中文識(shí)別率還行但面對(duì)手寫體和復(fù)雜版式很吃力PaddleOCR的識(shí)別效果更好也能直接輸出Markdown結(jié)構(gòu)。但OCR再強(qiáng)碰到涉密文檔、學(xué)生隱私信息等系統(tǒng)側(cè)一定要有合規(guī)審查流程最好由管理員和老師雙重確認(rèn)再發(fā)布。OCR后生成的Markdown里圖片仍然是原掃描圖但OCR文本可以作為Alt和Description節(jié)點(diǎn)保留文章的檢索價(jià)值和可用性會(huì)天差地別。我自己處理檔案類掃描件時(shí)一定會(huì)把OCR文本作為隱藏層存放在文章自定義字段里既不影響展示又方便后臺(tái)搜索。6.4 批注與修訂發(fā)布前的清理規(guī)則很多老師的Word文檔里帶著批注和修訂痕跡尤其是課題評(píng)審、教案互評(píng)、教研組長(zhǎng)意見這類協(xié)作記錄。如果直接轉(zhuǎn)換批注在Markdown/HTML里顯示成普通文本或者被Pandoc跳過但修訂痕跡可能以各種形式殘留在正文中。發(fā)布前必須做一次內(nèi)容凈化。Word里先接受所有修訂再刪除所有批注或者用Pandoc的--track-changesaccept參數(shù)自動(dòng)接受修訂。還有一類隱藏信息文檔屬性里的作者、單位、創(chuàng)建時(shí)間可能涉及隱私轉(zhuǎn)換后用Python腳本清理docx元數(shù)據(jù)或者導(dǎo)出為HTML時(shí)直接丟棄這些字段。就我看到的情況教育行業(yè)往往最忽視文檔清理。很多學(xué)校網(wǎng)站上線后被訪客在網(wǎng)頁源碼里直接看到老師姓名、個(gè)人電腦用戶名甚至校園網(wǎng)IP信息完全是轉(zhuǎn)換時(shí)沒清理元數(shù)據(jù)導(dǎo)致的。這個(gè)坑不大但補(bǔ)救起來非常被動(dòng)。最后再講一個(gè)小經(jīng)驗(yàn)。在校務(wù)系統(tǒng)里處理Word圖片兼容真的不是裝個(gè)插件就能一勞永逸的事而是要從內(nèi)容生產(chǎn)、轉(zhuǎn)換處理、運(yùn)維規(guī)范三個(gè)層面同時(shí)推進(jìn)。技術(shù)手段上Pandoc加LibreOffice加OCR能覆蓋絕大部分來源的文檔管理手段上建議學(xué)校在信息化制度里明確一條凡是需要發(fā)布到校務(wù)系統(tǒng)的Word文檔原則上優(yōu)先用另存為HTML或Markdown導(dǎo)出再進(jìn)后臺(tái)別讓老師直接從Word復(fù)制粘貼。這兩步配合起來校務(wù)系統(tǒng)的內(nèi)容質(zhì)量和后期維護(hù)壓力會(huì)有質(zhì)的改觀。如果你正在搭建或維護(hù)教育行業(yè)的WordPress站點(diǎn)希望我這篇經(jīng)歷能幫你少踩幾個(gè)坑。