اشتراکها
معرفی Dev Home
در این مطلب نکات کار با تصاویر را توسط افزونهی Web Esstentials بررسی میکنیم. این افزونه قابلیتهای زیر را در کار با تصاویر در اختیار شما قرار میدهد:
بهینهسازی تصاویر
یکی از موارد مهمی که باید مورد توجه قرار بگیرد، استفاده از تصاویر کم حجم در وبسایت میباشد. روشهای مختلفی جهت بهینهسازی تصاویر مورد استفاده در سایت وجود دارند، به طور مثال جهت بهینهسازی تصاویر PNG میتوانید از ابزار PNGGauntlet استفاده کنید. همچنین اینجا نیز یک ابزار آنلاین موجود میباشد. افزونهی Web Essentails این قابلیت را به آسانی در اختیار شما قرار میدهد؛ اینکار را میتوانید توسط این افزونه به روشهای زیر انجام دهید:
- کلیک راست بر روی تصویر
برای اینکار بر روی فایلی که میخواهید optimize کنید، کلیک راست کرده و از منوی ظاهر شده گزینه Web Essentials و سپس Optimize Image را انتخاب کنید:
در قسمت status bar نیز میتوانید نتیجه را مشاهده کنید:
- انتخاب چندین تصویر
روال قبلی را میتوانید برای چندین فایل انتخاب شده و یا یک پوشه تکرار کنید:
- بهینهسازی تصاویر موجود در فایلهای CSS
همچنین امکان بهینهسازی تصاویر داخل فایلهای CSS نیز توسط این افزونه امکان پذیر است:
همانطور که در تصویر فوق مشاهده میکنید میتوانیم تصاویری که به صورت Data Uri درون کد پیوست شده اند را با کلیک بر روی Save to file به صورت یک فایل ذخیره کنیم.
ایجاد تصاویر Sprite
یکی دیگر ار قابلیتهای افزونه Web Essentials امکان تهیه تصاویر به صورت Sprite می باشد. برای اینکار کافی است به این صورت عمل کنید:
بعد از کلیک بر روی Create image sprite باید یک نام برای آن تعیین کنید و سپس بر روی کلید Save کلیک کنید. با اینکار یک فایل از نوع XML با پسوند sprite برای شما ساخته خواهد شد:
<?xml version="1.0" encoding="utf-8"?> <sprite xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/sprite.xsd"> <settings> <!--Determines if the sprite image should be automatically optimized after creation/update.--> <optimize>true</optimize> <!--Determines the orientation of images to form this sprite. The value must be vertical or horizontal.--> <orientation>vertical</orientation> <!--File extension of sprite image.--> <outputType>png</outputType> <!--Determin whether to generate/re-generate this sprite on building the solution.--> <runOnBuild>false</runOnBuild> <!--Use full path to generate unique class or mixin name in CSS, LESS and SASS files. Consider disabling this if you want class names to be filename only.--> <fullPathForIdentifierName>true</fullPathForIdentifierName> <!--Use absolute path in the generated CSS-like files. By default, the URLs are relative to sprite image file (and the location of CSS, LESS and SCSS).--> <useAbsoluteUrl>false</useAbsoluteUrl> <!--Specifies a custom subfolder to save CSS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForCss /> <!--Specifies a custom subfolder to save LESS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForLess /> <!--Specifies a custom subfolder to save SCSS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForScss /> </settings> <!--The order of the <file> elements determines the order of the images in the sprite.--> <files> <file>/Content/Images/01.png</file> <file>/Content/Images/02.png</file> <file>/Content/Images/03.png</file> <file>/Content/Images/04.png</file> </files> </sprite>
به عنوان مثال فایل CSS تصویر فوق به صورت زیر میباشد:
/* This is an example of how to use the image sprite in your own CSS files */ .Content-Images-01 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 0; } .Content-Images-02 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 -32px; } .Content-Images-03 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 -64px; } .Content-Images-04 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 -96px; }
<div class="Content-Images-01"></div> <div class="Content-Images-02"></div> <div class="Content-Images-03"></div> <div class="Content-Images-04"></div>
استفاده از تصاویر Data URIs
یکی دیگر از روشهای کاهش درخواستهای HTTP در یک سایت استفاده از Data URIs می باشد، توسط این روش میتوانید فایل هایتان را درون HTML و یا CSS قرار دهید یا به اصطلاح embed کنید. به طور مثال جهت استفاده از یک تصویر میتوانید به راحتی با آدرس دهی تصویر درون تگ img، تصویر را درون صفحه نمایش دهید:
<img src="https://www.dntips.ir/images/logo.png" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
سینتکس Data URIs
به طور مثال تگ زیر را در نظر داشته باشید:
<img src="data:image/png;base64,iVBOR..." />
data: نام schema
image/png: نوع محتوا(content type)
base64: نوع encoding استفاده شده برای encode کردن اطلاعات
iVBOR...: اطلاعات encode شده.
توسط افزونه Web Essentials به راحتی میتوانید تصویر موردنظرتان را به صورت Data URI تهیه کنید:
اشتراکها
Visual Studio 2019 RC منتشر شد
- Team Explorer - Changes: panel not sizing to the Team Explorer window.
- Visual Studio 2017 SQL Server Object Explorer server list not persisting .
- intellisense problems with linux-x64 mode.
- Index was out of range. Must be non-negative and less than the size of the collection.Parameter name: index.
- Visual Studio 2017 UNDO does not work/stops working (reported AGAIN!!!!).
- Intellisense not working for files created under WSL.
- Intellisense error: C++11 static constexpr member initialization causes "member may not be initialized".
- VS doesn't restore windows position when switching in/out of debug.
- Third party toolbox items are reloaded every time VS2019 Preview 2.2 is started.
- 'Set as StartUp Project' crashes the IDE after updating to VS2019 Preview Release 3.
- Visual Studio 2019 building Visual Studio 2017 C++ projects fail.
- Fixed Toolbox refresh issue.
- Toolbox controls are making vssettings file too big.
- SSDT: Fix for Login failed errors when performing a New Data comparison function .
- SSDT: Fix for Source is Unavailable error when performing Schema Compare .
- SSDT: Fix for Schema Compare Generate Script does not generate script .
- SSDT: Fix to improve performance of loading solutions with multiple projects.
- SSDT: Fix for SQL files not always being deleted when performing a Schema Compare between a database and a project and a delete table is executed subsequently.
- SSDT: Accessibility fixes to improve narration capabilities.
- SSDT: Replaced older sqlncli driver with new Microsoft ODBC Driver for SQL Server.