اما چطور مي توانيد اطمينان حاصل كنيد كه تصاوير روي سايت موبايلي شما سبك و ريسپانسيو هستند و با استفاده از بهترين فرمت، مي توانند كيفيت و سرعت را با هم داشته باشند؟ در اين مقاله نيوسئو، بيشتر بر روي بهينه سازي تصاوير براي موبايل شامل توليد تصاوير ريسپانسيو و ديگر متدهاي هوشمندي كه مي توانند از تخريب تجربه كاربري موبايل جلوگيري كنند، تمركز مي كنيم.

متعادل كردن بهينه سازي تصاوير:

مشكل سئو تصاوير اين است كه قانون سرسخت و قاطعي وجود ندارد. بهينه سازي تصاوير هميشه بايد تعادلي را ميان تجربه كاربري (User Experience)، جذاب بودن و عملكرد صفحه حفظ كند.

RalucaBudiu، مدير مطالعات در گروه Nielsen Norman، مي گويد:

"از آنجا كه صفحه موبايل كوچك است، تصاوير بيش از حد كوچك احتمالا اطلاعات خيلي كمي را در اختيار كاربر قرار مي دهند و تصاوير خيلي بزرگ نيز سرعت صفحه را بيش از حد پايين مي آورند. پيشنهاد مي كنيم كه با اندازه متوسط تصاوير شروع كنيد و به افراد امكان زوم كردن در تصوير و يا دانلود سايز بزرگتر تصوير را بدهيد.

بيشتر اوقات، استفاده از تصاوير بزرگ ايده خوبي نيست. چگالي اطلاعات اين تصاوير كم است و مردم بايد براي بارگزاري اين تصاوير صبر كنند و براي فهميدن محتواي آن نيز به پايين و بالاي صفحه بروند. اين مشكل در طراحي ريسپانسيو يك ستوني، شايع است. از آنجا كه تصاوير بايد تمام عرض موجود را پر كنند، ما معمولا با تصاوير بزرگي مواجه مي شويم كه به نسبت اندازه شان، حاوي اطلاعات كمي هستند.

قانون نوشته شده و آماده اي براي اندازه تصاوير موبايلي وجود ندارد و بيشتر بايد با توجه به كيفيت و اندازه صفحه تصميم گيري كرد. اما مي توان به 100 تا از معروف ترين سايت ها رجوع كرد و از تصاوير آن الگو گرفت. طبق httpArchive، متوسط اندازه تصاوير JPG شامل 29KB و متوسط اندازه تصاوير PNG هم 16KB مي باشد.

بخشي از كاهش حجم تصوير، مربوط به كاهش اندازه تصوير و رزولوشن آن (تعداد پيكسل ها) است و بخشي ديگر نيز درباره فشرده سازي تصاوير است. برخي ابزارهاي خلاقانه، مانند Photoshop، فشرده سازي نيز انجام مي دهند، اما معمولا اين ميزان فشرده سازي كافي نيست. مخصوصا در رابطه با تصاويري از نوع PNG.

امروزه در فضاي مجازي تعداد زيادي ابزار جهت فشرده سازي وجود دارند كه به كيفيت عكس لطمه اي وارد نمي كنند و باعث ارتقاي كيفيت عكس مي شوند. به طور مثال تصوير اصلي كه در صفحه اصلي (Home Page) وب سايتتان قرار مي دهيد را مي توانيد با وب سايت ها يا ابزارهاي فشرده سازي تصاوير مانند TinyPNG فشرده نماييد.

چند ابزار وجود دارد كه مي تواند تصاوير را به صورت تكي، يا دسته اي، به اندازه كافي فشرده نمايد. مي توانيد براي اين كار از وب سايت ها يا ابزارهاي فشرده سازي تصاوير مانند TinyPNG استفاده نماييد. همچنين براي انجام مقايسه بين ابزارهاي فشرده سازي اصلي، مي توانيد GitHub را مشاهده نماييد.

آيا بايد از تصاوير با اندازه هاي مختلف براي موبايل، تبلت يا دسكتاپ استفاده كرد؟

وقتي وب سايت هاي جداگانه اي براي موبايل، تبلت يا دسكتاپ طراحي مي كنيد، چه اين كار را با URLهاي اختصاصي (site.com و m.site.com) انجام مي دهيد، چه با سايت هاي مختلف در يك adaptive web design) URL) الزامي است كه اين تصاوير براي بزرگترين دستگاه اندازه مناسبي داشته باشند.

در طراحي وب سايت ريسپانسيو (Responsive Web Design)، موقعيت تصاوير زياد روشن نيست. در RWD قانون اصلي، ارائه وب سايتي مشابه براي تمامي دستگاه ها است. با استفاده از CSS مي توان بسته به قابليت هاي دستگاه و اندازه صفحه، محتوا را شكل داد و قالب بندي كرد.

البته، اين بدين معني نيست كه الزاما وب سايت ها بايد يك سايز مشخص از تصوير را براي تمامي دستگاه ها انتخاب كنند. Alex Painter، مشاور عملكرد وب در NCC Group مي گويد:

"برخي سايت ها در نسخه دسكتاپ و موبايل، از تصاوير يكسان استفاده مي كنند و تنها تصاوير نسخه موبايلي را كمي كوچك مي كنند تا مناسب صفحه شود. اين مسئله شايد به نظر كاربراني كه دستگاه هاي قوي و سريع دارند خوب به نظر نيايد. اما مي تواند وب سايت را براي افرادي كه دستگاه هاي كندتري دارند يا از خدمات شبكه ضعيفي بهره مي برند، كاملا بلااستفاده نمايد.

براي اينكه بگويم اين مشكل، مشكل بزرگي است دو دليل دارم. اولين دليل آن ساده است، اينكه براي بارگزاري تصاوير بزرگ و غيرضروري، زمان بيشتري نياز است. دومين دليل آن معمولا از نظرها پنهان است، اين است كه موبايل بايد مراحل سختي را طي كند تا تصوير را رمزگشايي كند و مقياس تصوير را كوچك كند. وقتي استفاده از انرژي و حافظه را در نظر بگيريم، مي بينيم انجام اين كار هزينه زيادي در بر دارد."

البته ديگر نيازي به انجام اين كار نيست. به كمك Responsive Images Community Group، ساخت تصاوير جايگزين براي دستگاه هاي مختلف شامل تصاويري كه براي صفحات با اندازه هاي مختلف مناسب باشند، رزولوشن مناسبي داشته باشند(از نظر تعداد پيكسل ها) و براي قابليت هاي دستگاه نيز مناسب باشند را براي توسعه دهندگان ساده تر كرده است.

HTML يك صفحه وب، به مرورگر مي گويد كدام يك از اين تصاوير را براي هر صفحه انتخاب كند و با چه عرضي، تصاوير نمايش داده شود.

پيش از اين برخي توسعه دهندگان از JavaScript استفاده مي كردند تا استفاده از تصاوير متفاوت را مشخص كنند. اما ويژگي picture مي تواند كدنويسي ها و درخواست هاي اضافي كه سرعت بارگزاري صفحه را كاهش مي دهد، حذف كند.

Alex Painter در اين زمينه مي گويد: 

" ارائه تصوير مناسب براي هر دستگاه در حال حاضر زياد سخت نيست. يك مدت براي تصاوير پس زمينه از مدل CSS استفاده كرديم، اما اخيرا، تصاويري كه در HTML مي آيند، بيشتر مشكل ساز هستند. خصوصيت ريسپانسيو بودن با عنصر در srcset (مجموعه اي از سورس هاي تصاوير جايگزين) اين امكان را فراهم كرده است كه كد بتواند تشخيص دهد چه تصاويري بايد براي چه عرضي استفاده شود (يا به مرورگر اين امكان را مي دهد كه مناسب ترين گزينه را از ميان تصاوير موجود انتخاب نمايد). در حال حاضر مرورگرها به خوبي از اين خصوصيت پشتيباني مي كنند و توسعه دهندگان بايد بيشتر از JavaScript، از اين ويژگي استفاده كنند تا به هدف مطلبوب خود برسند."

قسمت اول آموزش سئو تصاوير موبايلي در اينجا به پايان رسيد. در قسمت بعد به معرفي بهترين فرمت براي تصاوير و همچنين تكنيك هاي طراحي سايت براي افزايش سرعت بارگزاري صفحه مي پردازيم.