PluginProbe
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF / trunk
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF vtrunk
2.3.4 2.3.3 2.3.2 2.3.1 2.3.0 2.2.9 2.2.8 trunk 1.10 1.3.3 1.3.4 1.3.5 1.3.5.1 1.3.5.2 1.3.6 1.3.6.1 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.5 All 103 releases
imagify / docs / imagify-product-overview.html

imagify-product-overview.html in Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF trunk, at docs/imagify-product-overview.html

1,435 lines 52.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Imagify — Product Overview</title>
7 <link rel="preconnect" href="https://fonts.googleapis.com" />
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
10 <style>
11 /* ─── Reset & Base ─────────────────────────────────────────────────── */
12 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
13
14 :root {
15 --blue: #2B67F6;
16 --blue-light: #5B8BF9;
17 --blue-dim: #e8effe;
18 --green: #1DB954;
19 --green-dim: #e6f8ed;
20 --navy: #1a1a2e;
21 --navy-mid: #16213e;
22 --navy-soft: #0f3460;
23 --text: #1e2235;
24 --text-mid: #4b5568;
25 --text-light: #718096;
26 --border: #e2e8f0;
27 --bg: #f7f9fc;
28 --white: #ffffff;
29 --radius: 12px;
30 --radius-lg: 20px;
31 --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
32 --shadow-md: 0 4px 20px rgba(0,0,0,.08);
33 --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
34 }
35
36 html { scroll-behavior: smooth; }
37
38 body {
39 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
40 font-size: 16px;
41 line-height: 1.65;
42 color: var(--text);
43 background: var(--bg);
44 }
45
46 /* ─── Typography ────────────────────────────────────────────────────── */
47 h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
48
49 h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
50 h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy); }
51 h3 { font-size: 1.2rem; color: var(--navy); }
52 h4 { font-size: 1rem; color: var(--navy); }
53
54 p { color: var(--text-mid); }
55
56 a { color: var(--blue); text-decoration: none; }
57 a:hover { text-decoration: underline; }
58
59 /* ─── Layout Helpers ────────────────────────────────────────────────── */
60 .container {
61 max-width: 1140px;
62 margin: 0 auto;
63 padding: 0 24px;
64 }
65
66 section { padding: 80px 0; }
67
68 .section-label {
69 display: inline-block;
70 font-size: .75rem;
71 font-weight: 600;
72 letter-spacing: .1em;
73 text-transform: uppercase;
74 color: var(--blue);
75 background: var(--blue-dim);
76 padding: 4px 12px;
77 border-radius: 100px;
78 margin-bottom: 12px;
79 }
80
81 .section-intro { max-width: 640px; }
82 .section-intro p { font-size: 1.1rem; margin-top: 10px; }
83
84 /* ─── Sticky Header ─────────────────────────────────────────────────── */
85 header {
86 position: sticky;
87 top: 0;
88 z-index: 100;
89 background: rgba(26, 26, 46, .96);
90 backdrop-filter: blur(8px);
91 border-bottom: 1px solid rgba(255,255,255,.06);
92 }
93
94 .header-inner {
95 display: flex;
96 align-items: center;
97 justify-content: space-between;
98 padding: 14px 24px;
99 max-width: 1140px;
100 margin: 0 auto;
101 }
102
103 .header-logo {
104 display: flex;
105 align-items: center;
106 gap: 10px;
107 color: var(--white);
108 font-weight: 700;
109 font-size: 1.1rem;
110 }
111
112 .logo-mark {
113 width: 32px; height: 32px;
114 background: linear-gradient(135deg, var(--blue), var(--blue-light));
115 border-radius: 8px;
116 display: flex; align-items: center; justify-content: center;
117 font-size: 1rem;
118 }
119
120 .header-badge {
121 font-size: .72rem;
122 font-weight: 600;
123 color: rgba(255,255,255,.55);
124 border: 1px solid rgba(255,255,255,.15);
125 padding: 3px 10px;
126 border-radius: 100px;
127 }
128
129 nav { display: flex; gap: 6px; }
130
131 nav a {
132 color: rgba(255,255,255,.65);
133 font-size: .85rem;
134 font-weight: 500;
135 padding: 6px 12px;
136 border-radius: 6px;
137 transition: color .2s, background .2s;
138 }
139
140 nav a:hover {
141 color: var(--white);
142 background: rgba(255,255,255,.08);
143 text-decoration: none;
144 }
145
146 /* ─── Hero ──────────────────────────────────────────────────────────── */
147 .hero {
148 background: linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 55%, #0d2257 100%);
149 padding: 100px 0 90px;
150 position: relative;
151 overflow: hidden;
152 }
153
154 .hero::before {
155 content: '';
156 position: absolute;
157 top: -120px; right: -120px;
158 width: 500px; height: 500px;
159 background: radial-gradient(circle, rgba(43,103,246,.25) 0%, transparent 70%);
160 pointer-events: none;
161 }
162
163 .hero::after {
164 content: '';
165 position: absolute;
166 bottom: -80px; left: 10%;
167 width: 360px; height: 360px;
168 background: radial-gradient(circle, rgba(29,185,84,.12) 0%, transparent 70%);
169 pointer-events: none;
170 }
171
172 .hero-content { position: relative; z-index: 1; }
173
174 .hero-eyebrow {
175 display: inline-flex;
176 align-items: center;
177 gap: 8px;
178 background: rgba(43,103,246,.18);
179 border: 1px solid rgba(43,103,246,.35);
180 color: var(--blue-light);
181 font-size: .8rem;
182 font-weight: 600;
183 letter-spacing: .06em;
184 text-transform: uppercase;
185 padding: 5px 14px;
186 border-radius: 100px;
187 margin-bottom: 24px;
188 }
189
190 .hero h1 {
191 color: var(--white);
192 margin-bottom: 18px;
193 }
194
195 .hero h1 span { color: var(--blue-light); }
196
197 .hero-subtitle {
198 font-size: clamp(1.05rem, 2vw, 1.25rem);
199 color: rgba(255,255,255,.7);
200 max-width: 580px;
201 margin-bottom: 48px;
202 }
203
204 .hero-benefits {
205 display: flex;
206 flex-wrap: wrap;
207 gap: 14px;
208 }
209
210 .hero-benefit {
211 display: flex;
212 align-items: center;
213 gap: 8px;
214 background: rgba(255,255,255,.06);
215 border: 1px solid rgba(255,255,255,.1);
216 color: rgba(255,255,255,.85);
217 font-size: .9rem;
218 font-weight: 500;
219 padding: 10px 18px;
220 border-radius: 100px;
221 }
222
223 .hero-benefit .icon { font-size: 1rem; }
224
225 /* ─── Stats Bar ─────────────────────────────────────────────────────── */
226 .stats-bar {
227 background: var(--white);
228 border-bottom: 1px solid var(--border);
229 padding: 0;
230 }
231
232 .stats-inner {
233 display: grid;
234 grid-template-columns: repeat(4, 1fr);
235 max-width: 1140px;
236 margin: 0 auto;
237 }
238
239 .stat-item {
240 padding: 28px 24px;
241 text-align: center;
242 border-right: 1px solid var(--border);
243 }
244
245 .stat-item:last-child { border-right: none; }
246
247 .stat-number {
248 font-size: 2rem;
249 font-weight: 800;
250 color: var(--navy);
251 line-height: 1;
252 }
253
254 .stat-number span { color: var(--blue); }
255
256 .stat-label {
257 font-size: .82rem;
258 color: var(--text-light);
259 margin-top: 4px;
260 }
261
262 /* ─── Positioning ───────────────────────────────────────────────────── */
263 .positioning { background: var(--white); }
264
265 .positioning-grid {
266 display: grid;
267 grid-template-columns: 1fr 1fr;
268 gap: 64px;
269 align-items: start;
270 margin-top: 48px;
271 }
272
273 .positioning-lead {
274 font-size: 1.15rem;
275 color: var(--text);
276 line-height: 1.7;
277 margin-bottom: 20px;
278 }
279
280 .audience-cards {
281 display: flex;
282 flex-direction: column;
283 gap: 14px;
284 }
285
286 .audience-card {
287 display: flex;
288 align-items: flex-start;
289 gap: 14px;
290 padding: 18px 20px;
291 background: var(--bg);
292 border: 1px solid var(--border);
293 border-radius: var(--radius);
294 }
295
296 .audience-card .a-icon {
297 font-size: 1.5rem;
298 line-height: 1;
299 flex-shrink: 0;
300 margin-top: 2px;
301 }
302
303 .audience-card h4 { margin-bottom: 4px; }
304 .audience-card p { font-size: .9rem; }
305
306 /* ─── Problem-Solution callout ──────────────────────────────────────── */
307 .problem-callout {
308 background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
309 border-radius: var(--radius-lg);
310 padding: 40px 48px;
311 color: var(--white);
312 }
313
314 .problem-callout h3 { color: var(--white); font-size: 1.3rem; margin-bottom: 16px; }
315
316 .pain-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
317
318 .pain-list li {
319 display: flex;
320 align-items: flex-start;
321 gap: 10px;
322 font-size: .95rem;
323 color: rgba(255,255,255,.8);
324 }
325
326 .pain-list li::before {
327 content: '⚠️';
328 font-size: .85rem;
329 flex-shrink: 0;
330 margin-top: 2px;
331 }
332
333 /* ─── Feature Cards ─────────────────────────────────────────────────── */
334 .features { background: var(--bg); }
335
336 .features-grid {
337 display: grid;
338 grid-template-columns: repeat(3, 1fr);
339 gap: 20px;
340 margin-top: 48px;
341 }
342
343 .feature-card {
344 background: var(--white);
345 border: 1px solid var(--border);
346 border-radius: var(--radius-lg);
347 padding: 28px;
348 transition: box-shadow .25s, transform .25s;
349 }
350
351 .feature-card:hover {
352 box-shadow: var(--shadow-md);
353 transform: translateY(-2px);
354 }
355
356 .feature-card.highlight {
357 border-color: var(--blue);
358 box-shadow: 0 0 0 1px var(--blue), var(--shadow-sm);
359 }
360
361 .feature-icon {
362 font-size: 2rem;
363 line-height: 1;
364 margin-bottom: 16px;
365 display: block;
366 }
367
368 .feature-card h3 { margin-bottom: 8px; }
369
370 .feature-card p { font-size: .92rem; }
371
372 .feature-tag {
373 display: inline-block;
374 margin-top: 14px;
375 font-size: .72rem;
376 font-weight: 600;
377 text-transform: uppercase;
378 letter-spacing: .07em;
379 padding: 3px 10px;
380 border-radius: 100px;
381 background: var(--green-dim);
382 color: #157a3a;
383 }
384
385 .feature-tag.blue {
386 background: var(--blue-dim);
387 color: #1540a8;
388 }
389
390 /* ─── Compression Levels ────────────────────────────────────────────── */
391 .compression { background: var(--white); }
392
393 .levels-grid {
394 display: grid;
395 grid-template-columns: repeat(3, 1fr);
396 gap: 20px;
397 margin-top: 48px;
398 }
399
400 .level-card {
401 border-radius: var(--radius-lg);
402 padding: 32px 28px;
403 position: relative;
404 overflow: hidden;
405 }
406
407 .level-card.normal { background: #f0faf4; border: 2px solid #a7e3be; }
408 .level-card.aggressive { background: #fff8e8; border: 2px solid #f5d98a; }
409 .level-card.ultra { background: var(--blue-dim); border: 2px solid #9ab8fb; }
410
411 .level-card .level-icon {
412 font-size: 2.4rem;
413 display: block;
414 margin-bottom: 14px;
415 }
416
417 .level-card h3 { font-size: 1.3rem; margin-bottom: 6px; }
418
419 .level-card .level-desc { font-size: .92rem; color: var(--text-mid); margin-bottom: 16px; }
420
421 .level-badge {
422 display: inline-block;
423 font-size: .78rem;
424 font-weight: 700;
425 padding: 4px 12px;
426 border-radius: 100px;
427 }
428
429 .normal .level-badge { background: #1DB954; color: var(--white); }
430 .aggressive .level-badge { background: #e5a800; color: var(--white); }
431 .ultra .level-badge { background: var(--blue); color: var(--white); }
432
433 .savings-bar {
434 margin-top: 18px;
435 height: 6px;
436 background: rgba(0,0,0,.08);
437 border-radius: 100px;
438 overflow: hidden;
439 }
440
441 .savings-fill {
442 height: 100%;
443 border-radius: 100px;
444 }
445
446 .normal .savings-fill { width: 50%; background: var(--green); }
447 .aggressive .savings-fill { width: 70%; background: #e5a800; }
448 .ultra .savings-fill { width: 85%; background: var(--blue); }
449
450 .savings-label { font-size: .78rem; color: var(--text-light); margin-top: 6px; }
451
452 /* ─── Formats ───────────────────────────────────────────────────────── */
453 .formats { background: var(--bg); }
454
455 .formats-grid {
456 display: grid;
457 grid-template-columns: 1fr 1fr;
458 gap: 32px;
459 margin-top: 48px;
460 }
461
462 .format-card {
463 background: var(--white);
464 border: 1px solid var(--border);
465 border-radius: var(--radius-lg);
466 padding: 32px;
467 }
468
469 .format-card .fmt-icon { font-size: 2.2rem; display: block; margin-bottom: 14px; }
470
471 .format-card h3 { margin-bottom: 8px; }
472
473 .fmt-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
474
475 .fmt-badge {
476 font-size: .75rem;
477 font-weight: 600;
478 padding: 3px 10px;
479 border-radius: 6px;
480 background: var(--bg);
481 border: 1px solid var(--border);
482 color: var(--text-mid);
483 }
484
485 .delivery-grid {
486 display: grid;
487 grid-template-columns: 1fr 1fr;
488 gap: 20px;
489 margin-top: 32px;
490 }
491
492 .delivery-card {
493 padding: 24px;
494 border-radius: var(--radius);
495 border: 1px solid var(--border);
496 background: var(--bg);
497 }
498
499 .delivery-card h4 { margin-bottom: 8px; }
500 .delivery-card p { font-size: .88rem; }
501
502 .delivery-card .d-icon { font-size: 1.6rem; display: block; margin-bottom: 10px; }
503
504 /* ─── Contexts ──────────────────────────────────────────────────────── */
505 .contexts { background: var(--white); }
506
507 .contexts-grid {
508 display: grid;
509 grid-template-columns: repeat(3, 1fr);
510 gap: 20px;
511 margin-top: 48px;
512 }
513
514 .context-card {
515 background: var(--bg);
516 border: 1px solid var(--border);
517 border-radius: var(--radius-lg);
518 padding: 32px 28px;
519 text-align: center;
520 }
521
522 .context-card .ctx-icon { font-size: 2.8rem; display: block; margin-bottom: 16px; }
523
524 .context-card h3 { margin-bottom: 10px; }
525
526 .ctx-use-case {
527 display: inline-block;
528 margin-top: 16px;
529 font-size: .78rem;
530 font-weight: 600;
531 color: var(--blue);
532 background: var(--blue-dim);
533 padding: 4px 12px;
534 border-radius: 100px;
535 }
536
537 /* ─── Automation ────────────────────────────────────────────────────── */
538 .automation { background: var(--bg); }
539
540 .auto-grid {
541 display: grid;
542 grid-template-columns: 1fr 1fr;
543 gap: 48px;
544 align-items: start;
545 margin-top: 48px;
546 }
547
548 .auto-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
549
550 .auto-list li {
551 display: flex;
552 align-items: flex-start;
553 gap: 16px;
554 background: var(--white);
555 border: 1px solid var(--border);
556 border-radius: var(--radius);
557 padding: 18px 20px;
558 }
559
560 .auto-list li .al-icon {
561 font-size: 1.4rem;
562 flex-shrink: 0;
563 }
564
565 .auto-list li h4 { margin-bottom: 3px; }
566 .auto-list li p { font-size: .88rem; }
567
568 .cli-callout {
569 background: var(--navy);
570 border-radius: var(--radius-lg);
571 padding: 36px;
572 color: var(--white);
573 }
574
575 .cli-callout h3 { color: var(--white); margin-bottom: 12px; }
576 .cli-callout p { color: rgba(255,255,255,.72); font-size: .95rem; margin-bottom: 20px; }
577
578 .cli-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
579
580 .cli-features li {
581 display: flex;
582 align-items: center;
583 gap: 10px;
584 color: rgba(255,255,255,.8);
585 font-size: .9rem;
586 }
587
588 .cli-features li::before {
589 content: '›';
590 color: var(--blue-light);
591 font-weight: 700;
592 font-size: 1.1rem;
593 }
594
595 /* ─── Plans ─────────────────────────────────────────────────────────── */
596 .plans { background: var(--white); }
597
598 .plans-grid {
599 display: grid;
600 grid-template-columns: repeat(3, 1fr);
601 gap: 24px;
602 margin-top: 48px;
603 }
604
605 .plan-card {
606 border: 2px solid var(--border);
607 border-radius: var(--radius-lg);
608 padding: 32px 28px;
609 display: flex;
610 flex-direction: column;
611 gap: 16px;
612 }
613
614 .plan-card.popular {
615 border-color: var(--blue);
616 box-shadow: 0 0 0 1px var(--blue), var(--shadow-lg);
617 position: relative;
618 }
619
620 .popular-badge {
621 position: absolute;
622 top: -13px;
623 left: 50%;
624 transform: translateX(-50%);
625 background: var(--blue);
626 color: var(--white);
627 font-size: .72rem;
628 font-weight: 700;
629 letter-spacing: .06em;
630 text-transform: uppercase;
631 padding: 4px 14px;
632 border-radius: 100px;
633 }
634
635 .plan-icon { font-size: 2rem; }
636
637 .plan-name { font-size: 1.3rem; font-weight: 700; color: var(--navy); }
638
639 .plan-quota {
640 font-size: 1.8rem;
641 font-weight: 800;
642 color: var(--navy);
643 line-height: 1;
644 }
645
646 .plan-quota span { font-size: 1rem; font-weight: 500; color: var(--text-light); }
647
648 .plan-features { list-style: none; display: flex; flex-direction: column; gap: 8px; }
649
650 .plan-features li {
651 display: flex;
652 align-items: flex-start;
653 gap: 8px;
654 font-size: .9rem;
655 color: var(--text-mid);
656 }
657
658 .plan-features li::before {
659 content: '✓';
660 color: var(--green);
661 font-weight: 700;
662 flex-shrink: 0;
663 }
664
665 .quota-note {
666 margin-top: 40px;
667 background: var(--blue-dim);
668 border: 1px solid #c0d4fd;
669 border-radius: var(--radius);
670 padding: 20px 24px;
671 display: flex;
672 align-items: flex-start;
673 gap: 14px;
674 }
675
676 .quota-note .qn-icon { font-size: 1.4rem; flex-shrink: 0; }
677
678 .quota-note p { font-size: .9rem; color: #1540a8; }
679
680 /* ─── Integrations ──────────────────────────────────────────────────── */
681 .integrations { background: var(--bg); }
682
683 .int-grid {
684 display: grid;
685 grid-template-columns: 1fr 1fr 1fr;
686 gap: 20px;
687 margin-top: 48px;
688 }
689
690 .int-group {
691 background: var(--white);
692 border: 1px solid var(--border);
693 border-radius: var(--radius-lg);
694 padding: 28px;
695 }
696
697 .int-group h3 { font-size: 1rem; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
698
699 .int-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
700
701 .int-list li {
702 display: flex;
703 align-items: center;
704 gap: 8px;
705 font-size: .9rem;
706 color: var(--text-mid);
707 }
708
709 .int-list li::before {
710 content: '';
711 width: 6px;
712 height: 6px;
713 border-radius: 50%;
714 background: var(--blue);
715 flex-shrink: 0;
716 }
717
718 .multisite-banner {
719 margin-top: 32px;
720 background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
721 border-radius: var(--radius-lg);
722 padding: 32px 40px;
723 display: flex;
724 align-items: center;
725 gap: 24px;
726 color: var(--white);
727 }
728
729 .multisite-banner .ms-icon { font-size: 2.8rem; flex-shrink: 0; }
730
731 .multisite-banner h3 { color: var(--white); margin-bottom: 6px; }
732
733 .multisite-banner p { color: rgba(255,255,255,.75); font-size: .95rem; }
734
735 /* ─── Admin UX ──────────────────────────────────────────────────────── */
736 .admin { background: var(--white); }
737
738 .admin-grid {
739 display: grid;
740 grid-template-columns: repeat(2, 1fr);
741 gap: 20px;
742 margin-top: 48px;
743 }
744
745 .admin-card {
746 background: var(--bg);
747 border: 1px solid var(--border);
748 border-radius: var(--radius-lg);
749 padding: 28px;
750 display: flex;
751 align-items: flex-start;
752 gap: 18px;
753 }
754
755 .admin-card .ac-icon {
756 font-size: 2rem;
757 flex-shrink: 0;
758 width: 52px;
759 height: 52px;
760 background: var(--white);
761 border: 1px solid var(--border);
762 border-radius: 12px;
763 display: flex;
764 align-items: center;
765 justify-content: center;
766 }
767
768 .admin-card h3 { margin-bottom: 6px; }
769 .admin-card p { font-size: .9rem; }
770
771 /* ─── Developer ─────────────────────────────────────────────────────── */
772 .developer { background: var(--navy); color: var(--white); }
773
774 .developer .section-label {
775 background: rgba(43,103,246,.25);
776 color: var(--blue-light);
777 }
778
779 .developer h2 { color: var(--white); }
780
781 .developer .section-intro p { color: rgba(255,255,255,.7); }
782
783 .dev-cards {
784 display: grid;
785 grid-template-columns: repeat(3, 1fr);
786 gap: 20px;
787 margin-top: 48px;
788 }
789
790 .dev-card {
791 background: rgba(255,255,255,.05);
792 border: 1px solid rgba(255,255,255,.1);
793 border-radius: var(--radius-lg);
794 padding: 28px;
795 }
796
797 .dev-card .dc-icon { font-size: 1.8rem; display: block; margin-bottom: 14px; }
798
799 .dev-card h3 { color: var(--white); font-size: 1.05rem; margin-bottom: 8px; }
800
801 .dev-card p { color: rgba(255,255,255,.65); font-size: .9rem; }
802
803 /* ─── Footer ────────────────────────────────────────────────────────── */
804 footer {
805 background: #0e0e1c;
806 padding: 48px 0;
807 text-align: center;
808 color: rgba(255,255,255,.4);
809 font-size: .85rem;
810 }
811
812 footer strong { color: rgba(255,255,255,.65); }
813
814 /* ─── Callout boxes ─────────────────────────────────────────────────── */
815 .callout {
816 display: flex;
817 align-items: flex-start;
818 gap: 14px;
819 background: var(--green-dim);
820 border: 1px solid #a3d9b8;
821 border-radius: var(--radius);
822 padding: 18px 22px;
823 margin-top: 28px;
824 }
825
826 .callout .cl-icon { font-size: 1.3rem; flex-shrink: 0; }
827
828 .callout p { font-size: .92rem; color: #145c30; }
829
830 /* ─── Responsive ────────────────────────────────────────────────────── */
831 @media (max-width: 900px) {
832 .stats-inner { grid-template-columns: repeat(2, 1fr); }
833 .stat-item:nth-child(2) { border-right: none; }
834 .positioning-grid { grid-template-columns: 1fr; gap: 40px; }
835 .features-grid { grid-template-columns: 1fr 1fr; }
836 .levels-grid { grid-template-columns: 1fr; }
837 .formats-grid { grid-template-columns: 1fr; }
838 .delivery-grid { grid-template-columns: 1fr; }
839 .contexts-grid { grid-template-columns: 1fr; }
840 .auto-grid { grid-template-columns: 1fr; }
841 .plans-grid { grid-template-columns: 1fr; }
842 .int-grid { grid-template-columns: 1fr; }
843 .admin-grid { grid-template-columns: 1fr; }
844 .dev-cards { grid-template-columns: 1fr; }
845 nav { display: none; }
846 }
847
848 @media (max-width: 600px) {
849 section { padding: 56px 0; }
850 .hero { padding: 70px 0 60px; }
851 .features-grid { grid-template-columns: 1fr; }
852 .stats-inner { grid-template-columns: repeat(2, 1fr); }
853 .problem-callout { padding: 28px 24px; }
854 .multisite-banner { flex-direction: column; padding: 28px 24px; }
855 }
856 </style>
857 </head>
858 <body>
859
860 <!-- ─── Sticky Header ──────────────────────────────────────────────────── -->
861 <header>
862 <div class="header-inner">
863 <div class="header-logo">
864 <div class="logo-mark">⚡</div>
865 Imagify
866 </div>
867 <nav>
868 <a href="#positioning">Overview</a>
869 <a href="#features">Features</a>
870 <a href="#compression">Compression</a>
871 <a href="#formats">Formats</a>
872 <a href="#contexts">Contexts</a>
873 <a href="#plans">Plans</a>
874 <a href="#integrations">Integrations</a>
875 </nav>
876 <span class="header-badge">v 2.2.8</span>
877 </div>
878 </header>
879
880 <!-- ─── Hero ──────────────────────────────────────────────────────────── -->
881 <section class="hero">
882 <div class="container hero-content">
883 <div class="hero-eyebrow">
884 <span>⚡</span> WordPress Image Optimization
885 </div>
886 <h1>Imagify —<br /><span>Product Overview</span></h1>
887 <p class="hero-subtitle">The complete image optimization solution for WordPress — faster pages, better Core Web Vitals, and lower bandwidth costs, all from a single plugin.</p>
888 <div class="hero-benefits">
889 <div class="hero-benefit"><span class="icon">🚀</span> Faster Page Loads</div>
890 <div class="hero-benefit"><span class="icon">📊</span> Better Core Web Vitals</div>
891 <div class="hero-benefit"><span class="icon">🔍</span> Improved SEO Rankings</div>
892 <div class="hero-benefit"><span class="icon">💸</span> Lower Bandwidth Costs</div>
893 <div class="hero-benefit"><span class="icon">🔄</span> Zero Configuration Needed</div>
894 </div>
895 </div>
896 </section>
897
898 <!-- ─── Stats Bar ──────────────────────────────────────────────────────── -->
899 <div class="stats-bar">
900 <div class="stats-inner">
901 <div class="stat-item">
902 <div class="stat-number"><span>80</span>%</div>
903 <div class="stat-label">Average file size reduction</div>
904 </div>
905 <div class="stat-item">
906 <div class="stat-number"><span>3</span></div>
907 <div class="stat-label">Compression quality levels</div>
908 </div>
909 <div class="stat-item">
910 <div class="stat-number"><span>3</span></div>
911 <div class="stat-label">Optimization contexts</div>
912 </div>
913 <div class="stat-item">
914 <div class="stat-number"><span>∞</span></div>
915 <div class="stat-label">Images on the Infinite plan</div>
916 </div>
917 </div>
918 </div>
919
920 <!-- ─── Positioning ────────────────────────────────────────────────────── -->
921 <section class="positioning" id="positioning">
922 <div class="container">
923 <div class="section-intro">
924 <span class="section-label">Product Positioning</span>
925 <h2>What is Imagify?</h2>
926 <p>Imagify is a WordPress plugin that automatically compresses, converts, and delivers images in the optimal format and size — so site owners get fast-loading pages without any manual effort.</p>
927 </div>
928
929 <div class="positioning-grid">
930 <div>
931 <p class="positioning-lead">Images are the single largest contributor to page weight on most WordPress sites. Unoptimized images slow down pages, hurt Google Search rankings, drain server bandwidth, and frustrate visitors — especially on mobile. Imagify eliminates all of that with a one-time setup.</p>
932 <p class="positioning-lead">Once installed, every image uploaded to WordPress is automatically compressed and converted. Existing libraries can be processed in bulk. The result is a site that loads faster, scores higher on Core Web Vitals, and costs less to run — without the site owner touching a single file manually.</p>
933
934 <div class="callout">
935 <span class="cl-icon">💡</span>
936 <p><strong>Core Web Vitals impact:</strong> Google's ranking signals include Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) — both heavily influenced by image size and format. Imagify directly improves both metrics.</p>
937 </div>
938 </div>
939
940 <div>
941 <div class="problem-callout">
942 <h3>⚠️ The Problem Imagify Solves</h3>
943 <ul class="pain-list">
944 <li>Images account for 50–75% of a typical page's total byte weight</li>
945 <li>Unoptimized uploads silently degrade performance over time</li>
946 <li>Next-gen formats (WebP, AVIF) require complex server configuration without a plugin</li>
947 <li>Manual image editing is time-consuming and inconsistent across teams</li>
948 <li>Large original images consume unnecessary storage and bandwidth</li>
949 <li>Poor Core Web Vitals scores directly suppress Google Search rankings</li>
950 </ul>
951 </div>
952
953 <div style="margin-top: 24px;">
954 <h3 style="margin-bottom: 16px; color: var(--navy);">Who is it for?</h3>
955 <div class="audience-cards">
956 <div class="audience-card">
957 <span class="a-icon">🛒</span>
958 <div>
959 <h4>eCommerce stores</h4>
960 <p>Product images need to be sharp and fast. Slow product pages lose conversions.</p>
961 </div>
962 </div>
963 <div class="audience-card">
964 <span class="a-icon">📸</span>
965 <div>
966 <h4>Photographers & creatives</h4>
967 <p>High-resolution portfolios and galleries delivered at optimal size without visible quality loss.</p>
968 </div>
969 </div>
970 <div class="audience-card">
971 <span class="a-icon">✍️</span>
972 <div>
973 <h4>Content publishers & agencies</h4>
974 <p>Teams uploading hundreds of images need fire-and-forget automation, not manual workflows.</p>
975 </div>
976 </div>
977 <div class="audience-card">
978 <span class="a-icon">🏢</span>
979 <div>
980 <h4>Enterprise & multisite networks</h4>
981 <p>Centralized optimization policy across dozens of sites, with CLI and cron support for DevOps teams.</p>
982 </div>
983 </div>
984 </div>
985 </div>
986 </div>
987 </div>
988 </div>
989 </section>
990
991 <!-- ─── Core Features ──────────────────────────────────────────────────── -->
992 <section class="features" id="features">
993 <div class="container">
994 <div class="section-intro">
995 <span class="section-label">Core Features</span>
996 <h2>Everything you need, nothing you don't</h2>
997 <p>Imagify covers the full image optimization lifecycle — from upload to delivery — with smart automation at every step.</p>
998 </div>
999
1000 <div class="features-grid">
1001 <div class="feature-card highlight">
1002 <span class="feature-icon">⚡</span>
1003 <h3>Auto-Optimize on Upload</h3>
1004 <p>The moment an image is added to the WordPress Media Library, Imagify compresses and converts it automatically. Zero friction, zero extra steps for content editors.</p>
1005 <span class="feature-tag">Zero Configuration</span>
1006 </div>
1007
1008 <div class="feature-card">
1009 <span class="feature-icon">🗜️</span>
1010 <h3>Smart Image Compression</h3>
1011 <p>Three quality levels — Normal, Aggressive, and Ultra — let site owners choose the right balance between visual quality and file size. Save up to 80% on file size.</p>
1012 <span class="feature-tag blue">Up to 80% Savings</span>
1013 </div>
1014
1015 <div class="feature-card">
1016 <span class="feature-icon">🔄</span>
1017 <h3>Backup &amp; One-Click Restore</h3>
1018 <p>Original images are always preserved in a secure backup. Restore any image — or the entire library — to its original state with a single click, no data loss risk.</p>
1019 <span class="feature-tag">Non-Destructive</span>
1020 </div>
1021
1022 <div class="feature-card">
1023 <span class="feature-icon">🖼️</span>
1024 <h3>WebP &amp; AVIF Conversion</h3>
1025 <p>Next-gen formats are automatically served to browsers that support them, with transparent fallback to JPEG/PNG for older environments. No manual configuration required.</p>
1026 <span class="feature-tag blue">Automatic Fallback</span>
1027 </div>
1028
1029 <div class="feature-card">
1030 <span class="feature-icon">📦</span>
1031 <h3>Bulk Optimization</h3>
1032 <p>Process an entire existing media library in one go. Ideal for sites migrating to Imagify or cleaning up years of unoptimized uploads. Runs in the background without downtime.</p>
1033 <span class="feature-tag">Background Processing</span>
1034 </div>
1035
1036 <div class="feature-card">
1037 <span class="feature-icon">📐</span>
1038 <h3>Large Image Resizing</h3>
1039 <p>Enforce maximum dimensions on upload to prevent oversized originals from ever reaching the server. A 6000px wide photo becomes 2000px before it's even stored.</p>
1040 <span class="feature-tag blue">Automatic Resize</span>
1041 </div>
1042 </div>
1043 </div>
1044 </section>
1045
1046 <!-- ─── Compression Levels ─────────────────────────────────────────────── -->
1047 <section class="compression" id="compression">
1048 <div class="container">
1049 <div class="section-intro">
1050 <span class="section-label">Compression Levels</span>
1051 <h2>Three levels for every use case</h2>
1052 <p>Different sites have different priorities. Imagify gives site owners explicit control over the quality-versus-size trade-off.</p>
1053 </div>
1054
1055 <div class="levels-grid">
1056 <div class="level-card normal">
1057 <span class="level-icon">🟢</span>
1058 <h3>Normal</h3>
1059 <p class="level-desc">Balanced compression that preserves visual fidelity. The right choice for portfolios, editorial photography, and any context where image quality is paramount. Compression is nearly invisible to the human eye.</p>
1060 <span class="level-badge">Recommended for most sites</span>
1061 <div class="savings-bar"><div class="savings-fill"></div></div>
1062 <div class="savings-label">Typical savings: 30–50%</div>
1063 </div>
1064
1065 <div class="level-card aggressive">
1066 <span class="level-icon">🟡</span>
1067 <h3>Aggressive</h3>
1068 <p class="level-desc">Stronger compression that pushes file size down significantly while keeping the image presentable. Well suited to news sites, blogs, and product thumbnails where bandwidth efficiency outweighs perfect fidelity.</p>
1069 <span class="level-badge">Best for high-volume content</span>
1070 <div class="savings-bar"><div class="savings-fill"></div></div>
1071 <div class="savings-label">Typical savings: 50–70%</div>
1072 </div>
1073
1074 <div class="level-card ultra">
1075 <span class="level-icon">🔵</span>
1076 <h3>Ultra</h3>
1077 <p class="level-desc">Maximum compression powered by the Imagify API's advanced processing pipeline. Extracts every last byte from the file. Ideal for landing pages, ads, and any context where loading speed is the top priority.</p>
1078 <span class="level-badge">Maximum performance</span>
1079 <div class="savings-bar"><div class="savings-fill"></div></div>
1080 <div class="savings-label">Typical savings: 60–80%</div>
1081 </div>
1082 </div>
1083 </div>
1084 </section>
1085
1086 <!-- ─── Formats & Delivery ─────────────────────────────────────────────── -->
1087 <section class="formats" id="formats">
1088 <div class="container">
1089 <div class="section-intro">
1090 <span class="section-label">Next-Gen Formats &amp; Delivery</span>
1091 <h2>Serve the right format to every browser, automatically</h2>
1092 <p>Imagify converts images to modern formats and handles browser compatibility transparently — site owners never need to think about it.</p>
1093 </div>
1094
1095 <div class="formats-grid">
1096 <div class="format-card">
1097 <span class="fmt-icon">🌐</span>
1098 <h3>WebP — Universal Support</h3>
1099 <p>WebP is now supported by all modern browsers and delivers 25–35% smaller files than JPEG at equivalent quality. Imagify generates WebP versions automatically alongside every uploaded image.</p>
1100 <div class="fmt-badges">
1101 <span class="fmt-badge">Chrome</span>
1102 <span class="fmt-badge">Firefox</span>
1103 <span class="fmt-badge">Safari 14+</span>
1104 <span class="fmt-badge">Edge</span>
1105 <span class="fmt-badge">iOS 14+</span>
1106 </div>
1107 </div>
1108
1109 <div class="format-card">
1110 <span class="fmt-icon">✨</span>
1111 <h3>AVIF — Next-Generation Compression</h3>
1112 <p>AVIF achieves 50% smaller files than JPEG with superior quality, using the latest codec technology. Imagify generates AVIF where browser support allows, with automatic fallback to WebP or the original format.</p>
1113 <div class="fmt-badges">
1114 <span class="fmt-badge">Chrome 85+</span>
1115 <span class="fmt-badge">Firefox 93+</span>
1116 <span class="fmt-badge">Safari 16+</span>
1117 <span class="fmt-badge">Edge 121+</span>
1118 </div>
1119 </div>
1120 </div>
1121
1122 <h3 style="margin-top: 48px; margin-bottom: 8px; color: var(--navy);">Two delivery methods — choose what fits your stack</h3>
1123 <p style="color: var(--text-mid); max-width: 600px; margin-bottom: 4px;">How Imagify serves the converted image to the visitor's browser depends on the delivery method selected in the settings.</p>
1124
1125 <div class="delivery-grid">
1126 <div class="delivery-card">
1127 <span class="d-icon">🏷️</span>
1128 <h4>HTML Picture Tag</h4>
1129 <p>Imagify rewrites image markup to use the HTML <code style="font-size:.85em; background:var(--bg); padding:1px 5px; border-radius:4px;">&lt;picture&gt;</code> element with multiple format sources. Works on any host, no server configuration required. The browser picks the best format it supports.</p>
1130 </div>
1131
1132 <div class="delivery-card">
1133 <span class="d-icon">🔀</span>
1134 <h4>Server-Level Rewrite</h4>
1135 <p>Imagify adds rewrite rules at the web server level (Apache/Nginx). The HTML stays untouched — the server transparently substitutes the WebP or AVIF file when the browser signals support. Faster and cleaner, ideal for performance-first stacks.</p>
1136 </div>
1137 </div>
1138 </div>
1139 </section>
1140
1141 <!-- ─── Optimization Contexts ─────────────────────────────────────────── -->
1142 <section class="contexts" id="contexts">
1143 <div class="container">
1144 <div class="section-intro">
1145 <span class="section-label">Optimization Contexts</span>
1146 <h2>Optimize images wherever they live</h2>
1147 <p>Imagify is not limited to the WordPress Media Library. Images stored anywhere on the server — in themes, plugins, or gallery plugins — can all be optimized.</p>
1148 </div>
1149
1150 <div class="contexts-grid">
1151 <div class="context-card">
1152 <span class="ctx-icon">🗂️</span>
1153 <h3>WordPress Media Library</h3>
1154 <p>The primary use case. Every image uploaded through WordPress — whether via the block editor, the classic uploader, or WooCommerce — is automatically optimized. Per-image controls appear directly in the media grid.</p>
1155 <span class="ctx-use-case">Automatic &amp; bulk optimization</span>
1156 </div>
1157
1158 <div class="context-card">
1159 <span class="ctx-icon">📁</span>
1160 <h3>Custom Folders</h3>
1161 <p>Any directory on the server can be registered as an optimization context — theme asset folders, plugin image directories, or client upload folders outside of WordPress. Imagify scans, tracks, and optimizes them all.</p>
1162 <span class="ctx-use-case">Theme &amp; plugin assets</span>
1163 </div>
1164
1165 <div class="context-card">
1166 <span class="ctx-icon">🖼️</span>
1167 <h3>NextGEN Gallery</h3>
1168 <p>Deep integration with the popular NextGEN Gallery plugin. Images managed inside NextGEN Gallery albums and galleries can be optimized directly through the Imagify interface, without switching between screens.</p>
1169 <span class="ctx-use-case">Photographers &amp; gallery sites</span>
1170 </div>
1171 </div>
1172 </div>
1173 </section>
1174
1175 <!-- ─── Automation & CLI ───────────────────────────────────────────────── -->
1176 <section class="automation" id="automation">
1177 <div class="container">
1178 <div class="section-intro">
1179 <span class="section-label">Automation &amp; CLI</span>
1180 <h2>Built for teams and automated workflows</h2>
1181 <p>Imagify fits naturally into modern WordPress development and DevOps workflows — from hands-off auto-optimization to scriptable CLI commands.</p>
1182 </div>
1183
1184 <div class="auto-grid">
1185 <ul class="auto-list">
1186 <li>
1187 <span class="al-icon">🤖</span>
1188 <div>
1189 <h4>Auto-Optimize on Upload</h4>
1190 <p>Images are processed the moment they land in the Media Library. Content editors never need to remember to run optimization — it simply happens.</p>
1191 </div>
1192 </li>
1193 <li>
1194 <span class="al-icon">⏰</span>
1195 <div>
1196 <h4>Scheduled Background Jobs</h4>
1197 <p>Imagify uses WordPress cron to run optimization tasks in the background, ensuring no impact on the front-end experience during bulk processing.</p>
1198 </div>
1199 </li>
1200 <li>
1201 <span class="al-icon">📊</span>
1202 <div>
1203 <h4>Bulk Processing Dashboard</h4>
1204 <p>A dedicated dashboard lets admins kick off a full-library optimization run and monitor progress in real time, with the ability to pause and resume.</p>
1205 </div>
1206 </li>
1207 <li>
1208 <span class="al-icon">♻️</span>
1209 <div>
1210 <h4>Bulk Restore</h4>
1211 <p>Restore the entire media library to original files in one operation — useful when switching compression levels or migrating to a new plan tier.</p>
1212 </div>
1213 </li>
1214 </ul>
1215
1216 <div class="cli-callout">
1217 <h3>⌨️ WP-CLI Support</h3>
1218 <p>Imagify ships a full suite of WP-CLI commands, enabling DevOps teams to integrate image optimization into deployment scripts, staging pipelines, and CI/CD workflows — no browser required.</p>
1219 <ul class="cli-features">
1220 <li>Bulk optimize the entire media library from the command line</li>
1221 <li>Bulk restore all images to their originals — essential for staging resets</li>
1222 <li>Optimize or restore individual images by ID</li>
1223 <li>Check optimization status and quota consumption programmatically</li>
1224 <li>Ideal for post-deployment automation and scheduled server-side jobs</li>
1225 </ul>
1226 </div>
1227 </div>
1228 </div>
1229 </section>
1230
1231 <!-- ─── Plans & Quota ──────────────────────────────────────────────────── -->
1232 <section class="plans" id="plans">
1233 <div class="container">
1234 <div class="section-intro">
1235 <span class="section-label">Subscription &amp; Quota</span>
1236 <h2>A plan for every site size</h2>
1237 <p>Imagify uses a quota model tied to the amount of data optimized per month. Quota resets monthly, and sites can upgrade at any time.</p>
1238 </div>
1239
1240 <div class="plans-grid">
1241 <div class="plan-card">
1242 <div class="plan-icon">🆓</div>
1243 <div class="plan-name">Free</div>
1244 <div class="plan-quota">20 MB <span>/ month</span></div>
1245 <ul class="plan-features">
1246 <li>All three compression levels</li>
1247 <li>WebP &amp; AVIF conversion</li>
1248 <li>Auto-optimize on upload</li>
1249 <li>Backup &amp; restore</li>
1250 <li>Monthly quota reset</li>
1251 <li>Suitable for small personal sites</li>
1252 </ul>
1253 </div>
1254
1255 <div class="plan-card popular" style="position:relative;">
1256 <div class="popular-badge">Most Popular</div>
1257 <div class="plan-icon">📈</div>
1258 <div class="plan-name">Growth</div>
1259 <div class="plan-quota">Larger quota <span>/ month</span></div>
1260 <ul class="plan-features">
1261 <li>All Free features included</li>
1262 <li>Significantly higher monthly quota</li>
1263 <li>Purchasable extra byte packs when quota runs low</li>
1264 <li>Priority API processing</li>
1265 <li>Ideal for active blogs and eCommerce stores</li>
1266 <li>Monthly quota reset cycle</li>
1267 </ul>
1268 </div>
1269
1270 <div class="plan-card">
1271 <div class="plan-icon">♾️</div>
1272 <div class="plan-name">Infinite</div>
1273 <div class="plan-quota">Unlimited</div>
1274 <ul class="plan-features">
1275 <li>All Growth features included</li>
1276 <li>No monthly quota cap whatsoever</li>
1277 <li>Optimize as many images as needed</li>
1278 <li>Best for high-volume publishers and agencies</li>
1279 <li>No overage charges, ever</li>
1280 <li>One flat subscription price</li>
1281 </ul>
1282 </div>
1283 </div>
1284
1285 <div class="quota-note">
1286 <span class="qn-icon">ℹ️</span>
1287 <p><strong>How quota works:</strong> Imagify tracks the total byte size of images sent to the API for optimization. Quota resets on the first day of each billing month. On the Growth plan, additional byte packs can be purchased at any time if the monthly allowance is exhausted before the reset date. Quota consumption is visible in the plugin dashboard at all times.</p>
1288 </div>
1289 </div>
1290 </section>
1291
1292 <!-- ─── Integrations ───────────────────────────────────────────────────── -->
1293 <section class="integrations" id="integrations">
1294 <div class="container">
1295 <div class="section-intro">
1296 <span class="section-label">Compatibility &amp; Integrations</span>
1297 <h2>Works with the tools your site already uses</h2>
1298 <p>Imagify is built to coexist gracefully with the WordPress ecosystem — from page builders and SEO plugins to major managed hosting providers.</p>
1299 </div>
1300
1301 <div class="int-grid">
1302 <div class="int-group">
1303 <h3>🔌 Plugin Integrations</h3>
1304 <ul class="int-list">
1305 <li>WooCommerce — product &amp; gallery images</li>
1306 <li>WP Rocket — joint performance optimization</li>
1307 <li>Gravity Forms — form attachment images</li>
1308 <li>Yoast SEO — optimized Open Graph images</li>
1309 <li>AMP — compliant image delivery on AMP pages</li>
1310 <li>NextGEN Gallery — full gallery management</li>
1311 </ul>
1312 </div>
1313
1314 <div class="int-group">
1315 <h3>☁️ Hosting Compatibility</h3>
1316 <ul class="int-list">
1317 <li>WordPress.com (Business &amp; Commerce)</li>
1318 <li>WP Engine</li>
1319 <li>SiteGround</li>
1320 <li>Kinsta</li>
1321 <li>Cloudways</li>
1322 <li>Flywheel &amp; other managed hosts</li>
1323 </ul>
1324 </div>
1325
1326 <div class="int-group">
1327 <h3>🛠️ WordPress Core</h3>
1328 <ul class="int-list">
1329 <li>WordPress Multisite networks</li>
1330 <li>Block editor (Gutenberg)</li>
1331 <li>Classic editor</li>
1332 <li>REST API compatible</li>
1333 <li>WP-CLI integration</li>
1334 <li>WordPress Cron system</li>
1335 </ul>
1336 </div>
1337 </div>
1338
1339 <div class="multisite-banner">
1340 <span class="ms-icon">🏗️</span>
1341 <div>
1342 <h3>WordPress Multisite — Full Network Support</h3>
1343 <p>Imagify supports WordPress Multisite out of the box. Network administrators can manage a single API key and settings across the entire network, while individual site admins retain per-site configuration control. Quota is shared across the network, giving enterprises a single consolidated view of usage.</p>
1344 </div>
1345 </div>
1346 </div>
1347 </section>
1348
1349 <!-- ─── Admin Experience ───────────────────────────────────────────────── -->
1350 <section class="admin" id="admin">
1351 <div class="container">
1352 <div class="section-intro">
1353 <span class="section-label">Admin Experience</span>
1354 <h2>Designed for site owners, not just developers</h2>
1355 <p>Every interaction in the Imagify admin interface is optimized for clarity and speed. Optimization tasks that used to require a developer now take a single click.</p>
1356 </div>
1357
1358 <div class="admin-grid">
1359 <div class="admin-card">
1360 <div class="ac-icon">🗂️</div>
1361 <div>
1362 <h3>Per-Image Controls in the Media Library</h3>
1363 <p>Each image in the WordPress Media Library shows its current optimization status, compression level, space saved, and quick-action buttons — all without leaving the media screen. No need to navigate to a separate settings page.</p>
1364 </div>
1365 </div>
1366
1367 <div class="admin-card">
1368 <div class="ac-icon">📦</div>
1369 <div>
1370 <h3>Bulk Optimization Dashboard</h3>
1371 <p>A dedicated bulk optimization screen shows a summary of the entire library — how many images are optimized, how many remain, and the total space saved to date. A single button starts a full-library run, with real-time progress feedback.</p>
1372 </div>
1373 </div>
1374
1375 <div class="admin-card">
1376 <div class="ac-icon">⚡</div>
1377 <div>
1378 <h3>Admin Bar Quick Access</h3>
1379 <p>An Imagify shortcut in the WordPress admin bar gives site administrators instant access to the bulk optimization screen and quota status from any page of the dashboard — no hunting through menus.</p>
1380 </div>
1381 </div>
1382
1383 <div class="admin-card">
1384 <div class="ac-icon">🔧</div>
1385 <div>
1386 <h3>One-Click Reset Internal State</h3>
1387 <p>A troubleshooting tool in the plugin settings allows the plugin's internal database state to be reset with a single click — resolving stuck optimization queues and edge-case inconsistencies without the need to deactivate or reinstall the plugin.</p>
1388 </div>
1389 </div>
1390 </div>
1391 </div>
1392 </section>
1393
1394 <!-- ─── Developer Extensibility ───────────────────────────────────────── -->
1395 <section class="developer" id="developer">
1396 <div class="container">
1397 <div class="section-intro">
1398 <span class="section-label">Developer Extensibility</span>
1399 <h2>Built to be extended</h2>
1400 <p>Imagify exposes a rich set of extension points for technical partners, agencies, and developers who need to tailor optimization behavior to their specific use cases.</p>
1401 </div>
1402
1403 <div class="dev-cards">
1404 <div class="dev-card">
1405 <span class="dc-icon">🪝</span>
1406 <h3>Action &amp; Filter Hooks</h3>
1407 <p>Imagify fires WordPress actions and provides filters at every major stage of the optimization lifecycle — before and after optimization, on quota changes, on format conversion, and more. Developers can intercept and modify behavior without patching core code.</p>
1408 </div>
1409
1410 <div class="dev-card">
1411 <span class="dc-icon">📂</span>
1412 <h3>Custom Optimization Contexts</h3>
1413 <p>The context system is open to extension. Technical partners can register entirely custom optimization contexts — pointing Imagify at any directory, data source, or image pipeline — and have those contexts managed and tracked alongside the built-in ones.</p>
1414 </div>
1415
1416 <div class="dev-card">
1417 <span class="dc-icon">🤝</span>
1418 <h3>Partner Integrations</h3>
1419 <p>Agencies and hosting providers can build on top of Imagify's extension points to create white-label experiences, automate optimization as part of site provisioning workflows, or surface optimization data inside their own admin interfaces.</p>
1420 </div>
1421 </div>
1422 </div>
1423 </section>
1424
1425 <!-- ─── Footer ────────────────────────────────────────────────────────── -->
1426 <footer>
1427 <div class="container">
1428 <p><strong>Imagify</strong> — Version 2.2.8 &nbsp;·&nbsp; Product Overview Document &nbsp;·&nbsp; For internal use</p>
1429 <p style="margin-top: 8px;">© WP Media &nbsp;·&nbsp; <a href="https://imagify.io" style="color: rgba(255,255,255,.45);">imagify.io</a></p>
1430 </div>
1431 </footer>
1432
1433 </body>
1434 </html>
1435