{"id":3561,"date":"2025-03-28T01:58:41","date_gmt":"2025-03-28T01:58:41","guid":{"rendered":"https:\/\/convertifypro.com\/?page_id=3561"},"modified":"2025-03-28T01:58:42","modified_gmt":"2025-03-28T01:58:42","slug":"file-size-calculator","status":"publish","type":"page","link":"https:\/\/convertifypro.com\/is\/reiknivel-fyrir-skraarstaerd\/","title":{"rendered":"Reikniv\u00e9l fyrir skr\u00e1arst\u00e6r\u00f0"},"content":{"rendered":"\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" integrity=\"sha512-iecdLmaskl7CVkqkXNQ\/ZH\/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT\/E0iPtmFIB46ZmdtAc9eNBvH0H\/ZpiBw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n<!-- File Size Calculator - A powerful tool to instantly measure your file sizes with drag and drop functionality -->\n<div class=\"file-size-calculator-section\">\n    <!-- Hero Section -->\n    <section class=\"hero-section\">\n        <div class=\"hero-pattern\"><\/div>\n        <div class=\"hero-content\">\n            <h1 class=\"hero-title\">Reikniv\u00e9l fyrir skr\u00e1arst\u00e6r\u00f0<\/h1>\n            <p class=\"hero-subtitle\">M\u00e6ldu og greindu skr\u00e1arst\u00e6r\u00f0 \u00fe\u00edna samstundis me\u00f0 \u00f6flugu draga-og-sleppa reikniv\u00e9linni okkar. Fullkomi\u00f0 til a\u00f0 skilja kr\u00f6fur um geymslu, f\u00ednstilla vefeignir og stj\u00f3rna stafr\u00e6nu efni.<\/p>\n            \n            <div class=\"hero-badges\">\n                <div class=\"hero-badge\">\n                    <span class=\"hero-badge-icon\"><i class=\"fas fa-bolt\"><\/i><\/span>\n                    <span class=\"hero-badge-text\">Augnablik Ni\u00f0urst\u00f6\u00f0ur<\/span>\n                <\/div>\n                <div class=\"hero-badge\">\n                    <span class=\"hero-badge-icon\"><i class=\"fas fa-mouse-pointer\"><\/i><\/span>\n                    <span class=\"hero-badge-text\">Drag\u00f0u og slepptu<\/span>\n                <\/div>\n                <div class=\"hero-badge\">\n                    <span class=\"hero-badge-icon\"><i class=\"fas fa-shield-alt\"><\/i><\/span>\n                    <span class=\"hero-badge-text\">100% einkam\u00e1l<\/span>\n                <\/div>\n                <div class=\"hero-badge\">\n                    <span class=\"hero-badge-icon\"><i class=\"fas fa-layer-group\"><\/i><\/span>\n                    <span class=\"hero-badge-text\">Margar skr\u00e1r<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n    \n    <!-- Calculator Section -->\n    <section class=\"calculator-section\">\n        <div class=\"calculator-container\">\n            <div id=\"drop-area\" class=\"drop-area\">\n                <div class=\"drop-message\">\n                    <i class=\"fas fa-cloud-upload-alt drop-icon\"><\/i>\n                    <h3 class=\"drop-title\">Drag\u00f0u og slepptu skr\u00e1m h\u00e9r<\/h3>\n                    <p class=\"drop-subtitle\">e\u00f0a<\/p>\n                    <button id=\"file-select-btn\" class=\"btn btn-primary\">Veldu Skr\u00e1r<\/button>\n                    <input type=\"file\" id=\"file-input\" multiple style=\"display: none;\">\n                <\/div>\n                <div class=\"drop-instructions\">\n                    <p><i class=\"fas fa-info-circle\"><\/i> Veldu margar skr\u00e1r til a\u00f0 reikna \u00fat samsettar og einstakar st\u00e6r\u00f0ir \u00feeirra<\/p>\n                <\/div>\n            <\/div>\n            \n            <div id=\"results-container\" class=\"results-container\" style=\"display: none;\">\n                <div class=\"results-header\">\n                    <h3 class=\"results-title\"><i class=\"fas fa-chart-pie\"><\/i> Greining skr\u00e1arst\u00e6r\u00f0ar<\/h3>\n                    <button id=\"clear-results\" class=\"btn btn-secondary btn-sm\">Hreinsar ni\u00f0urst\u00f6\u00f0ur<\/button>\n                <\/div>\n                \n                <div class=\"summary-card\">\n                    <div class=\"summary-item\">\n                        <span class=\"summary-label\">Samtals skr\u00e1r<\/span>\n                        <span id=\"total-files\" class=\"summary-value\">0<\/span>\n                    <\/div>\n                    <div class=\"summary-item\">\n                        <span class=\"summary-label\">Heildarst\u00e6r\u00f0<\/span>\n                        <span id=\"total-size\" class=\"summary-value\">0 B<\/span>\n                    <\/div>\n                    <div class=\"summary-item\">\n                        <span class=\"summary-label\">Me\u00f0alst\u00e6r\u00f0<\/span>\n                        <span id=\"average-size\" class=\"summary-value\">0 B<\/span>\n                    <\/div>\n                    <div class=\"summary-item\">\n                        <span class=\"summary-label\">St\u00e6rsta skr\u00e1in<\/span>\n                        <span id=\"largest-file\" class=\"summary-value\">0 B<\/span>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"size-chart-container\">\n                    <canvas id=\"size-chart\" width=\"400\" height=\"200\"><\/canvas>\n                <\/div>\n                \n                <table class=\"file-table\">\n                    <thead>\n                        <tr>\n                            <th>Skr\u00e1arheiti<\/th>\n                            <th>Tegund<\/th>\n                            <th>St\u00e6r\u00f0 (B)<\/th>\n                            <th>St\u00e6r\u00f0 (KB)<\/th>\n                            <th>St\u00e6r\u00f0 (MB)<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody id=\"file-list\"><\/tbody>\n                <\/table>\n            <\/div>\n        <\/div>\n    <\/section>\n    \n    <!-- Features Section -->\n    <section class=\"features-section\">\n        <h2 class=\"section-title\">Af hverju a\u00f0 nota skr\u00e1arst\u00e6r\u00f0arreikniv\u00e9lina okkar<\/h2>\n        \n        <div class=\"features-grid\">\n            <div class=\"feature-card\">\n                <div class=\"feature-content\">\n                    <div class=\"feature-icon\">\n                        <i class=\"fas fa-tachometer-alt\"><\/i>\n                    <\/div>\n                    <h3 class=\"feature-title\">Augnablik skr\u00e1agreining<\/h3>\n                    <p class=\"feature-text\">F\u00e1\u00f0u strax inns\u00fdn \u00ed skr\u00e1arst\u00e6r\u00f0ir \u00fe\u00ednar me\u00f0 leifturhra\u00f0a reikniv\u00e9linni okkar. Skildu kr\u00f6fur um geymslu \u00ed flj\u00f3tu brag\u00f0i.<\/p>\n                    <ul class=\"feature-list\">\n                        <li class=\"feature-item\">\n                            <span class=\"feature-check\"><i class=\"fas fa-check-circle\"><\/i><\/span>\n                            <span class=\"feature-item-text\">St\u00e6r\u00f0ar\u00fatreikningur \u00ed raunt\u00edma<\/span>\n                        <\/li>\n                        <li class=\"feature-item\">\n                            <span class=\"feature-check\"><i class=\"fas fa-check-circle\"><\/i><\/span>\n                            <span class=\"feature-item-text\">S\u00fdning \u00e1 m\u00f6rgum einingum (B, KB, MB, GB)<\/span>\n                        <\/li>\n                        <li class=\"feature-item\">\n                            <span class=\"feature-check\"><i class=\"fas fa-check-circle\"><\/i><\/span>\n                            <span class=\"feature-item-text\">Yfirlitst\u00f6lfr\u00e6\u00f0i fyrir margar skr\u00e1r<\/span>\n                        <\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n            \n            <div class=\"feature-card\">\n                <div class=\"feature-content\">\n                    <div class=\"feature-icon\">\n                        <i class=\"fas fa-shield-alt\"><\/i>\n                    <\/div>\n                    <h3 class=\"feature-title\">Fullkomi\u00f0 fri\u00f0helgi einkal\u00edfsins<\/h3>\n                    <p class=\"feature-text\">Skr\u00e1rnar \u00fe\u00ednar fara aldrei \u00far vafranum \u00fe\u00ednum. Allir \u00fatreikningar eru ger\u00f0ir \u00e1 sta\u00f0num, sem tryggir a\u00f0 g\u00f6gnin \u00fe\u00edn haldist pers\u00f3nuleg og \u00f6rugg.<\/p>\n                    <ul class=\"feature-list\">\n                        <li class=\"feature-item\">\n                            <span class=\"feature-check\"><i class=\"fas fa-check-circle\"><\/i><\/span>\n                            <span class=\"feature-item-text\">Engin skr\u00e1arhle\u00f0sla \u00e1 net\u00fej\u00f3na<\/span>\n                        <\/li>\n                        <li class=\"feature-item\">\n                            <span class=\"feature-check\"><i class=\"fas fa-check-circle\"><\/i><\/span>\n                            <span class=\"feature-item-text\">Virkar algj\u00f6rlega offline eftir hle\u00f0slu \u00e1 s\u00ed\u00f0u<\/span>\n                        <\/li>\n                        <li class=\"feature-item\">\n                            <span class=\"feature-check\"><i class=\"fas fa-check-circle\"><\/i><\/span>\n                            <span class=\"feature-item-text\">\u00d6ruggt fyrir vi\u00f0kv\u00e6mar e\u00f0a tr\u00fana\u00f0arskj\u00f6l<\/span>\n                        <\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n            \n            <div class=\"feature-card\">\n                <div class=\"feature-content\">\n                    <div class=\"feature-icon\">\n                        <i class=\"fas fa-chart-bar\"><\/i>\n                    <\/div>\n                    <h3 class=\"feature-title\">Sj\u00f3nr\u00e6n gagnaframsetning<\/h3>\n                    <p class=\"feature-text\">Skildu skr\u00e1arst\u00e6r\u00f0ir \u00fe\u00ednar me\u00f0 lei\u00f0andi sj\u00f3nr\u00e6num t\u00f6flum og l\u00ednuritum sem au\u00f0velda st\u00e6r\u00f0arsamanbur\u00f0.<\/p>\n                    <ul class=\"feature-list\">\n                        <li class=\"feature-item\">\n                            <span class=\"feature-check\"><i class=\"fas fa-check-circle\"><\/i><\/span>\n                            <span class=\"feature-item-text\">Gagnvirk st\u00e6r\u00f0art\u00f6flur<\/span>\n                        <\/li>\n                        <li class=\"feature-item\">\n                            <span class=\"feature-check\"><i class=\"fas fa-check-circle\"><\/i><\/span>\n                            <span class=\"feature-item-text\">Samanbur\u00f0arst\u00e6r\u00f0argreining<\/span>\n                        <\/li>\n                        <li class=\"feature-item\">\n                            <span class=\"feature-check\"><i class=\"fas fa-check-circle\"><\/i><\/span>\n                            <span class=\"feature-item-text\">Dreifingarmynd skr\u00e1arger\u00f0ar<\/span>\n                        <\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n    \n    <!-- Understanding File Sizes Section -->\n    <section class=\"file-sizes-section\">\n        <h2 class=\"section-title\">Skilningur \u00e1 skr\u00e1arst\u00e6r\u00f0um<\/h2>\n        \n        <div class=\"info-container\">\n            <div class=\"info-card\">\n                <h3 class=\"info-title\"><i class=\"fas fa-ruler\"><\/i> Stafr\u00e6nar skr\u00e1arst\u00e6r\u00f0areiningar<\/h3>\n                <p class=\"info-text\">Skr\u00e1arst\u00e6r\u00f0ir eru m\u00e6ldar \u00ed \u00fdmsum einingum eftir st\u00e6r\u00f0 \u00feeirra. Skilningur \u00e1 \u00feessum einingum hj\u00e1lpar til vi\u00f0 betri skipulagningu geymslu og skjalastj\u00f3rnun.<\/p>\n                \n                <table class=\"info-table\">\n                    <thead>\n                        <tr>\n                            <th>Eining<\/th>\n                            <th>T\u00e1kn<\/th>\n                            <th>Gildi (\u00ed b\u00e6tum)<\/th>\n                            <th>Algeng notkun<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                        <tr>\n                            <td>B\u00e6ti<\/td>\n                            <td>B<\/td>\n                            <td>1<\/td>\n                            <td>Stakir stafir, mj\u00f6g litlar skr\u00e1r<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>K\u00edl\u00f3b\u00e6t<\/td>\n                            <td>KB<\/td>\n                            <td>1,024<\/td>\n                            <td>Textaskj\u00f6l, litlar myndir<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>Megab\u00e6ti<\/td>\n                            <td>MB<\/td>\n                            <td>1,048,576<\/td>\n                            <td>Myndir, l\u00f6g, stutt myndb\u00f6nd<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>G\u00edgab\u00e6ti<\/td>\n                            <td>GB<\/td>\n                            <td>1,073,741,824<\/td>\n                            <td>Kvikmyndir, hugb\u00fana\u00f0arforrit<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>Terab\u00e6ti<\/td>\n                            <td>TB<\/td>\n                            <td>1,099,511,627,776<\/td>\n                            <td>St\u00f3rir gagnagrunnar, geymsludrif<\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n            <\/div>\n            \n            <div class=\"info-card\">\n                <h3 class=\"info-title\"><i class=\"fas fa-file-alt\"><\/i> D\u00e6migert skr\u00e1arst\u00e6r\u00f0 eftir tegund<\/h3>\n                <p class=\"info-text\">Mismunandi skr\u00e1arger\u00f0ir hafa mismunandi d\u00e6miger\u00f0ar st\u00e6r\u00f0ir eftir innihaldi \u00feeirra og tilgangi. H\u00e9r er lei\u00f0arv\u00edsir um algengar skr\u00e1arger\u00f0ir og venjulegar st\u00e6r\u00f0ir \u00feeirra:<\/p>\n                \n                <div class=\"file-types-grid\">\n                    <div class=\"file-type-item\">\n                        <div class=\"file-type-icon\"><i class=\"fas fa-file-word\"><\/i><\/div>\n                        <div class=\"file-type-content\">\n                            <h4 class=\"file-type-name\">Textaskj\u00f6l<\/h4>\n                            <p class=\"file-type-desc\">Word skj\u00f6l, PDF skj\u00f6l, textaskr\u00e1r<\/p>\n                            <p class=\"file-type-size\">10 KB &#8211; 5 MB<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"file-type-item\">\n                        <div class=\"file-type-icon\"><i class=\"fas fa-file-image\"><\/i><\/div>\n                        <div class=\"file-type-content\">\n                            <h4 class=\"file-type-name\">Myndir<\/h4>\n                            <p class=\"file-type-desc\">JPG, PNG, GIF, WebP skr\u00e1r<\/p>\n                            <p class=\"file-type-size\">100 KB &#8211; 10 MB<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"file-type-item\">\n                        <div class=\"file-type-icon\"><i class=\"fas fa-file-audio\"><\/i><\/div>\n                        <div class=\"file-type-content\">\n                            <h4 class=\"file-type-name\">Hlj\u00f3\u00f0skr\u00e1r<\/h4>\n                            <p class=\"file-type-desc\">MP3, WAV, FLAC, AAC skr\u00e1r<\/p>\n                            <p class=\"file-type-size\">3 MB &#8211; 50 MB<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"file-type-item\">\n                        <div class=\"file-type-icon\"><i class=\"fas fa-file-video\"><\/i><\/div>\n                        <div class=\"file-type-content\">\n                            <h4 class=\"file-type-name\">V\u00edde\u00f3 skr\u00e1r<\/h4>\n                            <p class=\"file-type-desc\">MP4, MKV, AVI, MOV skr\u00e1r<\/p>\n                            <p class=\"file-type-size\">50 MB &#8211; 5 GB<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"file-type-item\">\n                        <div class=\"file-type-icon\"><i class=\"fas fa-file-archive\"><\/i><\/div>\n                        <div class=\"file-type-content\">\n                            <h4 class=\"file-type-name\">\u00dejappa\u00f0ar skr\u00e1r<\/h4>\n                            <p class=\"file-type-desc\">ZIP, RAR, 7Z skjalasafn<\/p>\n                            <p class=\"file-type-size\">Breytilegt (fer eftir innihaldi)<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"file-type-item\">\n                        <div class=\"file-type-icon\"><i class=\"fas fa-file-code\"><\/i><\/div>\n                        <div class=\"file-type-content\">\n                            <h4 class=\"file-type-name\">K\u00f3\u00f0a skr\u00e1r<\/h4>\n                            <p class=\"file-type-desc\">HTML, CSS, JS, Python skr\u00e1r<\/p>\n                            <p class=\"file-type-size\">1 KB &#8211; 1 MB<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n    \n    <!-- FAQ Section -->\n    <section class=\"faq-section\">\n        <h2 class=\"section-title\">Algengar spurningar<\/h2>\n        \n        <div class=\"faq-container\">\n            <div class=\"faq-item\">\n                <h3 class=\"faq-question\">\n                    <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n                    Af hverju skiptir skr\u00e1arst\u00e6r\u00f0 m\u00e1li?\n                <\/h3>\n                <div class=\"faq-answer\">\n                    <p>Skr\u00e1arst\u00e6r\u00f0ir skipta sk\u00f6pum af \u00fdmsum \u00e1st\u00e6\u00f0um: \u00fe\u00e6r \u00e1kvar\u00f0a hversu miki\u00f0 geymslupl\u00e1ss \u00fe\u00fa \u00fearft, hafa \u00e1hrif \u00e1 upphle\u00f0slu- og ni\u00f0urhalst\u00edma, hafa \u00e1hrif \u00e1 hle\u00f0sluhra\u00f0a vefs\u00ed\u00f0na, haft \u00e1hrif \u00e1 vi\u00f0hengi \u00ed t\u00f6lvup\u00f3sti og geta haft \u00e1hrif \u00e1 afk\u00f6st t\u00e6kisins \u00feegar unni\u00f0 er me\u00f0 st\u00f3rar skr\u00e1r. Skilningur \u00e1 skr\u00e1arst\u00e6r\u00f0um hj\u00e1lpar til vi\u00f0 a\u00f0 h\u00e1marka stafr\u00e6na vinnufl\u00e6\u00f0i og geymslustj\u00f3rnun.<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"faq-item\">\n                <h3 class=\"faq-question\">\n                    <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n                    Hver er munurinn \u00e1 MB og MiB?\n                <\/h3>\n                <div class=\"faq-answer\">\n                    <p>MB (megab\u00e6t) og MiB (mebibyte) t\u00e1kna mismunandi m\u00e6lingar \u00e1 stafr\u00e6nni geymslu. MB er byggt \u00e1 10 veldi (1 MB = 1.000.000 b\u00e6ti), en MiB er byggt \u00e1 2 veldi (1 MiB = 1.048.576 b\u00e6ti). Flest st\u00fdrikerfi s\u00fdna st\u00e6r\u00f0ir \u00ed MiB en merkja \u00fe\u00e6r sem MB, sem getur valdi\u00f0 ruglingi. Reikniv\u00e9lin okkar notar tv\u00f6falda kerfi\u00f0 (MiB) en s\u00fdnir algengu MB n\u00f3tuna fyrir betri skilning notenda.<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"faq-item\">\n                <h3 class=\"faq-question\">\n                    <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n                    Af hverju s\u00fdnir skr\u00e1in m\u00edn a\u00f0ra st\u00e6r\u00f0 \u00ed Windows og macOS?\n                <\/h3>\n                <div class=\"faq-answer\">\n                    <p>Windows og macOS reikna \u00fat og birta skr\u00e1arst\u00e6r\u00f0ir \u00e1 annan h\u00e1tt. Windows s\u00fdnir venjulega skr\u00e1arst\u00e6r\u00f0ir \u00e1 tv\u00f6faldri sni\u00f0i (2 m\u00e1ttur) \u00e1 me\u00f0an macOS notar aukastafasni\u00f0 (vald upp \u00e1 10) \u00ed Finder. A\u00f0 auki gera mismunandi st\u00fdrikerfi grein fyrir l\u00fdsig\u00f6gnum skr\u00e1a og \u00fathlutun disks \u00e1 mismunandi h\u00e1tt. Skr\u00e1ast\u00e6r\u00f0arreikniv\u00e9lin okkar notar samr\u00e6mdar m\u00e6lingar til a\u00f0 veita n\u00e1kv\u00e6mar uppl\u00fdsingar um skr\u00e1arst\u00e6r\u00f0 \u00e1 milli palla.<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"faq-item\">\n                <h3 class=\"faq-question\">\n                    <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n                    Hvernig get \u00e9g minnka\u00f0 skr\u00e1arst\u00e6r\u00f0?\n                <\/h3>\n                <div class=\"faq-answer\">\n                    <p>\u00dea\u00f0 eru nokkrar lei\u00f0ir til a\u00f0 minnka skr\u00e1arst\u00e6r\u00f0: \u00fejappa skr\u00e1m me\u00f0 ZIP e\u00f0a \u00f6\u00f0rum skjalasni\u00f0um, nota myndf\u00ednstillingarverkf\u00e6ri fyrir myndir, breyta myndb\u00f6ndum \u00ed skilvirkari merkjam\u00e1l eins og H.265, nota s\u00e9rh\u00e6f\u00f0an skr\u00e1ar\u00fej\u00f6ppunarhugb\u00fana\u00f0, fjarl\u00e6gja \u00f3\u00fearfa efni \u00far skj\u00f6lum og nota skr\u00e1arsni\u00f0sbreytir sem framlei\u00f0a sm\u00e6rri \u00fattak. Besta a\u00f0fer\u00f0in fer eftir skr\u00e1arger\u00f0inni og s\u00e9rst\u00f6kum \u00fe\u00f6rfum \u00fe\u00ednum.<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"faq-item\">\n                <h3 class=\"faq-question\">\n                    <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n                    Eru skr\u00e1rnar m\u00ednar \u00f6ruggar \u00feegar \u00e9g nota \u00feessa reikniv\u00e9l?\n                <\/h3>\n                <div class=\"faq-answer\">\n                    <p>Algj\u00f6rlega. Skr\u00e1ast\u00e6r\u00f0arreikniv\u00e9lin okkar vinnur allar skr\u00e1r \u00e1 sta\u00f0num \u00ed vafranum \u00fe\u00ednum. Skr\u00e1rnar \u00fe\u00ednar fara aldrei \u00far t\u00e6kinu \u00fe\u00ednu e\u00f0a hla\u00f0ast upp \u00e1 einhvern net\u00fej\u00f3n. Reikniv\u00e9lin les einfaldlega l\u00fdsig\u00f6gn skr\u00e1anna \u00feinna til a\u00f0 \u00e1kvar\u00f0a st\u00e6r\u00f0 \u00feeirra, \u00e1n \u00feess a\u00f0 f\u00e1 a\u00f0gang a\u00f0 e\u00f0a geyma raunverulegt innihald. \u00deetta gerir \u00fea\u00f0 alveg \u00f6ruggt fyrir vi\u00f0kv\u00e6mar e\u00f0a tr\u00fana\u00f0arskr\u00e1r.<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"faq-item\">\n                <h3 class=\"faq-question\">\n                    <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n                    Af hverju er skr\u00e1arst\u00e6r\u00f0in m\u00edn st\u00e6rri en b\u00faist var vi\u00f0?\n                <\/h3>\n                <div class=\"faq-answer\">\n                    <p>Skr\u00e1r geta veri\u00f0 st\u00e6rri en b\u00faist var vi\u00f0 af \u00fdmsum \u00e1st\u00e6\u00f0um: falin l\u00fdsig\u00f6gn, \u00f3hagkv\u00e6m k\u00f3\u00f0un, innbygg\u00f0 tilf\u00f6ng eins og leturger\u00f0ir e\u00f0a myndir, \u00fathlutunarstu\u00f0lar diska (skr\u00e1r eru geymdar \u00ed f\u00f6stum \u201ekubbum\u201c \u00e1 disknum) og munur \u00e1 st\u00fdrikerfi \u00ed st\u00e6r\u00f0arsk\u00fdrslu. Ef skr\u00e1 vir\u00f0ist \u00f3venju st\u00f3r skaltu \u00edhuga a\u00f0 nota sam\u00fej\u00f6ppunart\u00f3l e\u00f0a f\u00ednstillingu sem eru h\u00f6nnu\u00f0 fyrir \u00fe\u00e1 tilteknu skr\u00e1arger\u00f0.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n    \n    <!-- SEO-friendly content section -->\n    <section class=\"additional-info-section\">\n        <div class=\"info-container\">\n            <div class=\"article-card\">\n                <h3 class=\"article-title\">Mikilv\u00e6gi \u00feess a\u00f0 skilja skr\u00e1arst\u00e6r\u00f0ir \u00ed stafr\u00e6nni efnisstj\u00f3rnun<\/h3>\n                <div class=\"article-content\">\n                    <p>\u00cd stafr\u00e6num heimi n\u00fat\u00edmans er skilningur \u00e1 skr\u00e1arst\u00e6r\u00f0um nau\u00f0synlegur fyrir skilvirka efnisstj\u00f3rnun. Hvort sem \u00fe\u00fa ert vefh\u00f6nnu\u00f0ur sem f\u00ednstillir eignir fyrir hra\u00f0ari s\u00ed\u00f0uhle\u00f0slu, lj\u00f3smyndari sem stj\u00f3rnar miklu safni mynda e\u00f0a einfaldlega t\u00f6lvunotandi sem reynir a\u00f0 n\u00fdta geymslupl\u00e1ssi\u00f0 \u00feitt sem best, a\u00f0 vita n\u00e1kv\u00e6mlega hversu st\u00f3rar skr\u00e1rnar \u00fe\u00ednar eru getur b\u00e6tt vinnufl\u00e6\u00f0i\u00f0 \u00feitt verulega.<\/p>\n                    \n                    <p>Skr\u00e1arst\u00e6r\u00f0ir hafa bein \u00e1hrif \u00e1 nokkra \u00fe\u00e6tti stafr\u00e6nnar vinnu:<\/p>\n                    \n                    <ul class=\"article-list\">\n                        <li><strong>Skipulag geymslu<\/strong>: Sp\u00e1 n\u00e1kv\u00e6mlega fyrir um geymslu\u00fe\u00f6rf fyrir afrit, sk\u00fdja\u00fej\u00f3nustu e\u00f0a l\u00edkamlega drif<\/li>\n                        <li><strong>Flutningshra\u00f0i<\/strong>: \u00c1\u00e6tla upphle\u00f0slu- og ni\u00f0urhalst\u00edma fyrir skr\u00e1r sem deilt er \u00e1 netinu<\/li>\n                        <li><strong>Frammista\u00f0a vefs\u00ed\u00f0u<\/strong>: Hagr\u00e6\u00f0ing vefeigna fyrir hra\u00f0ari hle\u00f0slut\u00edma og betri notendaupplifun<\/li>\n                        <li><strong>Vi\u00f0hengi \u00ed t\u00f6lvup\u00f3sti<\/strong>: Tryggja a\u00f0 skr\u00e1r haldist innan st\u00e6r\u00f0armarka sem t\u00f6lvup\u00f3stveitur setja<\/li>\n                        <li><strong>Afk\u00f6st ums\u00f3knar<\/strong>: Stj\u00f3rna au\u00f0lindanotkun \u00feegar unni\u00f0 er me\u00f0 st\u00f3rar skr\u00e1r<\/li>\n                    <\/ul>\n                    \n                    <p>Skr\u00e1ast\u00e6r\u00f0arreikniv\u00e9lin okkar veitir augnablik s\u00fdnileika n\u00e1kv\u00e6mlega hversu miki\u00f0 pl\u00e1ss skr\u00e1rnar \u00fe\u00ednar taka, og hj\u00e1lpar \u00fe\u00e9r a\u00f0 taka uppl\u00fdstar \u00e1kvar\u00f0anir um geymslu, samn\u00fdtingu og hagr\u00e6\u00f0ingu. Me\u00f0 \u00fev\u00ed einfaldlega a\u00f0 draga og sleppa skr\u00e1m \u00e1 reikniv\u00e9lina getur\u00f0u strax s\u00e9\u00f0 st\u00e6r\u00f0ir \u00feeirra \u00ed \u00fdmsum einingum (b\u00e6ti, k\u00edl\u00f3b\u00e6t, megab\u00e6ti o.s.frv.) og skili\u00f0 hlutfallsleg hlutf\u00f6ll \u00feeirra \u00ed gegnum sj\u00f3nr\u00e6na framsetningu.<\/p>\n                    \n                    <p>\u00deetta t\u00f3l er s\u00e9rstaklega d\u00fdrm\u00e6tt fyrir:<\/p>\n                    \n                    <ul class=\"article-list\">\n                        <li><strong>Vefh\u00f6nnu\u00f0ir<\/strong> sem \u00feurfa a\u00f0 f\u00ednstilla myndir, myndb\u00f6nd og a\u00f0rar eignir fyrir hra\u00f0ari hle\u00f0slu s\u00ed\u00f0a<\/li>\n                        <li><strong>Efnish\u00f6fundar<\/strong> umsj\u00f3n me\u00f0 st\u00f3rum s\u00f6fnum mi\u00f0lunarskr\u00e1a<\/li>\n                        <li><strong>Uppl\u00fdsingat\u00e6knifr\u00e6\u00f0ingar<\/strong> skipuleggja geymslukr\u00f6fur og \u00fathlutun netbandbreiddar<\/li>\n                        <li><strong>Nemendur og kennarar<\/strong> vinna me\u00f0 skr\u00e1arst\u00e6r\u00f0artakmarkanir fyrir innsendingar og sameiginleg au\u00f0lindir<\/li>\n                        <li><strong>Hver sem er<\/strong> sem \u00fearf a\u00f0 skilja stafr\u00e6na geymslunotkun s\u00edna betur<\/li>\n                    <\/ul>\n                    \n                    <p>Me\u00f0 reikniv\u00e9linni okkar ver\u00f0ur a\u00f0 \u00e1kvar\u00f0a skr\u00e1arst\u00e6r\u00f0ir einfalt, lei\u00f0andi ferli sem veitir d\u00fdrm\u00e6ta inns\u00fdn \u00ed stafr\u00e6na efni\u00f0 \u00feitt, sem hj\u00e1lpar \u00fe\u00e9r a\u00f0 h\u00e1marka geymslu, b\u00e6ta afk\u00f6st og stj\u00f3rna au\u00f0lindum \u00e1 skilvirkari h\u00e1tt.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <style>\n        \/* Main Styles *\/\n        :root {\n            --primary-color: #FD9800;\n            --primary-hover: #e88a00;\n            --text-color: #3A3A3A;\n            --light-bg: #f8faff;\n            --gradient-bg: linear-gradient(135deg, #f8faff 0%, #fff5e6 100%);\n            --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n            --hover-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n            --border-color: #f1f5f9;\n        }\n\n        .file-size-calculator-section {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 2rem 1.5rem;\n            font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;\n            color: var(--text-color);\n        }\n\n        \/* Hero Section *\/\n        .hero-section {\n            text-align: center;\n            padding: 3rem 1rem;\n            margin-bottom: 3rem;\n            background: var(--gradient-bg);\n            border-radius: 16px;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .hero-pattern {\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fd9800' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\n            opacity: 0.5;\n            z-index: 0;\n        }\n\n        .hero-content {\n            position: relative;\n            z-index: 1;\n            max-width: 800px;\n            margin: 0 auto;\n        }\n\n        .hero-title {\n            font-size: 2.8rem;\n            font-weight: 800;\n            margin-bottom: 1.5rem;\n            color: var(--text-color);\n        }\n\n        .hero-subtitle {\n            font-size: 1.25rem;\n            margin-bottom: 2rem;\n            color: var(--text-color);\n            line-height: 1.6;\n        }\n\n        .hero-badges {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n            gap: 1rem;\n            margin-bottom: 2rem;\n        }\n\n        .hero-badge {\n            display: flex;\n            align-items: center;\n            background: white;\n            border-radius: 50px;\n            padding: 0.5rem 1rem;\n            box-shadow: var(--box-shadow);\n            transition: all 0.3s ease;\n            border: 1px solid var(--border-color);\n        }\n\n        .hero-badge:hover {\n            transform: translateY(-3px);\n            box-shadow: var(--hover-shadow);\n            border-color: rgba(253, 152, 0, 0.3);\n        }\n\n        .hero-badge-icon {\n            color: var(--primary-color);\n            margin-right: 0.5rem;\n            font-size: 1rem;\n        }\n\n        .hero-badge-text {\n            font-size: 0.9rem;\n            font-weight: 600;\n            color: var(--text-color);\n        }\n\n        \/* Calculator Section *\/\n        .calculator-section {\n            margin-bottom: 4rem;\n        }\n\n        .calculator-container {\n            background: white;\n            border-radius: 16px;\n            padding: 2rem;\n            box-shadow: var(--box-shadow);\n            border: 1px solid var(--border-color);\n        }\n\n        .drop-area {\n            border: 2px dashed var(--border-color);\n            border-radius: 12px;\n            padding: 3rem;\n            text-align: center;\n            transition: all 0.3s ease;\n            background-color: var(--light-bg);\n            position: relative;\n            min-height: 250px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .drop-area.active {\n            border-color: var(--primary-color);\n            background-color: rgba(253, 152, 0, 0.05);\n            transform: scale(0.99);\n        }\n\n        .drop-icon {\n            font-size: 3.5rem;\n            color: var(--primary-color);\n            margin-bottom: 1.5rem;\n            transition: all 0.3s ease;\n        }\n\n        .drop-area.active .drop-icon {\n            transform: scale(1.1);\n            color: var(--primary-hover);\n        }\n\n        .drop-title {\n            font-size: 1.5rem;\n            font-weight: 700;\n            margin-bottom: 0.75rem;\n            color: var(--text-color);\n        }\n\n        .drop-subtitle {\n            font-size: 1rem;\n            margin-bottom: 1rem;\n            color: #666;\n        }\n\n        .drop-instructions {\n            margin-top: 1.5rem;\n            font-size: 0.9rem;\n            color: #666;\n        }\n\n        .results-container {\n            margin-top: 2rem;\n            transition: all 0.5s ease;\n            opacity: 1;\n            animation: fadeIn 0.5s ease-in-out;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        .results-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 1.5rem;\n        }\n\n        .results-title {\n            font-size: 1.3rem;\n            font-weight: 700;\n            color: var(--text-color);\n            margin: 0;\n        }\n\n        .summary-card {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 1rem;\n            margin-bottom: 2rem;\n            background: var(--light-bg);\n            border-radius: 12px;\n            padding: 1.5rem;\n            border: 1px solid var(--border-color);\n        }\n\n        .summary-item {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .summary-label {\n            font-size: 0.9rem;\n            color: #666;\n            margin-bottom: 0.5rem;\n        }\n\n        .summary-value {\n            font-size: 1.5rem;\n            font-weight: 700;\n            color: var(--text-color);\n        }\n\n        .size-chart-container {\n            margin-bottom: 2rem;\n            height: 300px;\n            position: relative;\n        }\n\n        .file-table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-top: 1.5rem;\n        }\n\n        .file-table th, \n        .file-table td {\n            padding: 0.75rem 1rem;\n            text-align: left;\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        .file-table th {\n            background-color: var(--light-bg);\n            font-weight: 600;\n            color: var(--text-color);\n            position: sticky;\n            top: 0;\n        }\n\n        .file-table tbody tr:hover {\n            background-color: rgba(253, 152, 0, 0.05);\n        }\n\n        \/* Features Section *\/\n        .features-section {\n            margin-bottom: 4rem;\n        }\n\n        .section-title {\n            font-size: 2.2rem;\n            font-weight: 700;\n            text-align: center;\n            margin-bottom: 2.5rem;\n            color: var(--text-color);\n        }\n\n        .features-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 2rem;\n        }\n\n        .feature-card {\n            background: white;\n            border-radius: 16px;\n            overflow: hidden;\n            box-shadow: var(--box-shadow);\n            transition: all 0.3s ease;\n            border: 1px solid var(--border-color);\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .feature-card:hover {\n            transform: translateY(-5px);\n            box-shadow: var(--hover-shadow);\n            border-color: rgba(253, 152, 0, 0.3);\n        }\n\n        .feature-icon {\n            width: 60px;\n            height: 60px;\n            background-color: rgba(253, 152, 0, 0.15);\n            color: var(--primary-color);\n            border-radius: 12px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-bottom: 1.5rem;\n            font-size: 1.8rem;\n            transition: all 0.3s ease;\n        }\n\n        .feature-card:hover .feature-icon {\n            background: linear-gradient(135deg, #FD9800 0%, #FF6D00 100%);\n            color: white;\n            box-shadow: 0 10px 20px rgba(253, 152, 0, 0.2);\n        }\n\n        .feature-content {\n            padding: 2rem;\n            flex-grow: 1;\n        }\n\n        .feature-title {\n            font-size: 1.4rem;\n            font-weight: 700;\n            margin-bottom: 1rem;\n            color: var(--text-color);\n        }\n\n        .feature-text {\n            font-size: 1rem;\n            color: #555;\n            line-height: 1.6;\n            margin-bottom: 1.5rem;\n        }\n\n        .feature-list {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        .feature-item {\n            display: flex;\n            align-items: flex-start;\n            margin-bottom: 0.75rem;\n            line-height: 1.5;\n        }\n\n        .feature-check {\n            color: var(--primary-color);\n            margin-right: 0.75rem;\n            flex-shrink: 0;\n            margin-top: 0.2rem;\n        }\n\n        .feature-item-text {\n            font-size: 0.95rem;\n            color: var(--text-color);\n        }\n\n        \/* File Sizes Section *\/\n        .file-sizes-section {\n            margin-bottom: 4rem;\n        }\n\n        .info-container {\n            margin-bottom: 2rem;\n        }\n\n        .info-card {\n            background: white;\n            border-radius: 16px;\n            padding: 2rem;\n            box-shadow: var(--box-shadow);\n            border: 1px solid var(--border-color);\n            margin-bottom: 2rem;\n        }\n\n        .info-title {\n            font-size: 1.5rem;\n            font-weight: 700;\n            margin-bottom: 1.5rem;\n            color: var(--text-color);\n            display: flex;\n            align-items: center;\n        }\n\n        .info-title i {\n            color: var(--primary-color);\n            margin-right: 0.75rem;\n        }\n\n        .info-text {\n            font-size: 1rem;\n            margin-bottom: 1.5rem;\n            color: #555;\n            line-height: 1.6;\n        }\n\n        .info-table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-bottom: 1rem;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            overflow: hidden;\n        }\n\n        .info-table th,\n        .info-table td {\n            padding: 0.75rem 1rem;\n            text-align: left;\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        .info-table th {\n            background-color: var(--light-bg);\n            font-weight: 600;\n            color: var(--text-color);\n        }\n\n        .info-table tr:last-child td {\n            border-bottom: none;\n        }\n\n        .info-table tr:hover td {\n            background-color: rgba(253, 152, 0, 0.05);\n        }\n\n        .file-types-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n            gap: 1.5rem;\n        }\n\n        .file-type-item {\n            display: flex;\n            align-items: flex-start;\n            padding: 1.25rem;\n            background-color: var(--light-bg);\n            border-radius: 12px;\n            border: 1px solid var(--border-color);\n            transition: all 0.3s ease;\n        }\n\n        .file-type-item:hover {\n            transform: translateY(-3px);\n            box-shadow: var(--hover-shadow);\n            border-color: rgba(253, 152, 0, 0.3);\n        }\n\n        .file-type-icon {\n            background-color: white;\n            width: 40px;\n            height: 40px;\n            border-radius: 10px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            color: var(--primary-color);\n            font-size: 1.2rem;\n            flex-shrink: 0;\n            border: 1px solid var(--border-color);\n        }\n\n        .file-type-content {\n            flex: 1;\n        }\n\n        .file-type-name {\n            font-size: 1rem;\n            font-weight: 700;\n            margin: 0 0 0.5rem 0;\n            color: var(--text-color);\n        }\n\n        .file-type-desc {\n            font-size: 0.85rem;\n            color: #666;\n            margin: 0 0 0.5rem 0;\n        }\n\n        .file-type-size {\n            font-size: 0.9rem;\n            font-weight: 600;\n            color: var(--primary-color);\n            margin: 0;\n        }\n\n        \/* FAQ Section *\/\n        .faq-section {\n            margin-bottom: 4rem;\n        }\n\n        .faq-container {\n            max-width: 900px;\n            margin: 0 auto;\n        }\n\n        .faq-item {\n            background: white;\n            border-radius: 16px;\n            padding: 1.5rem 2rem;\n            box-shadow: var(--box-shadow);\n            margin-bottom: 1.5rem;\n            border: 1px solid var(--border-color);\n            transition: all 0.3s ease;\n        }\n\n        .faq-item:hover {\n            transform: translateY(-3px);\n            box-shadow: var(--hover-shadow);\n            border-color: rgba(253, 152, 0, 0.3);\n        }\n\n        .faq-question {\n            font-size: 1.2rem;\n            font-weight: 700;\n            margin-bottom: 1rem;\n            color: var(--text-color);\n            display: flex;\n            align-items: center;\n        }\n\n        .faq-icon {\n            color: var(--primary-color);\n            margin-right: 0.75rem;\n            font-size: 1.2rem;\n        }\n\n        .faq-answer {\n            font-size: 1rem;\n            color: #555;\n            line-height: 1.6;\n        }\n\n        \/* Additional Info Section *\/\n        .additional-info-section {\n            margin-bottom: 2rem;\n        }\n\n        .article-card {\n            background: white;\n            border-radius: 16px;\n            padding: 2rem;\n            box-shadow: var(--box-shadow);\n            border: 1px solid var(--border-color);\n        }\n\n        .article-title {\n            font-size: 1.6rem;\n            font-weight: 700;\n            margin-bottom: 1.5rem;\n            color: var(--text-color);\n        }\n\n        .article-content {\n            font-size: 1rem;\n            color: #555;\n            line-height: 1.7;\n        }\n\n        .article-content p {\n            margin-bottom: 1.5rem;\n        }\n\n        .article-list {\n            padding-left: 1.5rem;\n            margin-bottom: 1.5rem;\n        }\n\n        .article-list li {\n            margin-bottom: 0.75rem;\n        }\n\n        \/* Button Styles *\/\n        .btn {\n            display: inline-block;\n            padding: 0.75rem 1.5rem;\n            border-radius: 8px;\n            font-weight: 600;\n            text-decoration: none !important;\n            transition: all 0.3s ease;\n            cursor: pointer;\n            font-size: 1rem;\n            border: none;\n        }\n\n        .btn:hover, .btn:focus, .btn:active {\n            text-decoration: none !important;\n        }\n\n        .btn-primary {\n            background-color: var(--primary-color);\n            color: white !important;\n            box-shadow: 0 8px 16px rgba(253, 152, 0, 0.2);\n            border: none;\n        }\n\n        .btn-primary:hover {\n            background-color: var(--primary-hover);\n            transform: translateY(-2px);\n            text-decoration: none !important;\n        }\n\n        .btn-secondary {\n            background-color: white;\n            color: var(--primary-color) !important;\n            border: 1px solid var(--border-color);\n        }\n\n        .btn-secondary:hover {\n            background-color: #fff5e6;\n            transform: translateY(-2px);\n            text-decoration: none !important;\n        }\n\n        .btn-sm {\n            padding: 0.5rem 1rem;\n            font-size: 0.9rem;\n        }\n\n        \/* Responsive Styles *\/\n        @media (max-width: 768px) {\n            .hero-title {\n                font-size: 2.2rem;\n            }\n            \n            .section-title {\n                font-size: 1.8rem;\n            }\n            \n            .features-grid {\n                grid-template-columns: 1fr;\n                max-width: 500px;\n                margin: 0 auto;\n            }\n            \n            .file-types-grid {\n                grid-template-columns: 1fr;\n            }\n            \n            .drop-area {\n                padding: 2rem 1rem;\n            }\n            \n            .summary-card {\n                grid-template-columns: 1fr 1fr;\n            }\n            \n            .file-table {\n                display: block;\n                overflow-x: auto;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .hero-title {\n                font-size: 1.8rem;\n            }\n            \n            .hero-subtitle {\n                font-size: 1.1rem;\n            }\n            \n            .section-title {\n                font-size: 1.6rem;\n            }\n            \n            .feature-content {\n                padding: 1.5rem;\n            }\n            \n            .calculator-container {\n                padding: 1.5rem;\n            }\n            \n            .info-card {\n                padding: 1.5rem;\n            }\n            \n            .summary-card {\n                grid-template-columns: 1fr;\n            }\n            \n            .drop-icon {\n                font-size: 2.5rem;\n            }\n        }\n    <\/style>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ DOM elements\n            const dropArea = document.getElementById('drop-area');\n            const fileInput = document.getElementById('file-input');\n            const fileSelectBtn = document.getElementById('file-select-btn');\n            const resultsContainer = document.getElementById('results-container');\n            const fileList = document.getElementById('file-list');\n            const totalFiles = document.getElementById('total-files');\n            const totalSize = document.getElementById('total-size');\n            const averageSize = document.getElementById('average-size');\n            const largestFile = document.getElementById('largest-file');\n            const clearResultsBtn = document.getElementById('clear-results');\n            let sizeChart = null;\n\n            \/\/ Event listeners\n            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {\n                dropArea.addEventListener(eventName, preventDefaults, false);\n            });\n\n            ['dragenter', 'dragover'].forEach(eventName => {\n                dropArea.addEventListener(eventName, highlight, false);\n            });\n\n            ['dragleave', 'drop'].forEach(eventName => {\n                dropArea.addEventListener(eventName, unhighlight, false);\n            });\n\n            dropArea.addEventListener('drop', handleDrop, false);\n            fileSelectBtn.addEventListener('click', () => fileInput.click());\n            fileInput.addEventListener('change', handleFiles);\n            clearResultsBtn.addEventListener('click', clearResults);\n\n            \/\/ Functions\n            function preventDefaults(e) {\n                e.preventDefault();\n                e.stopPropagation();\n            }\n\n            function highlight() {\n                dropArea.classList.add('active');\n            }\n\n            function unhighlight() {\n                dropArea.classList.remove('active');\n            }\n\n            function handleDrop(e) {\n                const dt = e.dataTransfer;\n                const files = dt.files;\n                handleFiles({ target: { files: files } });\n            }\n\n            function handleFiles(e) {\n                const files = e.target.files;\n                if (files.length === 0) return;\n\n                \/\/ Show results container\n                resultsContainer.style.display = 'block';\n\n                \/\/ Process files\n                processFiles(files);\n            }\n\n            function processFiles(files) {\n                \/\/ Clear previous results\n                fileList.innerHTML = '';\n                \n                \/\/ Initialize variables for statistics\n                let totalSizeBytes = 0;\n                let maxSize = 0;\n                let maxSizeFile = '';\n                const fileTypes = {};\n                const fileDetails = [];\n\n                \/\/ Process each file\n                for (let i = 0; i < files.length; i++) {\n                    const file = files[i];\n                    const size = file.size;\n                    const fileExtension = file.name.split('.').pop().toLowerCase();\n                    \n                    \/\/ Add to total size\n                    totalSizeBytes += size;\n                    \n                    \/\/ Check if this is the largest file\n                    if (size > maxSize) {\n                        maxSize = size;\n                        maxSizeFile = file.name;\n                    }\n                    \n                    \/\/ Count file types\n                    fileTypes[fileExtension] = (fileTypes[fileExtension] || 0) + 1;\n                    \n                    \/\/ Store file details for later\n                    fileDetails.push({\n                        name: file.name,\n                        type: file.type || fileExtension,\n                        size: size\n                    });\n                    \n                    \/\/ Create table row\n                    const row = document.createElement('tr');\n                    row.innerHTML = `\n                        <td>${file.name}<\/td>\n                        <td>${file.type || fileExtension}<\/td>\n                        <td>${size}<\/td>\n                        <td>${(size \/ 1024).toFixed(2)}<\/td>\n                        <td>${(size \/ (1024 * 1024)).toFixed(2)}<\/td>\n                    `;\n                    fileList.appendChild(row);\n                }\n                \n                \/\/ Update summary statistics\n                totalFiles.textContent = files.length;\n                totalSize.textContent = formatSize(totalSizeBytes);\n                averageSize.textContent = formatSize(totalSizeBytes \/ files.length);\n                largestFile.textContent = formatSize(maxSize);\n                \n                \/\/ Create the chart\n                createSizeChart(fileDetails);\n                \n                \/\/ Add animation to results\n                resultsContainer.classList.add('fade-in');\n                setTimeout(() => {\n                    resultsContainer.classList.remove('fade-in');\n                }, 500);\n            }\n\n            function formatSize(bytes) {\n                const units = ['B', 'KB', 'MB', 'GB', 'TB'];\n                let size = bytes;\n                let unitIndex = 0;\n                \n                while (size >= 1024 && unitIndex < units.length - 1) {\n                    size \/= 1024;\n                    unitIndex++;\n                }\n                \n                return `${size.toFixed(2)} ${units[unitIndex]}`;\n            }\n\n            function createSizeChart(fileDetails) {\n                \/\/ Sort files by size (descending)\n                fileDetails.sort((a, b) => b.size - a.size);\n                \n                \/\/ Take the top 10 files\n                const topFiles = fileDetails.slice(0, 10);\n                \n                \/\/ Prepare data for the chart\n                const labels = topFiles.map(file => {\n                    \/\/ Truncate long file names\n                    return file.name.length > 20 ? file.name.substring(0, 17) + '...' : file.name;\n                });\n                \n                const data = topFiles.map(file => file.size);\n                \n                \/\/ Get the canvas context\n                const ctx = document.getElementById('size-chart').getContext('2d');\n                \n                \/\/ Destroy previous chart if it exists\n                if (sizeChart) {\n                    sizeChart.destroy();\n                }\n                \n                \/\/ Create a simple bar chart (we're simulating this without an actual chart library)\n                \/\/ In a real implementation, you would use Chart.js or a similar library\n                const chartWidth = ctx.canvas.width;\n                const chartHeight = ctx.canvas.height;\n                const barWidth = chartWidth \/ (labels.length * 2);\n                const maxValue = Math.max(...data);\n                \n                \/\/ Clear the canvas\n                ctx.clearRect(0, 0, chartWidth, chartHeight);\n                \n                \/\/ Draw bars\n                for (let i = 0; i < labels.length; i++) {\n                    const x = i * (barWidth * 2) + barWidth \/ 2;\n                    const barHeight = (data[i] \/ maxValue) * (chartHeight - 60);\n                    const y = chartHeight - barHeight - 30;\n                    \n                    \/\/ Draw bar\n                    ctx.fillStyle = '#FD9800';\n                    ctx.fillRect(x, y, barWidth, barHeight);\n                    \n                    \/\/ Draw label\n                    ctx.fillStyle = '#3A3A3A';\n                    ctx.font = '10px Arial';\n                    ctx.textAlign = 'center';\n                    ctx.fillText(labels[i], x + barWidth \/ 2, chartHeight - 10);\n                    \n                    \/\/ Draw value\n                    ctx.fillStyle = '#3A3A3A';\n                    ctx.font = '12px Arial';\n                    ctx.textAlign = 'center';\n                    ctx.fillText(formatSize(data[i]), x + barWidth \/ 2, y - 5);\n                }\n            }\n\n            function clearResults() {\n                resultsContainer.style.display = 'none';\n                fileList.innerHTML = '';\n                fileInput.value = '';\n                \n                \/\/ Reset summary statistics\n                totalFiles.textContent = '0';\n                totalSize.textContent = '0 B';\n                averageSize.textContent = '0 B';\n                largestFile.textContent = '0 B';\n                \n                \/\/ Clear the chart\n                const ctx = document.getElementById('size-chart').getContext('2d');\n                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n                \n                if (sizeChart) {\n                    sizeChart.destroy();\n                    sizeChart = null;\n                }\n            }\n        });\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Reikniv\u00e9l fyrir skr\u00e1arst\u00e6r\u00f0 M\u00e6ldu og greindu skr\u00e1arst\u00e6r\u00f0 \u00fe\u00edna samstundis me\u00f0 \u00f6flugu draga-og-sleppa reikniv\u00e9linni okkar. Fullkomi\u00f0 til a\u00f0 skilja kr\u00f6fur um [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3561","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"convertify","author_link":"https:\/\/convertifypro.com\/author\/convertifypro\/"},"uagb_comment_info":0,"uagb_excerpt":"Reikniv\u00e9l fyrir skr\u00e1arst\u00e6r\u00f0 M\u00e6ldu og greindu skr\u00e1arst\u00e6r\u00f0 \u00fe\u00edna samstundis me\u00f0 \u00f6flugu draga-og-sleppa reikniv\u00e9linni okkar. Fullkomi\u00f0 til a\u00f0 skilja kr\u00f6fur um [&hellip;]","_links":{"self":[{"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/pages\/3561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/comments?post=3561"}],"version-history":[{"count":0,"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/pages\/3561\/revisions"}],"wp:attachment":[{"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/media?parent=3561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}