Images for the Web: Formats, Size and Responsive Imagesوێنە بۆ وێب: جۆرەکانی فایل، قەبارە و وێنە ڕێسپۆنسیڤەکان

You can already put a picture on a page with <img>, alt, width and height (Images). This lesson is about the file behind the tag: its format, its size and which version each screen should get.

دەزانیت چۆن بە <img>، alt، width و height وێنەیەک دەخەیتە سەر لاپەڕەتۆڕێک (Web page) (وێنەکان). ئەم وانەیە باسی ئەو فایلە (File) دەکات کە لە پشت تاگەکەوەیە (Tag): جۆری فایلەکەی، قەبارەکەی و ئەوەی هەر شاشەیەک کام وەشانی وەربگرێت.

Pictures are usually the heaviest part of a page. In July 2025 the median mobile home page weighed about 2.6 MB, and about 0.9 MB of it was images — more than its JavaScript or its fonts. Every picture is also one more request to the server (One request for every file). On a phone with weak mobile data, heavy pictures mean a slow page and a bigger bill.

زۆرجار وێنەکان قورسترین بەشی لاپەڕەن. لە تەممووزی ⁦2025⁩، ناوەڕاستەی (Median) قەبارەی لاپەڕە سەرەکییەکان (Home page) لە مۆبایلدا نزیکەی ⁦2.6 MB⁩ بوو و نزیکەی ⁦0.9 MB⁩ـی ئەو قەبارەیە وێنە بوو — زیاتر لە JavaScript و فۆنتەکانی (Font). هەر وێنەیەکیش داواکارییەکی (Request) ترە بۆ ڕاژەکار (Server) (بۆ هەر فایلێک داواکارییەک). لە مۆبایلێکدا کە ئینتەرنێتەکەی (Internet) لاوازە، وێنەی قورس واتە لاپەڕەیەکی هێواش و پارەی زیاتر.

A photo straight from a camera is huge. The original file of the Gali Ali Beg waterfall photo on Wikimedia Commons is 6240 × 4160 pixels and 18.7 MB — about seven times a whole median mobile page. A web page never shows it that big: in an article column it may be 600 CSS pixels wide.

وێنەیەک کە ڕاستەوخۆ لە کامێراوە دێت زۆر گەورەیە. فایلە ئەسڵییەکەی وێنەی تاڤگەی گەلی عەلی بەگ لە ⁦Wikimedia Commons 6240 × 4160⁩ پیکسڵ (Pixel) و ⁦18.7 MB⁩ـە — نزیکەی حەوت ئەوەندەی هەموو لاپەڕەیەکی ئاسایی مۆبایل. لاپەڕەتۆڕەکە هەرگیز ئەوەندە گەورە پیشانی نادات: لە ستوونی وتارێکدا لەوانەیە پانییەکەی ⁦600⁩ پیکسڵی CSS بێت.

Pictures come in two kinds (Images: raster and vector). A raster picture is a grid of pixels: photos, screenshots. A vector picture is a list of shapes — lines, curves, colours — that the browser draws at any size. SVG is the web's vector format. It is plain text, so a logo or an icon is often only a few kilobytes; it stays sharp on every screen and zoom level; and CSS can change its colours. The diagrams in CêIT lessons are SVG: that is how they follow the dark theme.

وێنە دوو جۆرە (وێنە: پیکسڵی و ڤێکتەری). گرافیکی پیکسڵی تۆڕێکە لە پیکسڵەکان: فۆتۆ و وێنەی شاشە. گرافیکی ڤێکتەری (Vector graphics) لیستێکە لە شێوە — هێڵ، کەوانە، ڕەنگ — کە تۆڕگەڕەکە بە هەر قەبارەیەک دەیکێشێت. SVG جۆری فایلی گرافیکی ڤێکتەریی وێبە. دەقێکی سادەیە، بۆیە لۆگۆ یان ئایکۆنێک زۆرجار تەنیا چەند کیلۆبایتێکە (Kilobyte)؛ لە هەموو شاشەیەک و هەموو زوومێکدا (Zoom) ڕوون دەمێنێتەوە؛ CSSـیش دەتوانێت ڕەنگەکانی بگۆڕێت. هێڵکارییەکانی وانەکانی CêIT SVGـن: بەم شێوەیە لەگەڵ ڕووکاری تاریکدا دەگۆڕێن.

Each format packs pixels in its own way. Lossy formats throw away details people hardly notice (lossy compression); lossless ones keep every pixel (lossless compression) — see Formats and compression and File extensions.

هەر جۆری فایلێک بە شێوەی خۆی پیکسڵەکان دەپەستێنێت. هەندێکیان ئەو وردەکارییانە فڕێ دەدەن کە خەڵک بە زەحمەت هەستی پێ دەکەن (lossy compression)؛ هەندێکیشیان هەموو پیکسڵێک دەهێڵنەوە (lossless compression) — بڕوانە Formats and compression و پاشگری فایل.

We exported one photo — the first web server at CERN (Tim Berners-Lee and the first server) — at 1200 × 852 pixels in four formats and measured the files (CêIT, 2026). The picture shows the same 440 × 260 pixel part of each file at real size.

یەک وێنەمان — یەکەم ڕاژەکاری وێب (Web server) لە CERN (⁦Tim Berners-Lee⁩ و یەکەم ڕاژەکار) — بە ⁦1200 × 852⁩ پیکسڵ و بە چوار جۆری فایل دەرهێنا و فایلەکانمان پێوا (CêIT، ⁦2026⁩). وێنەکە هەمان بەشی ⁦440 × 260⁩ پیکسڵی هەر فایلێک بە قەبارەی ڕاستەقینە پیشان دەدات.

The quality numbers are not the same scale in every format, so compare by eye: zoom in to 100 % and lower the quality until you just start to see damage, then go one step back.

ژمارەکانی جۆرایەتی لە هەموو جۆری فایلێکدا هەمان پێوەر نین، بۆیە بە چاو بەراوردیان بکە: بۆ ⁦100 %⁩ زووم بکە و جۆرایەتییەکە کەم بکەرەوە تا تازە زیان دەبینیت، پاشان هەنگاوێک بگەڕێوە.

You know that width and height keep space for a picture (Width, height and the old align and border). Here is why that matters. Without them, the browser cannot know how tall the picture will be until the file arrives. It draws the text first; then the picture pushes everything down. You lose your place, or tap the wrong thing. This jump is a layout shift.

دەزانیت width و height شوێن بۆ وێنە دەهێڵنەوە (Width، height و align و borderـی کۆن). ئەمە بۆچی گرنگە؟ بەبێ ئەوان، تۆڕگەڕەکە نازانێت وێنەکە چەند بەرز دەبێت تا فایلەکە دەگات. سەرەتا دەقەکە دەکێشێت؛ پاشان وێنەکە هەموو شتێک بەرەو خوارەوە پاڵ دەنێت. شوێنی خوێندنەوەکەت ون دەکەیت، یان پەنجە لە شتێکی هەڵە دەدەیت. ئەم بازدانە بازدانی ناوەڕۆکـە.

With both attributes, the browser knows the shape (width ÷ height) before it downloads anything, and keeps a box of that shape. CSS can still make the picture smaller: max-width: 100%; height: auto; (Pictures that shrink) keeps the same shape.

بە بوونی هەردوو خەسڵەتەکە (Attribute)، تۆڕگەڕەکە پێش دابارکردنی (Download) هەر شتێک شێوەکە دەزانێت (پانی ÷ بەرزی) و سندووقێک بەو شێوەیە دەهێڵێتەوە. CSS هێشتا دەتوانێت وێنەکە بچووکتر بکات: max-width: 100%; height: auto; (وێنەی بچووکبوو) هەمان شێوە دەپارێزێت.

With one src, every visitor downloads the same file: too big for a small phone, or too blurry for a sharp laptop screen. With srcset you list several widths of the same picture; the number with w after each file is its real width in pixels. sizes tells the browser how wide the picture will be on the page (its slot). The browser works out how many pixels it needs — slot width × the screen's pixel density — and downloads the smallest file that is wide enough. This is a responsive image.

بە یەک src، هەموو سەردانیکەرێک هەمان فایل دابار دەکات: بۆ مۆبایلێکی بچووک زۆر گەورەیە و بۆ شاشەی وردی لاپتۆپێک لێڵە. بە srcset چەند پانییەکی هەمان وێنە لیست دەکەیت؛ ئەو ژمارەیەی wـی لە دواوەیە پانیی ڕاستەقینەی فایلەکەیە بە پیکسڵ. sizes بە تۆڕگەڕەکە دەڵێت وێنەکە لە لاپەڕەکەدا چەند پان دەبێت (شوێنەکەی). تۆڕگەڕەکە حساب دەکات چەند پیکسڵی پێویستە — پانیی شوێن × چڕیی پیکسڵی شاشەکە — و بچووکترین فایل دابار دەکات کە بەسە. ئەمە وێنەی ڕێسپۆنسیڤە (Responsive image).

sizes is a list of media condition + slot width. The browser uses the first condition that is true; the last width has no condition and is the default. Widths are in px, em, vw or calc() — never %. Without sizes, the browser assumes 100vw, the whole window, and may download a much bigger file than the slot needs; the Nu checker also reports a missing sizes as an error.

sizes لیستێکە لە مەرجی (Condition) میدیا + پانیی شوێن. تۆڕگەڕەکە یەکەم مەرج بەکار دەهێنێت کە ڕاستە؛ دوا پانی مەرجی نییە و بنەڕەتە. پانییەکان بە px، em، vw یان calc()ـن — هەرگیز % نا. بەبێ sizes، تۆڕگەڕەکە وا دادەنێت 100vwـە (هەموو پەنجەرەکە) و لەوانەیە فایلێکی زۆر گەورەتر لەوەی شوێنەکە پێویستیەتی دابار بکات؛ پشکنەری Nu نەبوونی sizes وەک هەڵە (Error) ڕاپۆرت دەکات.

A gallery has one column on phones, two from 600 px and three from 1000 px. So the widest condition comes first:

پێشانگایەک (Gallery) لە مۆبایلدا یەک ستوونی هەیە، لە ⁦600 px⁩ـەوە دوو و لە ⁦1000 px⁩ـەوە سێ. بۆیە پانترین مەرج یەکەم دێت:

srcset changes only the size of one picture. Sometimes a phone needs a different picture: a wide view of a waterfall is tiny on a phone, so a tall, close crop works better. Choosing the picture for each screen is called art direction. <picture> holds <source> elements and one <img>. The browser takes the first <source> whose media condition is true; if none matches, it uses the <img>. The <img> is always needed: it shows the chosen picture and carries alt.

srcset تەنیا قەبارەی یەک وێنە دەگۆڕێت. هەندێک جار مۆبایل پێویستی بە وێنەیەکی جیاواز هەیە: دیمەنێکی پانی تاڤگەیەک لە مۆبایلدا زۆر بچووک دەبێت، بۆیە بڕاوێکی درێژ و نزیک باشترە. هەڵبژاردنی وێنە بۆ هەر شاشەیەک پێی دەوترێت art direction. <picture> چەند <source>ـێک و یەک <img> لەخۆ دەگرێت. تۆڕگەڕەکە یەکەم <source> وەردەگرێت کە مەرجی mediaـەکەی ڕاستە؛ ئەگەر هیچیان نەگونجان، <img> بەکار دەهێنێت. <img> هەمیشە پێویستە: وێنە هەڵبژێردراوەکە پیشان دەدات و alt هەڵدەگرێت.

<source type> offers AVIF and WebP and keeps JPEG for any browser that cannot show them. The browser skips every <source> whose type it does not support and takes the first one it can show. Only one file is downloaded.

<source type> AVIF و WebP پێشکەش دەکات و JPEG بۆ هەر تۆڕگەڕێک دەهێڵێتەوە کە نەتوانێت پیشانیان بدات. تۆڕگەڕەکە هەموو <source>ـێک تێدەپەڕێنێت کە typeـەکەی ناناسێت و یەکەمیان وەردەگرێت کە دەتوانێت پیشانی بدات. تەنیا یەک فایل دابار دەکرێت.

A long page may have 30 pictures, but at first the visitor sees only the top, and many never scroll to the end. loading="lazy" tells the browser to wait: it downloads such a picture only when the visitor comes near it. Chrome starts about 1250 px before the picture reaches the screen on fast connections, and 2500 px on slow ones, so the picture is usually ready in time (web.dev).

لەوانەیە لاپەڕەیەکی درێژ ⁦30⁩ وێنەی هەبێت، بەڵام سەرەتا سەردانیکەر تەنیا سەرەوە دەبینێت و زۆرێکیش هەرگیز ناگەنە کۆتایی. loading="lazy" بە تۆڕگەڕەکە دەڵێت چاوەڕێ بکات: ئەو جۆرە وێنەیە تەنیا کاتێک دابار دەکات کە سەردانیکەر لێی نزیک دەبێتەوە. Chrome لە پەیوەندیی خێرادا نزیکەی ⁦1250 px⁩ پێش گەیشتنی وێنەکە بە شاشە دەست پێ دەکات و لە پەیوەندیی هێواشدا ⁦2500 px⁩، بۆیە وێنەکە زۆرجار لە کاتی خۆیدا ئامادەیە ⁦(web.dev)⁩.

Cards, avatars and galleries need pictures of one shape, but photos come in many shapes. aspect-ratio gives the box its shape (aspect ratio). object-fit says how the picture fills the box: fill (the default) stretches it, contain shows the whole picture with empty bands, cover fills the box and cuts off the edges. object-position chooses which part stays visible.

کارتەکان (Card)، وێنەی پرۆفایل و پێشانگاکان پێویستیان بە وێنەی یەک شێوە هەیە، بەڵام فۆتۆکان بە شێوەی جیاواز دێن. aspect-ratio شێوە دەداتە سندووقەکە (ڕێژەی پانی بۆ بەرزی (Aspect ratio)). object-fit دەڵێت وێنەکە چۆن سندووقەکە پڕ دەکاتەوە: fill (بنەڕەت) ڕایدەکێشێت، contain هەموو وێنەکە بە بەشی بەتاڵەوە پیشان دەدات، cover سندووقەکە پڕ دەکاتەوە و لێوارەکان دەبڕێت. object-position هەڵدەبژێرێت کام بەش دیار بمێنێتەوە.

Finding a picture with a search engine does not mean you may publish it: pictures belong to the people who made them (Copyright). Safe sources are your own photos and drawings, and pictures with a free licence — public domain, CC0, CC BY or CC BY-SA (The six CC licences, CC0 and the public domain) — from places that show the licence clearly, such as Wikimedia Commons (Finding pictures you may use).

دۆزینەوەی وێنەیەک بە بزوێنەری گەڕانێک (Search engine) واتای ئەوە نییە کە بۆت هەیە بڵاوی بکەیتەوە: وێنەکان هی ئەو کەسانەن کە دروستیان کردوون (مافی لەبەرگرتنەوە). سەرچاوە دڵنیاکان فۆتۆ و وێنە کێشراوەکانی خۆتن، هەروەها ئەو وێنانەی مۆڵەتی گشتییەکی (Public licence) ئازادیان هەیە — موڵکی گشتی (Public domain)، ⁦CC0⁩، CC BY یان ⁦CC BY-SA⁩ (شەش مۆڵەتەکەی CC، ⁦CC0⁩ و موڵکی گشتی) — لەو شوێنانەوە کە مۆڵەتەکە بە ڕوونی پیشان دەدەن، وەک Wikimedia Commons (دۆزینەوەی ئەو وێنانەی بۆت هەیە بەکاریان بهێنیت).

Under the picture, write a credit line — subject, author, source and licence (Writing a credit line) — usually in <figcaption>:

لە ژێر وێنەکەدا دێڕێکی ناوهێنان بنووسە — بابەت، خاوەن، سەرچاوە و مۆڵەت (نووسینی دێڕی ناوهێنان) — زۆرجار لەناو <figcaption>ـدا:

Hotlinking means showing a picture straight from another website's address: <img src="https://their-site.example/citadel.jpg">. The file stays on their server. A link never gives you permission (Linking or re-hosting a picture is no shortcut), and it also hurts your page:

بەستنەوەی ڕاستەوخۆ (hotlinking) واتە پیشاندانی وێنەیەک ڕاستەوخۆ لە ناونیشانی تۆڕگەیەکی (Website) ترەوە: <img src="https://their-site.example/citadel.jpg">. فایلەکە لەسەر ڕاژەکارەکەی ئەوان دەمێنێتەوە. بەستەر (Hyperlink) هەرگیز مۆڵەتت پێ نادات (بەستنەوە یان دووپاتە هەڵگرتنی وێنە ڕێگای کورت نییە)، هەروەها زیان بە لاپەڕەکەت دەگەیەنێت:

So save a picture you may use in your site's own images/ folder, and export and compress it as this lesson shows. Keep its credit line too. Load a picture from the owner's server only when the owner asks for that: Unsplash's API, for example, requires apps to use the photo addresses it returns, so that each view counts for the photographer.

بۆیە وێنەیەک کە بۆت هەیە بەکاری بهێنیت لە فۆڵدەری (Directory) images/ـی تۆڕگەکەی خۆتدا هەڵبگرە و وەک ئەم وانەیە پیشانی دەدات دەریبهێنە و بیپەستێنە. دێڕی ناوهێنانەکەشی بپارێزە. تەنیا کاتێک وێنەیەک لە ڕاژەکاری خاوەنەکەیەوە بار بکە کە خاوەنەکە خۆی داوای ئەوە بکات: بۆ نموونە APIـی Unsplash داوا لە ئەپەکان (App) دەکات ئەو ناونیشانانەی وێنە بەکاربهێنن کە خۆی دەیانگەڕێنێتەوە، تا هەموو بینینێک بۆ وێنەگرەکە بژمێردرێت.