Image Replacer מאפשר לך ללחוץ על כל תמונה בדף אינטרנט ולהחליפה בשלך — על ידי העלאת קובץ מקומי או הדבקת URL של תמונה. ההחלפה מתאימה בדיוק לממדי האלמנט המקורי, ושומרת על פריסת הדף. בדוק כיצד נכסים חדשים נראים בהקשרי ייצור, צור מאקאפים עם תוכן אמיתי, או צלם צילומי מסך עם תמונות מותאמות אישית.
מעצבים ומפתחים נדרשים לעתים קרובות לראות כיצד תמונה חדשה תיראה בפריסה קיימת. האם תמונת ה-hero החדשה תעבוד עם שכבת הטקסט הנוכחית? האם תמונת המוצר החדשה נראית נכון ברשת הכרטיסים הקיימת? האם הלוגו של הלקוח בגודל הנכון לכותרת? בדרך כלל, מענה על שאלות אלה דורש עריכת קוד, החלפת קבצי תמונה, בנייה מחדש ותצוגה מקדימה. Image Replacer הופך זאת לידי. לחץ על התמונה שברצונך לשנות, העלה החלפה או הדבק URL, והתמונה מוחלפת מיד תוך שמירת ממדי האלמנט המקורי והסגנון. הפריסה לא משתנה, אלמנטים שכנים נשארים במקומם, ואתה רואה בדיוק כיצד התמונה החדשה נראית בהקשר הדף האמיתי. כל השינויים אינם הרסניים ומאופסים ברענון הדף.
רחף מעל תמונות בדף כדי לראותן מודגשות. לחץ לבחירת התמונה שברצונך להחליף. הכלי מזהה אלמנטי img, אלמנטי CSS background-image, ואלמנטי picture/source.
גרור ושחרר קובץ תמונה מהמחשב שלך או לחץ לפתיחת בורר קבצים. תומך בפורמטים PNG, JPG, WebP, SVG ו-GIF. הקובץ נטען באופן מקומי — לעולם לא מועלה לשרת כלשהו.
יש לך תמונה המאוחסנת במקום אחר? הדבק את ה-URL והיא מיושמת מיידית. עובד עם כל URL של תמונה נגישה לציבור — Unsplash, Imgur, ה-CDN שלך, S3 buckets, או כל קישור ישיר לתמונה.
תמונת ההחלפה ממלאת את ממדי האלמנט המקורי באמצעות object-fit, כך שפריסת הדף נשארת בדיוק זהה. ללא שינויי פריסה, ללא זרימה מחדש, ללא רשתות שבורות. התמונה החדשה מסתגלת למרחב.
לוח צדדי עוקב אחר כל התמונות שהחלפת בסשן הנוכחי. ראה מקורי לעומת החלפה במבט אחד, ולחץ על כל ערך בהיסטוריה לביטול אותה החלפה ספציפית.
כל ההחלפות קיימות רק בזיכרון הדפדפן. קבצי התמונה ו-HTML בפועל של הדף לעולם אינם משתנים. רענן את הדף כדי לשחזר מיד את כל התמונות המקוריות. בטוח לשימוש בכל אתר.
לצוות שלך שלוש תמונות hero מועמדות לדף הבית. במקום לפרוס כל אחת, פתח את אתר הייצור והחלף את תמונת ה-hero עם כל מועמד. ראה כיצד כל אחת נראית עם שכבת הטקסט האמיתית, סרגל הניווט והתוכן הסובב.
במהלך שיחת לקוח, החלף את תמונות ה-placeholder באתר staging בתמונות המוצר האמיתיות של הלקוח או נכסי המיתוג שלו. הראה להם בדיוק כיצד התוכן שלהם ייראה בעיצוב הסופי — חי, בדפדפן.
צריך צילומי מסך המציגים תוכן אזורי שונה? החלף תמונות מוצר, תמונות צוות, או גרפיקה של תכונות בגרסאות ספציפיות לאזור וצלם צילומי מסך לכל שוק — הכל ללא פריסת builds נפרדים.
חוקר כיצד סגנון איור שונה או גישת צילום אחרת ייראו בדף קיים. החלף תמונות אחת אחת לבנות אב-טיפוס ויזואלי של כיוון העיצוב החדש מבלי לגעת בקוד כלשהו.
החלף JPG בגרסת WebP לאימות ויזואלי שהאיכות מקובלת. או החלף בתמונה ברזולוציה גבוהה יותר לבדיקה שהפריסה מטפלת כהלכה בתמונות 2x. בדוק שינויי פורמט תמונה ויזואלית לפני שמתחייבים להמרות קבצים.
פתח את ה-floating dock של DevSuite Pro ולחץ על אייקון Image Replacer. הכלי מופעל והתמונות בדף הופכות ליעדים לחיצים, מודגשים בריחוף.
לחץ על כל תמונה בדף. תיבת דיאלוג של החלפה מופיעה ומציגה מידע על התמונה הנוכחית (שם קובץ, ממדים, גודל) ואפשרויות להעלאה או הדבקת URL.
גרור ושחרר קובץ מהמחשב שלך, לחץ לעיון, או הדבק URL של תמונה. ההחלפה מיושמת מיידית והתמונה מוחלפת במקום.
ראה כיצד התמונה החדשה נראית בתוך פריסת הדף בפועל. בדוק שהיא עובדת עם שכבות טקסט, מתאימה למיכל כהלכה, ומתאימה לתוכן הסובב.
לחץ על תמונות נוספות כדי להמשיך להחליף. לוח ההיסטוריה הצדדי עוקב אחר כל השינויים. לאחר שסיימת, רענן את הדף לשחזור כל התמונות המקוריות.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
