17 ترفند طلایی برای بهینه سازی عکس ها: وبسایت خود را زیباتر و سریعتر کنید!
تصاویر نقش مهمی در جذابیت و درگیر کردن مخاطب در وبسایت شما ایفا میکنند. اما استفاده بهینه سازی نشده از عکسها میتواند سرعت بارگذاری سایت را به شدت کاهش دهد و تجربه کاربری را تحت تاثیر قرار دهد. در این مقاله، 17 ترفند کاربردی برای بهینه سازی عکسها را به شما معرفی میکنیم تا هم از زیبایی بصری آنها بهرهمند شوید و هم عملکرد وبسایت خود را بهتر کنید.
- ✔️
انتخاب فرمت مناسب:
JPEG برای عکسهای با رنگهای متنوع و PNG برای تصاویر گرافیکی با جزئیات دقیق و شفافیت. - ✔️
کاهش حجم فایل:
از ابزارهای آنلاین یا نرمافزارهای ویرایش عکس برای کاهش حجم تصاویر بدون افت کیفیت استفاده کنید. - ✔️
بهرهگیری از فشردهسازی Lossy و Lossless:
فشردهسازی Lossy حجم فایل را بیشتر کاهش میدهد اما ممکن است کمی از کیفیت کم کند. فشردهسازی Lossless کیفیت را حفظ میکند اما حجم فایل کمتر کاهش مییابد. - ✔️
بهینه سازی تصاویر بندانگشتی (Thumbnails):
بندانگشتیها باید حجم کمی داشته باشند تا سرعت بارگذاری صفحات را افزایش دهند. - ✔️
حذف متادیتای غیرضروری:
اطلاعات اضافی مانند EXIF را که به نمایش عکس مربوط نیستند، حذف کنید. - ✔️
بهرهگیری از CDN (شبکه توزیع محتوا):
CDN عکسهای شما را در سرورهای مختلف در سراسر جهان ذخیره میکند تا کاربران از نزدیکترین سرور به خود به آنها دسترسی داشته باشند. - ✔️
Lazy Loading:
تصاویر را فقط زمانی بارگیری کنید که در دید کاربر قرار میگیرند. این کار باعث کاهش بار اولیه صفحه و افزایش سرعت بارگذاری میشود. - ✔️
بهرهگیری از WebP:
فرمت جدید WebP توسط گوگل توسعه داده شده و حجم تصاویر را به طور قابل توجهی کاهش میدهد در حالی که کیفیت آنها را حفظ میکند. - ✔️
بهینه سازی نام فایل:
از نامهای توصیفی برای فایلهای تصویری خود استفاده کنید (مثلا “گل-رز-قرمز.jpg” به جای “IMG_1234.jpg”). - ✔️
بهرهگیری از تگ Alt:
تگ Alt را برای تمام تصاویر خود اضافه کنید. این تگ به موتورهای جستجو کمک میکند تا محتوای تصویر را درک کنند و برای سئو نیز مهم است. - ✔️
فشرده سازی GZIP:
با فعال کردن فشرده سازی GZIP در سرور خود، میتوانید حجم فایل های تصویری را قبل از ارسال به مرورگر کاربر کاهش دهید. - ✔️
بهرهگیری از CSS Sprites:
برای تصاویر کوچک و آیکون ها از CSS Sprites استفاده کنید تا تعداد درخواست های HTTP را کاهش دهید. - ✔️
انتخاب هاست مناسب:
هاست با کیفیت بالا و سرعت مناسب، تاثیر بسزایی در سرعت بارگذاری تصاویر دارد. - ✔️
بهرهگیری از ابزارهای آنلاین بهینه سازی:
ابزارهای آنلاین متعددی وجود دارند که به شما در بهینه سازی تصاویر کمک می کنند.
با بهرهگیری از این ترفندها میتوانید تصاویر خود را بهینه کنید و سرعت و کارایی وب سایت خود را به میزان قابل توجهی افزایش دهید.
17 ترفند جادویی برای بهینه سازی عکس و افزایش سرعت سایت!
1. انتخاب فرمت فایل مناسب: JPEG, PNG, WebP
فرمت JPEG برای عکسهای رنگی با جزئیات زیاد کاملا مطلوب است و حجم فایل را به شدت کاهش میدهد، اما ممکن است کیفیت تصویر کمی افت کند.PNG برای تصاویر گرافیکی، لوگوها و عکسهایی که نیاز به شفافیت دارند مناسب است.WebP نسل جدید فرمتهای تصویری است که هم کیفیت JPEG را دارد و هم از شفافیت PNG پشتیبانی میکند و حجم فایل را به طور چشمگیری کاهش میدهد.بهرهگیری از WebP میتواند معجزه کند!انتخاب فرمت مناسب بر اساس نوع تصویر، نقش کلیدی در بهینه سازی دارد.اگر عکس شما دارای رنگ های متنوع و پیچیده است، JPEG احتمالا انتخاب بهتری خواهد بود.
اما اگر نیاز به شفافیت دارید یا تصویر شما دارای لبه های تیز و رنگ های محدود است، PNG بهتر است.تست فرمتهای مختلف و مقایسه کیفیت و حجم فایل، بهترین راه برای انتخاب است.WebP را جدی بگیرید.اکثر مرورگرهای مدرن از آن پشتیبانی میکنند و با کمترین افت کیفیت، حجم فایل را به شکل قابل توجهی کاهش میدهد.به ابزارهای آنلاین تبدیل فرمت عکس توجه کنید.بسیاری از آنها به شما اجازه میدهند تنظیمات فشرده سازی را نیز تعیین کنید.بهترین فرمت، فرمتی است که کمترین حجم را با حفظ کیفیت قابل قبول ارائه دهد.
2. فشرده سازی تصاویر: کاهش حجم بدون افت کیفیت (نسبی)
قبل از آپلود هر تصویری، آن را فشرده کنید. ابزارهای آنلاین و آفلاین زیادی برای این کار وجود دارند که با بهرهگیری از الگوریتمهای مختلف، حجم فایل را بدون افت کیفیت محسوس کاهش میدهند. ابزارهایی مانند TinyPNG و ImageOptim (برای مک) مثالهای خوبی هستند. تنظیمات فشرده سازی را به دقت بررسی کنید. هدف شما باید کمترین حجم ممکن با حفظ کیفیت قابل قبول باشد. فشرده سازی Lossy (با کاهش کیفیت) و Lossless (بدون کاهش کیفیت) وجود دارد. برای عکسهای وب، معمولا Lossy قابل قبول است. فشرده سازی تصاویر باید بخشی از فرآیند آپلود عکس شما باشد. از ابزارهایی استفاده کنید که به صورت خودکار تصاویر را هنگام آپلود فشرده میکنند.
3. تغییر اندازه تصاویر: ابعاد مناسب برای وب
تصاویری با ابعاد بسیار بزرگ، حجم زیادی دارند و باعث کندی لود سایت میشوند. قبل از آپلود، اندازه تصاویر را به ابعاد مورد نیاز در وب سایت خود تغییر دهید. نیازی نیست تصویری با ابعاد 4000×3000 پیکسل را در یک آواتار کوچک 100×100 پیکسلی استفاده کنید!از نرمافزارهای ویرایش تصویر مانند Photoshop، GIMP یا ابزارهای آنلاین برای تغییر اندازه تصاویر استفاده کنید. ابعاد تصویر را بر اساس بزرگترین اندازه نمایش آن در سایت تنظیم کنید. نیازی نیست تصویر بزرگتر از آن باشد. به رزولوشن تصویر (DPI) نیز توجه کنید. رزولوشن 72 DPI برای تصاویر وب کافی است. تغییر اندازه تصاویر قبل از فشرده سازی، تاثیر بیشتری در کاهش حجم فایل دارد. به نسبت ابعاد تصویر (aspect ratio) دقت کنید تا تصویر کشیده یا فشرده نشود. برای نمایش تصاویر در اندازههای مختلف در سایت، از تکنیکهای responsive images استفاده کنید (به مورد 10 مراجعه کنید).
4. بهرهگیری از نام فایل مناسب: سئو و دسترسی
نام فایل تصاویر را با کلمات کلیدی مرتبط با محتوای تصویر و صفحه نامگذاری کنید. به جای نامهایی مانند “IMG_1234.jpg”، از نامهایی مانند “کوه-دماوند-ایران.jpg” استفاده کنید. این کار به سئو سایت شما کمک میکند و باعث میشود تصاویر در نتایج جستجو بهتر دیده شوند. 
از خط تیره (-) به جای فاصله ( ) در نام فایل استفاده کنید. نام فایل را با حروف کوچک بنویسید. نام فایل باید توصیفی و مرتبط با محتوای تصویر باشد. از کلمات کلیدی اصلی صفحه در نام فایل استفاده کنید. نام فایل را کوتاه و مختصر نگه دارید. نام فایل را به زبان انگلیسی بنویسید (اگر محتوای سایت به انگلیسی است) یا از transliteration برای تبدیل فارسی به انگلیسی استفاده کنید.
5. متن جایگزین (Alt Text): توضیحات تصویری برای همه
متن جایگزین (Alt Text) توضیحی کوتاه و توصیفی برای تصویر است که در صورت عدم بارگذاری تصویر، به کاربر نمایش داده میشود. در ضمن، موتورهای جستجو از متن جایگزین برای درک محتوای تصویر استفاده میکنند. متن جایگزین باید دقیق، مختصر و مرتبط با محتوای تصویر باشد. متن جایگزین برای افراد دارای معلولیت بینایی نیز بسیار مهم است. از کلمات کلیدی اصلی صفحه در متن جایگزین استفاده کنید. متن جایگزین باید توصیفی باشد، نه فقط فهرستی از کلمات کلیدی. اگر تصویر صرفا جنبه تزیینی دارد، متن جایگزین را خالی بگذارید (alt=””). از تکرار متن جایگزین در تصاویر مختلف خودداری کنید. متن جایگزین را به زبان محتوای صفحه بنویسید.
6. Lazy Loading: بارگذاری تنبل تصاویر
Lazy Loading تکنیکی است که در آن تصاویر فقط زمانی بارگذاری میشوند که در صفحه نمایش کاربر قابل مشاهده باشند. این کار باعث میشود صفحه شما سریعتر لود شود و مصرف پهنای باند کاربر کاهش یابد. Lazy Loading به ویژه برای صفحاتی که تعداد زیادی تصویر دارند بسیار مفید است. از attribute loading=”lazy” در تگ img استفاده کنید. میتوانید از کتابخانههای JavaScript مانند Lozad.js یا vanilla-lazyload برای پیاده سازی Lazy Loading استفاده کنید. به تنظیمات Threshold (فاصله از لبه صفحه نمایش که تصویر باید بارگذاری شود) توجه کنید. Lazy Loading را برای تصاویری که در بالای صفحه قرار دارند غیرفعال کنید تا سریعتر لود شوند. از Placeholder (تصویر یا رنگ جایگزین) برای تصاویری که هنوز بارگذاری نشدهاند استفاده کنید. Lazy Loading تاثیر مثبتی بر امتیاز Pagespeed Insights گوگل دارد.
7. بهرهگیری از CDN: توزیع محتوا در سراسر جهان
CDN (Content Delivery Network) شبکهای از سرورها است که محتوای وب سایت شما را در سراسر جهان توزیع میکند. وقتی کاربری از یک مکان دور به سایت شما دسترسی پیدا میکند، محتوا از نزدیکترین سرور CDN به او تحویل داده میشود. این کار باعث میشود سرعت لود سایت شما به طور چشمگیری افزایش یابد. CDN برای وب سایتهایی که مخاطبان بین المللی دارند بسیار مفید است. سرویسهای CDN مختلفی وجود دارند، از جمله Cloudflare، Akamai، و آمازون CloudFront. برخی از سرویسهای CDN امکان بهینه سازی خودکار تصاویر را نیز ارائه میدهند. بهرهگیری از CDN میتواند هزینههای پهنای باند شما را نیز کاهش دهد. CDN به بهبود امنیت سایت شما نیز کمک میکند. CDN را با سایر تکنیکهای بهینه سازی تصویر ترکیب کنید.
8. کش کردن تصاویر: ذخیره سازی برای دسترسی سریعتر
با تنظیم header های cache در سرور خود، به مرورگر کاربر دستور میدهید که تصاویر را در حافظه پنهان (cache) خود ذخیره کند. این کار باعث میشود در بازدیدهای بعدی کاربر از سایت شما، تصاویر از حافظه پنهان لود شوند و نیازی به دانلود مجدد آنها از سرور نباشد. این کار سرعت لود سایت را به شدت افزایش میدهد. از ابزارهایی مانند .htaccess (در سرورهای Apache) برای تنظیم header های cache استفاده کنید. میتوانید مدت زمان ذخیره سازی (cache expiration) را نیز تعیین کنید. به روز رسانی تصاویر باید با دقت انجام شود تا کاربران همیشه آخرین نسخه را مشاهده کنند. کش کردن تصاویر یکی از مهمترین عوامل در بهبود سرعت لود سایت است. کش کردن تصاویر را با CDN ترکیب کنید تا بهترین نتیجه را بگیرید. به تنظیمات cache مرورگر کاربر نیز توجه کنید.
9. کاهش درخواستهای HTTP: ادغام تصاویر
هر تصویر در وب سایت شما یک درخواست HTTP به سرور ارسال میکند. هر چه تعداد درخواستهای HTTP بیشتر باشد، لود سایت کندتر میشود. برای کاهش تعداد درخواستهای HTTP، میتوانید تصاویر کوچک را در یک تصویر بزرگتر ادغام کنید (CSS Sprites) و سپس با بهرهگیری از CSS، قسمتهای مورد نظر را نمایش دهید. CSS Sprites بیشتر برای آیکونها و تصاویر کوچک استفاده میشود. ابزارهایی برای ساخت CSS Sprites به صورت خودکار وجود دارند. ادغام تصاویر میتواند به کاهش حجم فایل CSS نیز کمک کند. بهرهگیری از CSS Sprites نیاز به کمی دانش CSS دارد. برای تصاویر بزرگ، ادغام آنها توصیه نمیشود. به جای CSS Sprites، بهرهگیری از SVG برای آیکونها میتواند گزینه بهتری باشد (به مورد 16 مراجعه کنید).
10. تصاویر واکنشگرا (Responsive Images): نمایش تصاویر مناسب برای هر دستگاه
تصاویر واکنشگرا به شما امکان میدهند تصاویر مختلفی را بر اساس اندازه صفحه نمایش دستگاه کاربر نمایش دهید. این کار باعث میشود کاربران موبایل تصاویری با حجم کمتر دریافت کنند و سرعت لود سایت در دستگاههای موبایل افزایش یابد. از تگ <picture> و attribute های srcset و sizes در تگ <img> برای پیاده سازی تصاویر واکنشگرا استفاده کنید. با بهرهگیری از Media Queries در CSS، میتوانید تصاویر مختلف را برای دستگاههای مختلف تعریف کنید. به چگالی پیکسلی دستگاه (device pixel ratio) نیز توجه کنید. تصاویر واکنشگرا یکی از مهمترین تکنیکها برای بهینه سازی تصاویر در موبایل هستند. تست تصاویر واکنشگرا در دستگاههای مختلف ضروری است. تصاویر واکنشگرا را با Lazy Loading ترکیب کنید. از ابزارهای تولید تصاویر واکنشگرا برای سهولت کار استفاده کنید.
11. بهرهگیری از SVG برای آیکونها و تصاویر وکتور
SVG (Scalable Vector Graphics) یک فرمت تصویر برداری است که بر اساس XML ساخته شده است. تصاویر SVG میتوانند بدون افت کیفیت بزرگ و کوچک شوند و حجم بسیار کمتری نسبت به تصاویر رستر (مانند JPEG و PNG) دارند. از SVG برای آیکونها، لوگوها و تصاویر گرافیکی که نیاز به مقیاس پذیری دارند استفاده کنید. تصاویر SVG را میتوان با بهرهگیری از CSS استایل دهی کرد. تصاویر SVG در مرورگرهای مدرن به خوبی پشتیبانی میشوند. تصاویر SVG را میتوان به صورت inline در HTML قرار داد. بهرهگیری از SVG به جای فونت آیکونها توصیه میشود. تصاویر SVG را میتوان با بهرهگیری از ابزارهای ویرایش تصویر برداری مانند Adobe Illustrator یا Inkscape ایجاد کرد. تصاویر SVG برای آیکونهای واکنشگرا بسیار مناسب هستند.
12. بهینه سازی تصاویر قبل از آپلود: بهرهگیری از ابزارهای ویرایش تصویر
قبل از آپلود تصاویر، آنها را با بهرهگیری از ابزارهای ویرایش تصویر مانند Photoshop یا GIMP بهینه سازی کنید. تنظیم نور، کنتراست، وضوح و رنگها میتواند باعث بهبود کیفیت تصاویر و کاهش حجم آنها شود. توجه داشته باشید شما میتوانید از ابزارهای ویرایش تصویر برای حذف اطلاعات غیرضروری از فایل تصویر (مانند metadata) استفاده کنید. به تنظیمات Color Profile توجه کنید. sRGB استاندارد مناسبی برای تصاویر وب است. از فیلترهای sharpen برای بهبود وضوح تصاویر استفاده کنید (به میزان کم). به histogram تصویر توجه کنید تا از نوردهی مناسب مطمئن شوید. تنظیمات ویرایش تصویر را به صورت غیر مخرب (non-destructive) انجام دهید تا بتوانید در صورت نیاز به تنظیمات قبلی بازگردید. قبل از آپلود، یک نسخه پشتیبان از فایل اصلی تصویر تهیه کنید. ابزارهای ویرایش تصویر به شما امکان کنترل بیشتری بر کیفیت و حجم تصاویر میدهند.
13. غیرفعال کردن Hotlinking: جلوگیری از دزدی پهنای باند
Hotlinking زمانی اتفاق میافتد که وب سایتهای دیگر تصاویر شما را مستقیماً از سرور شما بارگذاری میکنند. این کار باعث میشود پهنای باند شما مصرف شود و سرعت لود سایت شما کاهش یابد. برای جلوگیری از Hotlinking، میتوانید تنظیماتی را در سرور خود انجام دهید تا فقط وب سایت شما اجازه دسترسی به تصاویر را داشته باشد. با بهرهگیری از .htaccess (در سرورهای Apache) میتوانید Hotlinking را غیرفعال کنید. سرویسهای CDN معمولا امکان جلوگیری از Hotlinking را نیز ارائه میدهند. کنترل و نظارت بر عملکرد ترافیک سایت میتواند به شما در شناسایی Hotlinking کمک کند. جلوگیری از Hotlinking به حفظ منابع سرور شما کمک میکند. Hotlinking یک مشکل جدی برای وب سایتهایی است که تصاویر زیادی دارند. به صورت دورهای تنظیمات Hotlinking خود را بررسی کنید.
14. بهرهگیری از فرمتهای تصویری جدید: AVIF و JPEG XL
AVIF و JPEG XL فرمتهای تصویری جدیدی هستند که وعده میدهند کیفیت بهتری را با حجم کمتری نسبت به فرمتهای سنتی مانند JPEG و PNG ارائه دهند. اگرچه هنوز به طور کامل توسط همه مرورگرها پشتیبانی نمیشوند، اما ارزش امتحان کردن را دارند. میتوانید از این فرمتها به عنوان یک گزینه fallback برای مرورگرهایی که از آنها پشتیبانی میکنند استفاده کنید. AVIF توسط Netflix و گوگل توسعه یافته است. JPEG XL جایگزینی برای فرمت JPEG است. برای تبدیل تصاویر به فرمت AVIF و JPEG XL، از ابزارهای آنلاین یا نرمافزارهای ویرایش تصویر استفاده کنید. پشتیبانی از AVIF و JPEG XL در حال افزایش است. بهرهگیری از فرمتهای تصویری جدید میتواند به بهبود چشمگیر سرعت لود سایت کمک کند. به سازگاری مرورگرها با این فرمتها توجه کنید.
15. مراقب Metadata باشید: حذف اطلاعات غیر ضروری
تصاویر میتوانند حاوی اطلاعات metadata باشند، مانند اطلاعات دوربین، تاریخ و زمان عکسبرداری، و موقعیت جغرافیایی. این اطلاعات میتواند حجم فایل را افزایش دهد و برای حفظ حریم خصوصی نیز ممکن است مناسب نباشد. قبل از آپلود، metadata را از تصاویر حذف کنید. از ابزارهای ویرایش تصویر یا ابزارهای آنلاین برای حذف metadata استفاده کنید. برخی از سرویسهای میزبانی تصویر به صورت خودکار metadata را حذف میکنند. حذف metadata میتواند به کاهش حجم فایل و بهبود امنیت سایت کمک کند. به اطلاعات EXIF و IPTC موجود در تصاویر توجه کنید. برخی از metadata ممکن است برای اهداف خاصی مفید باشند، بنابراین قبل از حذف، بررسی کنید. حذف metadata یک گام مهم در بهینه سازی تصاویر است.
16. بهرهگیری از Icon Fonts یا SVG Sprites برای آیکونها
به جای بهرهگیری از تصاویر جداگانه برای هر آیکون، از Icon Fonts یا SVG Sprites استفاده کنید. Icon Fonts فایلهای فونتی هستند که شامل مجموعهای از آیکونها هستند. SVG Sprites مجموعهای از تصاویر SVG هستند که در یک فایل SVG ادغام شدهاند. این روشها باعث کاهش تعداد درخواستهای HTTP و بهبود سرعت لود سایت میشوند. Font Awesome یکی از محبوبترین Icon Font ها است. SVG Sprites انعطاف پذیری بیشتری نسبت به Icon Fonts دارند. بهرهگیری از Icon Fonts یا SVG Sprites به مهارتهای CSS نیاز دارد. Icon Fonts و SVG Sprites به بهبود عملکرد سایت کمک میکنند. به License آیکونها توجه کنید. بهرهگیری از SVG برای آیکونها به طور کلی ترجیح داده میشود.
17. تست و کنترل و نظارت بر عملکرد: پیگیری عملکرد تصاویر
پس از اعمال تغییرات، عملکرد تصاویر خود را با بهرهگیری از ابزارهای تست سرعت وب سایت مانند گوگل PageSpeed Insights یا GTmetrix بررسی کنید. این ابزارها به شما نشان میدهند که کدام تصاویر هنوز نیاز به بهینه سازی دارند و چگونه میتوانید سرعت لود سایت خود را بهتر کنید. به طور منظم عملکرد تصاویر خود را مانیتور کنید و تغییرات لازم را اعمال کنید. به امتیاز Pagespeed Insights توجه کنید. به زمان لود تصاویر (image load time) دقت کنید. به حجم کل تصاویر در صفحه توجه کنید. از ابزارهای کنترل و نظارت بر عملکرد برای شناسایی تصاویر با حجم بالا استفاده کنید. تست و کنترل و نظارت بر عملکرد مداوم کلید موفقیت در بهینه سازی تصاویر است. ابزارهای تست سرعت وب سایت توصیههای ارزشمندی برای بهبود عملکرد سایت ارائه میدهند.
