Fullkomin lei\u00f0arv\u00edsir fyrir f\u00ednstillingu vefmynda: Sni\u00f0, \u00fej\u00f6ppun og hra\u00f0i<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\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 .guide-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 .hero-buttons {\n display: flex;\n justify-content: center;\n gap: 1rem;\n flex-wrap: wrap;\n }\n\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 }\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 \/* 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 \/* Why Convert Section *\/\n .why-convert-section {\n margin-bottom: 4rem;\n background: var(--light-bg);\n border-radius: 16px;\n padding: 3rem 2rem;\n }\n\n .comparison-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n }\n\n .format-card {\n background: white;\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: var(--box-shadow);\n transition: all 0.3s ease;\n border: 1px solid var(--border-color);\n }\n\n .format-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--hover-shadow);\n border-color: rgba(253, 152, 0, 0.3);\n }\n\n .format-title {\n font-size: 1.6rem;\n font-weight: 700;\n margin-bottom: 1.25rem;\n color: var(--text-color);\n display: flex;\n align-items: center;\n }\n\n .format-icon {\n color: var(--primary-color);\n margin-right: 0.75rem;\n font-size: 1.6rem;\n }\n\n .format-list {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .format-item {\n display: flex;\n align-items: flex-start;\n margin-bottom: 0.85rem;\n }\n\n .format-check {\n color: var(--primary-color);\n margin-right: 0.75rem;\n flex-shrink: 0;\n margin-top: 0.2rem;\n }\n\n .format-text {\n font-size: 0.95rem;\n color: #555;\n line-height: 1.5;\n }\n\n \/* How It Works Section *\/\n .how-it-works-section {\n margin-bottom: 4rem;\n }\n\n .steps-container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .step-card {\n display: flex;\n align-items: flex-start;\n background: white;\n border-radius: 16px;\n padding: 2rem;\n box-shadow: var(--box-shadow);\n margin-bottom: 2rem;\n border: 1px solid var(--border-color);\n transition: all 0.3s ease;\n }\n\n .step-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--hover-shadow);\n border-color: rgba(253, 152, 0, 0.3);\n }\n\n .step-number {\n width: 50px;\n height: 50px;\n background-color: rgba(253, 152, 0, 0.15);\n color: var(--primary-color);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n font-weight: 700;\n margin-right: 1.5rem;\n flex-shrink: 0;\n transition: all 0.3s ease;\n }\n\n .step-card:hover .step-number {\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 .step-content {\n flex: 1;\n }\n\n .step-title {\n font-size: 1.4rem;\n font-weight: 700;\n margin-bottom: 0.75rem;\n color: var(--text-color);\n }\n\n .step-text {\n font-size: 1rem;\n color: #555;\n line-height: 1.6;\n }\n\n \/* Use Cases Section *\/\n .use-cases-section {\n margin-bottom: 4rem;\n background: var(--light-bg);\n border-radius: 16px;\n padding: 3rem 2rem;\n }\n\n .use-cases-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n }\n\n .use-case-card {\n background: white;\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: var(--box-shadow);\n transition: all 0.3s ease;\n border: 1px solid var(--border-color);\n height: 100%;\n }\n\n .use-case-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--hover-shadow);\n border-color: rgba(253, 152, 0, 0.3);\n }\n\n .use-case-icon {\n color: var(--primary-color);\n font-size: 2rem;\n margin-bottom: 1rem;\n }\n\n .use-case-title {\n font-size: 1.3rem;\n font-weight: 700;\n margin-bottom: 1rem;\n color: var(--text-color);\n }\n\n .use-case-text {\n font-size: 0.95rem;\n color: #555;\n line-height: 1.6;\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 \/* Technical Details Section *\/\n .technical-details-section {\n margin-bottom: 4rem;\n }\n\n .technical-details-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n }\n\n .tech-detail-card {\n background: white;\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: var(--box-shadow);\n transition: all 0.3s ease;\n border: 1px solid var(--border-color);\n }\n\n .tech-detail-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--hover-shadow);\n border-color: rgba(253, 152, 0, 0.3);\n }\n\n .tech-detail-title {\n font-size: 1.3rem;\n font-weight: 700;\n margin-bottom: 1rem;\n color: var(--text-color);\n display: flex;\n align-items: center;\n }\n\n .tech-detail-icon {\n color: var(--primary-color);\n margin-right: 0.75rem;\n font-size: 1.3rem;\n }\n\n .tech-detail-text {\n font-size: 0.95rem;\n color: #555;\n line-height: 1.6;\n }\n\n \/* Security Section *\/\n .security-section {\n margin-bottom: 4rem;\n background: var(--light-bg);\n border-radius: 16px;\n padding: 3rem 2rem;\n }\n\n .security-features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n }\n\n .security-card {\n background: white;\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: var(--box-shadow);\n transition: all 0.3s ease;\n border: 1px solid var(--border-color);\n }\n\n .security-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--hover-shadow);\n border-color: rgba(253, 152, 0, 0.3);\n }\n\n .security-title {\n font-size: 1.3rem;\n font-weight: 700;\n margin-bottom: 1rem;\n color: var(--text-color);\n display: flex;\n align-items: center;\n }\n\n .security-icon {\n color: var(--primary-color);\n margin-right: 0.75rem;\n font-size: 1.3rem;\n }\n\n .security-text {\n font-size: 0.95rem;\n color: #555;\n line-height: 1.6;\n }\n\n \/* CTA Section *\/\n .cta-section {\n text-align: center;\n padding: 3rem 1rem;\n background: var(--gradient-bg);\n border-radius: 16px;\n position: relative;\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .cta-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 .cta-content {\n position: relative;\n z-index: 1;\n max-width: 800px;\n margin: 0 auto;\n }\n\n .cta-title {\n font-size: 2.2rem;\n font-weight: 700;\n margin-bottom: 1.5rem;\n color: var(--text-color);\n }\n\n .cta-text {\n font-size: 1.1rem;\n margin-bottom: 2rem;\n color: #555;\n line-height: 1.6;\n }\n\n \/* Guide-specific Styles *\/\n .guide-content {\n background: white;\n border-radius: 16px;\n padding: 2rem;\n margin-bottom: 2rem;\n box-shadow: var(--box-shadow);\n border: 1px solid var(--border-color);\n }\n\n .guide-section-title {\n font-size: 1.6rem;\n font-weight: 700;\n color: var(--text-color);\n margin-bottom: 1rem;\n }\n\n .guide-text {\n font-size: 1rem;\n color: #555;\n line-height: 1.8;\n margin-bottom: 1rem;\n }\n\n .guide-list {\n list-style: none;\n padding: 0;\n margin: 1rem 0;\n }\n\n .guide-list-item {\n display: flex;\n align-items: flex-start;\n margin-bottom: 0.75rem;\n padding-left: 1.5rem;\n position: relative;\n }\n\n .guide-list-item::before {\n content: \"\u2022\";\n color: var(--primary-color);\n font-weight: bold;\n position: absolute;\n left: 0;\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 .cta-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 .step-card {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .step-number {\n margin-bottom: 1rem;\n margin-right: 0;\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 .step-card {\n padding: 1.5rem;\n }\n\n .faq-item {\n padding: 1.25rem;\n }\n }\n\n \/* Button text should never be underlined *\/\n .btn:hover, .btn:focus, .btn:active {\n text-decoration: none !important;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"guide-section\">\n \n <section class=\"hero-section\">\n <div class=\"hero-pattern\"><\/div>\n <div class=\"hero-content\">\n <h1 class=\"hero-title\">Lei\u00f0beiningar um f\u00ednstillingu vefmynda<\/h1>\n <p class=\"hero-subtitle\">Alhli\u00f0a handb\u00f3k til a\u00f0 hj\u00e1lpa \u00fe\u00e9r a\u00f0 skilja lei\u00f0arv\u00edsir um f\u00ednstillingu vefmynda.<\/p>\n\n <div class=\"hero-badges\">\n <div class=\"hero-badge\">\n <span class=\"hero-badge-icon\"><i class=\"fas fa-clock\"><\/i><\/span>\n <span class=\"hero-badge-text\">8 m\u00edn lestur<\/span>\n <\/div>\n <div class=\"hero-badge\">\n <span class=\"hero-badge-icon\"><i class=\"fas fa-book\"><\/i><\/span>\n <span class=\"hero-badge-text\">Fr\u00e6\u00f0slulei\u00f0beiningar<\/span>\n <\/div>\n <div class=\"hero-badge\">\n <span class=\"hero-badge-icon\"><i class=\"fas fa-graduation-cap\"><\/i><\/span>\n <span class=\"hero-badge-text\">R\u00e1\u00f0leggingar s\u00e9rfr\u00e6\u00f0inga<\/span>\n <\/div>\n <\/div>\n\n <div class=\"hero-buttons\">\n <a href=\"#content\" class=\"btn btn-primary\">Byrja\u00f0u a\u00f0 lesa<\/a>\n <a href=\"\/download\" class=\"btn btn-secondary\">S\u00e6kja Convertify<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">A\u00f0 skilja vefmyndasni\u00f0<\/h2>\n <p class=\"guide-text\">A\u00f0 velja r\u00e9tt myndsni\u00f0 er grunnurinn a\u00f0 hagr\u00e6\u00f0ingu vefsins. Hvert sni\u00f0 \u00fej\u00f3nar mismunandi tilgangi og b\u00fd\u00f0ur upp \u00e1 einstaka kosti. JPEG er tilvali\u00f0 fyrir lj\u00f3smyndir og fl\u00f3knar myndir me\u00f0 m\u00f6rgum litum, b\u00fd\u00f0ur upp \u00e1 fram\u00farskarandi \u00fej\u00f6ppunarhlutf\u00f6ll en \u00e1 kostna\u00f0 \u00feess a\u00f0 vera taps\u00e1r. PNG skarar fram \u00far \u00ed myndum me\u00f0 gagns\u00e6i, sk\u00f6rpum br\u00fanum og takm\u00f6rku\u00f0um litat\u00f6flum, sem gerir \u00fea\u00f0 fullkomi\u00f0 fyrir l\u00f3g\u00f3 og graf\u00edk, \u00fe\u00f3 a\u00f0 skr\u00e1arst\u00e6r\u00f0ir hafi tilhneigingu til a\u00f0 vera st\u00e6rri.\n\nWebP t\u00e1knar n\u00e6stu kynsl\u00f3\u00f0 vefmynda, sem veitir fr\u00e1b\u00e6ra \u00fej\u00f6ppun samanbori\u00f0 vi\u00f0 b\u00e6\u00f0i JPEG og PNG \u00e1 me\u00f0an h\u00e1g\u00e6\u00f0a er vi\u00f0haldi\u00f0. \u00dea\u00f0 sty\u00f0ur b\u00e6\u00f0i tapa\u00f0a og taplausa \u00fej\u00f6ppun, gagns\u00e6i og hreyfimyndir. Hins vegar er vafrastu\u00f0ningur, \u00fe\u00f3 hann s\u00e9 umfangsmikill, ekki alhli\u00f0a. AVIF er enn n\u00fdrra og b\u00fd\u00f0ur upp \u00e1 \u00f3venjulegt \u00fej\u00f6ppunarhlutfall sem er allt a\u00f0 50% l\u00e6gra en JPEG, en notkun vafra fer enn vaxandi.\n\nFyrir vektorgraf\u00edk eins og l\u00f3g\u00f3, t\u00e1kn og einfaldar myndir er SVG \u00f3sigrandi. Sem vektorsni\u00f0 skalast SVG myndir \u00f3endanlega \u00e1n g\u00e6\u00f0ataps og hafa oft \u00f6rsm\u00e1ar skr\u00e1arst\u00e6r\u00f0ir. \u00deeir eru l\u00edka breytanlegir me\u00f0 k\u00f3\u00f0a og sty\u00f0ja gagnvirkni, sem gerir \u00fe\u00e1 \u00f3tr\u00falega fj\u00f6lh\u00e6fa fyrir n\u00fat\u00edma vefh\u00f6nnun.<\/p>\n <ul class='guide-list'><li class='guide-list-item'>JPEG: Best fyrir lj\u00f3smyndir og fl\u00f3knar myndir<\/li><li class='guide-list-item'>PNG: Tilvali\u00f0 fyrir graf\u00edk me\u00f0 gagns\u00e6i og sk\u00f6rpum br\u00fanum<\/li><li class='guide-list-item'>WebP: N\u00fat\u00edmalegt sni\u00f0 me\u00f0 fr\u00e1b\u00e6rri \u00fej\u00f6ppun<\/li><li class='guide-list-item'>AVIF: N\u00fdjasta sni\u00f0i\u00f0 me\u00f0 \u00f3venjulegri \u00fej\u00f6ppun<\/li><li class='guide-list-item'>SVG: Fullkomi\u00f0 fyrir stigst\u00e6r\u00f0 vektorgraf\u00edk og t\u00e1kn<\/li><\/ul>\n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Mynd\u00fej\u00f6ppunart\u00e6kni og g\u00e6\u00f0astillingar<\/h2>\n <p class=\"guide-text\">Skilningur \u00e1 \u00fej\u00f6ppun er lykilatri\u00f0i til a\u00f0 koma jafnv\u00e6gi \u00e1 myndg\u00e6\u00f0i og skr\u00e1arst\u00e6r\u00f0. Taps\u00fej\u00f6ppun, notu\u00f0 af sni\u00f0um eins og JPEG, fjarl\u00e6gir myndg\u00f6gn varanlega til a\u00f0 minnka skr\u00e1arst\u00e6r\u00f0ina. Lykillinn er a\u00f0 finna s\u00e6ta blettinn \u00fear sem \u00fej\u00f6ppun er h\u00e1m\u00f6rku\u00f0 \u00e1 me\u00f0an vi\u00f0unandi sj\u00f3ng\u00e6\u00f0um er vi\u00f0haldi\u00f0. Fyrir flestar vefmyndir veitir JPEG g\u00e6\u00f0astilling \u00e1 milli 75-85% fr\u00e1b\u00e6rt jafnv\u00e6gi, \u00fe\u00f3 \u00fea\u00f0 geti veri\u00f0 mismunandi eftir myndinnihaldi.\n\nTaplaus \u00fej\u00f6ppun, notu\u00f0 af PNG og sumum WebP myndum, dregur \u00far skr\u00e1arst\u00e6r\u00f0 \u00e1n g\u00e6\u00f0ataps. \u00de\u00f3 a\u00f0 \u00feetta hlj\u00f3mi tilvali\u00f0, \u00fe\u00e1 eru taplausar skr\u00e1r venjulega miklu st\u00e6rri en taplausar hli\u00f0st\u00e6\u00f0a \u00feeirra. \u00deetta gerir taplausa \u00fej\u00f6ppun best fyrir myndir \u00fear sem g\u00e6\u00f0i eru \u00ed fyrirr\u00fami, eins og v\u00f6rumyndir fyrir rafr\u00e6n vi\u00f0skipti e\u00f0a myndir sem ver\u00f0a breyttar frekar.\n\nH\u00e1\u00fer\u00f3u\u00f0 \u00fej\u00f6ppunart\u00e6kni felur \u00ed s\u00e9r stigvaxandi JPEG hle\u00f0slu, sem s\u00fdnir myndir \u00ed vaxandi g\u00e6\u00f0um, og litaundirs\u00fdni, sem dregur \u00far litauppl\u00fdsingum sem mannsaugu eru minna n\u00e6m fyrir. N\u00fat\u00edma verkf\u00e6ri bj\u00f3\u00f0a einnig upp \u00e1 skynjunarf\u00ednstillingu, stilla \u00fej\u00f6ppun \u00fat fr\u00e1 \u00fev\u00ed sem mannsauga\u00f0 tekur mest eftir, og n\u00e1 oft betri \u00e1rangri en hef\u00f0bundnar g\u00e6\u00f0astillingar.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Upplausn og m\u00f3tt\u00e6kileg myndf\u00ednstilling<\/h2>\n <p class=\"guide-text\">N\u00fat\u00edma vefh\u00f6nnun krefst myndar sem l\u00edta sk\u00f6rpum \u00fat \u00e1 allt fr\u00e1 snjalls\u00edmum til 4K skj\u00e1a. Lykillinn er a\u00f0 skilja pixla\u00fe\u00e9ttleika og getu t\u00e6kisins. 1200px brei\u00f0 mynd g\u00e6ti veri\u00f0 fullkomin fyrir skj\u00e1bor\u00f0ssko\u00f0un, en h\u00fan er of mikil fyrir 375px fars\u00edmaskj\u00e1, s\u00f3un \u00e1 bandbreidd og h\u00e6gir \u00e1 hle\u00f0slut\u00edma. A\u00f0 b\u00faa til margar myndast\u00e6r\u00f0ir tryggir a\u00f0 hvert t\u00e6ki f\u00e1i vi\u00f0eigandi st\u00e6r\u00f0armynd.\n\nM\u00f3tt\u00e6kilegar myndir nota HTML’s srcset eiginleika og mynd\u00fe\u00e1tt til a\u00f0 \u00fej\u00f3na mismunandi myndum bygg\u00f0ar \u00e1 skj\u00e1st\u00e6r\u00f0 og upplausn. \u00deessi t\u00e6kni getur dregi\u00f0 \u00far myndhle\u00f0slu um 50% e\u00f0a meira fyrir fars\u00edmanotendur. Til d\u00e6mis g\u00e6tir\u00f0u birt 400px mynd \u00ed fart\u00e6ki, 800px \u00e1 spjaldt\u00f6lvur og 1200px \u00e1 skj\u00e1bor\u00f0sskj\u00e1i. H\u00e1\u00fe\u00e9ttni skj\u00e1ir eins og Retina skj\u00e1ir \u00feurfa myndir \u00ed 2x upplausn fyrir sk\u00f6rp \u00fatlit.\n\nMyndast\u00e6r\u00f0 \u00e6tti einnig a\u00f0 taka tillit til raunverulegra skj\u00e1st\u00e6r\u00f0a \u00e1 vefs\u00ed\u00f0unni \u00feinni. Mynd sem birtist \u00ed 300px breidd \u00fearf ekki a\u00f0 vera 1200px \u00e1 breidd, \u00f3h\u00e1\u00f0 skj\u00e1 notandans. F\u00ednstilltu alltaf myndir fyrir raunverulega skj\u00e1st\u00e6r\u00f0 \u00feeirra og \u00edhuga\u00f0u a\u00f0 nota CSS til a\u00f0 takast \u00e1 vi\u00f0 minnih\u00e1ttar st\u00e6r\u00f0arst\u00e6r\u00f0 frekar en a\u00f0 \u00fej\u00f3na of st\u00f3rum myndum.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">\u00c1hrif \u00e1 \u00e1rangur og hle\u00f0slua\u00f0fer\u00f0ir<\/h2>\n <p class=\"guide-text\">Myndir hafa veruleg \u00e1hrif \u00e1 frammist\u00f6\u00f0u vefs\u00ed\u00f0unnar, oft eru \u00fe\u00e6r 50-70% af heildar\u00feyngd s\u00ed\u00f0unnar. St\u00f3rar, \u00f3be\u00f0nar myndir eru me\u00f0al a\u00f0al s\u00f6kud\u00f3lganna um h\u00e6gfara hle\u00f0slu vefs\u00ed\u00f0ur, sem hafa bein \u00e1hrif \u00e1 notendaupplifun og r\u00f6\u00f0un leitarv\u00e9la. Hver sek\u00fanda til vi\u00f0b\u00f3tar af hle\u00f0slut\u00edma getur auki\u00f0 hopphlutfall um allt a\u00f0 32%, sem gerir myndf\u00ednstillingu a\u00f0 mikilv\u00e6gu atri\u00f0i \u00ed vi\u00f0skiptum.\n\nLazy loading er \u00f6flug t\u00e6kni sem seinkar hle\u00f0slu myndar \u00fear til \u00fe\u00e6r eru a\u00f0 fara inn \u00ed \u00fats\u00fdnisg\u00e1ttina. \u00deetta b\u00e6tir verulega upphafshle\u00f0slut\u00edma, s\u00e9rstaklega fyrir myndir sem eru \u00feungar. N\u00fat\u00edma vafrar sty\u00f0ja innf\u00e6dda lata hle\u00f0slu me\u00f0 eiginleikanum loading=“lazy“ \u00e1 me\u00f0an JavaScript b\u00f3kas\u00f6fn veita h\u00e1\u00fer\u00f3a\u00f0ri stj\u00f3rn og v\u00ed\u00f0t\u00e6kari vafrastu\u00f0ning.\n\nForhle\u00f0slua\u00f0fer\u00f0ir mynda geta einnig auki\u00f0 upplifun notenda. Mikilv\u00e6gar myndir fyrir ofan brotabrot \u00e6ttu a\u00f0 vera f\u00ednstilltar fyrir hra\u00f0asta hle\u00f0slu, \u00e1 me\u00f0an h\u00e6gt er a\u00f0 hla\u00f0a ni\u00f0ur myndum fyrir ne\u00f0an brot. \u00cdhuga\u00f0u a\u00f0 nota l\u00e1gg\u00e6\u00f0a sta\u00f0setningarmyndir (LQIP) e\u00f0a \u00f3sk\u00fdr til skarp \u00e1hrif til a\u00f0 veita strax sj\u00f3nr\u00e6n endurgj\u00f6f \u00e1 me\u00f0an myndir \u00ed fullri upplausn hla\u00f0ast inn. Frams\u00e6kin JPEG k\u00f3\u00f0un gerir myndum kleift a\u00f0 birtast flj\u00f3tt \u00ed l\u00e1gum g\u00e6\u00f0um og skerpast s\u00ed\u00f0an eftir \u00fev\u00ed sem fleiri g\u00f6gn hla\u00f0ast inn.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">SEO og a\u00f0gengissj\u00f3narmi\u00f0<\/h2>\n <p class=\"guide-text\">Leitarv\u00e9lar l\u00edta \u00e1 s\u00ed\u00f0uhra\u00f0a sem r\u00f6\u00f0unar\u00fe\u00e1tt, sem gerir myndf\u00ednstillingu mikilv\u00e6ga fyrir velgengni SEO. R\u00e9tt f\u00ednstilltar myndir hj\u00e1lpa s\u00ed\u00f0um a\u00f0 hla\u00f0ast hra\u00f0ar, sem stu\u00f0lar a\u00f0 betri leitarr\u00f6\u00f0un og notendaupplifun. A\u00f0 auki veita myndaskr\u00e1arn\u00f6fn og alt texti d\u00fdrm\u00e6tt samhengi fyrir leitarv\u00e9lar, sem hj\u00e1lpar efni\u00f0 \u00feitt a\u00f0 birtast \u00ed myndaleitarni\u00f0urst\u00f6\u00f0um.\n\nA\u00f0gengi krefst yfirvega\u00f0s alt-texta sem l\u00fdsir myndefni fyrir skj\u00e1lesendur og sj\u00f3nskerta notendur. Alt texti \u00e6tti a\u00f0 vera l\u00fdsandi en hnitmi\u00f0a\u00f0ur, \u00fatsk\u00fdra hva\u00f0 er \u00e1 myndinni og tilgang hennar \u00ed samhengi. Fyrir skrautlegar myndir sem b\u00e6ta ekki uppl\u00fdsingagildi, nota\u00f0u t\u00f3ma alt eiginleika (alt=““) til a\u00f0 koma \u00ed veg fyrir a\u00f0 skj\u00e1lesarar tilkynni \u00fe\u00e6r a\u00f0 \u00f3\u00fe\u00f6rfu.\n\nSkipul\u00f6g\u00f0 g\u00f6gn og skemamerking getur auki\u00f0 hvernig leitarv\u00e9lar skilja og birta myndirnar \u00fe\u00ednar. R\u00e9tt myndas\u00ed\u00f0ukort hj\u00e1lpa leitarv\u00e9lum a\u00f0 uppg\u00f6tva og skr\u00e1 myndirnar \u00fe\u00ednar \u00e1 skilvirkari h\u00e1tt. Nafnavenjur skr\u00e1a \u00e6ttu a\u00f0 vera l\u00fdsandi og innihaldsr\u00edkar leitaror\u00f0um \u00feegar \u00fea\u00f0 \u00e1 vi\u00f0 og for\u00f0ast almenn n\u00f6fn eins og \u201eimage1.jpg\u201c \u00ed \u00fe\u00e1gu l\u00fdsandi heita eins og \u201erau\u00f0-hlaupask\u00f3r-frams\u00fdn.jpg\u201c.<\/p>\n \n <\/div>\n\n\n \n <section class=\"features-section\">\n <h2 class=\"section-title\">Helstu veitingar<\/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-image\"><\/i>\n <\/div>\n <h3 class=\"feature-title\">Veldu r\u00e9tta sni\u00f0i\u00f0<\/h3>\n <p class=\"feature-text\">Mismunandi myndsni\u00f0 skara fram \u00far \u00ed mismunandi a\u00f0st\u00e6\u00f0ur. Samsv\u00f6run sni\u00f0s vi\u00f0 ger\u00f0 efnis h\u00e1markar skilvirkni \u00fej\u00f6ppunar.<\/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\">Nota\u00f0u JPEG fyrir lj\u00f3smyndir og fl\u00f3knar myndir<\/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\">Veldu PNG fyrir graf\u00edk me\u00f0 gagns\u00e6i<\/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\">\u00cdhuga\u00f0u WebP fyrir betri \u00fej\u00f6ppun \u00e1 milli myndategunda<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-content\">\n <div class=\"feature-icon\">\n <i class=\"fas fa-compress-arrows-alt\"><\/i>\n <\/div>\n <h3 class=\"feature-title\">A\u00f0al\u00fej\u00f6ppunarstillingar<\/h3>\n <p class=\"feature-text\">A\u00f0 finna besta jafnv\u00e6gi\u00f0 milli g\u00e6\u00f0a og skr\u00e1arst\u00e6r\u00f0ar skiptir sk\u00f6pum fyrir afk\u00f6st vefsins \u00e1n \u00feess a\u00f0 f\u00f3rna sj\u00f3nr\u00e6nni a\u00f0dr\u00e1ttarafl.<\/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\">Mi\u00f0a\u00f0u vi\u00f0 75-85% g\u00e6\u00f0i fyrir flestar JPEG myndir<\/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\">Nota\u00f0u taplausa \u00fej\u00f6ppun a\u00f0eins \u00feegar g\u00e6\u00f0i eru mikilv\u00e6g<\/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\">Pr\u00f3fa\u00f0u mismunandi stillingar til a\u00f0 finna hi\u00f0 fullkomna jafnv\u00e6gi<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-content\">\n <div class=\"feature-icon\">\n <i class=\"fas fa-mobile-alt\"><\/i>\n <\/div>\n <h3 class=\"feature-title\">Innlei\u00f0a m\u00f3tt\u00e6kilegar myndir<\/h3>\n <p class=\"feature-text\">A\u00f0 birta myndir \u00ed vi\u00f0eigandi st\u00e6r\u00f0 fyrir mismunandi t\u00e6ki dregur \u00far bandbreiddarnotkun og b\u00e6tir hle\u00f0slut\u00edma verulega.<\/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\">B\u00fa\u00f0u til margar myndast\u00e6r\u00f0ir fyrir mismunandi skj\u00e1st\u00e6r\u00f0ir<\/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\">Nota\u00f0u srcset og mynd \u00fe\u00e6tti fyrir m\u00f3tt\u00e6kilega afhendingu<\/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\">\u00cdhuga\u00f0u pixla\u00fe\u00e9ttleika fyrir skj\u00e1i me\u00f0 h\u00e1rri upplausn<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n\n \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 Hver er tilvalin skr\u00e1arst\u00e6r\u00f0 fyrir vefmyndir?\n <\/h3>\n <div class=\"faq-answer\">\n <p>\u00dea\u00f0 er ekkert einhl\u00edtt svar, en mi\u00f0a almennt vi\u00f0 undir 100KB fyrir flestar myndir, undir 20KB fyrir litla graf\u00edk og undir 1MB fyrir st\u00f3rar hetjumyndir. Lykillinn er a\u00f0 koma jafnv\u00e6gi \u00e1 g\u00e6\u00f0i og hle\u00f0sluhra\u00f0a mi\u00f0a\u00f0 vi\u00f0 mikilv\u00e6gi myndarinnar og skj\u00e1st\u00e6r\u00f0.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <h3 class=\"faq-question\">\n <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n \u00c6tti \u00e9g a\u00f0 nota WebP fyrir allar vefs\u00ed\u00f0umyndirnar m\u00ednar?\n <\/h3>\n <div class=\"faq-answer\">\n <p>WebP b\u00fd\u00f0ur upp \u00e1 fram\u00farskarandi \u00fej\u00f6ppun og g\u00e6\u00f0i, en \u00fe\u00fa \u00e6ttir a\u00f0 \u00fatf\u00e6ra \u00fea\u00f0 me\u00f0 fallbacks \u00ed JPEG e\u00f0a PNG fyrir eldri vafra. Nota\u00f0u mynda\u00fe\u00e1ttinn e\u00f0a uppg\u00f6tvun mi\u00f0lara til a\u00f0 \u00fej\u00f3na WebP til a\u00f0 sty\u00f0ja vafra \u00e1 me\u00f0an \u00fe\u00fa vi\u00f0halda eindr\u00e6gni.<\/p>\n <\/div>\n <\/div>\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 f\u00ednstilla \u00e9g myndir \u00e1n \u00feess a\u00f0 tapa g\u00e6\u00f0um?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Nota\u00f0u taplaus \u00fej\u00f6ppunarverkf\u00e6ri, veldu vi\u00f0eigandi sni\u00f0 (PNG fyrir graf\u00edk, JPEG fyrir myndir) og breyttu st\u00e6r\u00f0 mynda \u00ed raunveruleg skj\u00e1st\u00e6r\u00f0. Fyrir JPEG gefa g\u00e6\u00f0astillingar \u00e1 bilinu 80-90% oft fram\u00farskarandi \u00e1rangur me\u00f0 l\u00e1gmarks s\u00fdnilegu g\u00e6\u00f0atapi.<\/p>\n <\/div>\n <\/div>\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 tapslausri og taplausri \u00fej\u00f6ppun?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Taps\u00fej\u00f6ppun fjarl\u00e6gir myndg\u00f6gn varanlega til a\u00f0 n\u00e1 minni skr\u00e1arst\u00e6r\u00f0um, sem g\u00e6ti dregi\u00f0 \u00far g\u00e6\u00f0um. Tapslaus \u00fej\u00f6ppun dregur \u00far skr\u00e1arst\u00e6r\u00f0 \u00e1n g\u00e6\u00f0ataps en n\u00e6r yfirleitt minni \u00fej\u00f6ppun. Veldu \u00fat fr\u00e1 \u00fev\u00ed hvort g\u00e6\u00f0i e\u00f0a skr\u00e1arst\u00e6r\u00f0 er mikilv\u00e6gara.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <h3 class=\"faq-question\">\n <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n Hversu mikilv\u00e6gt er letihle\u00f0sla fyrir f\u00ednstillingu myndarinnar?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Lat hle\u00f0sla er afar mikilv\u00e6g fyrir vefs\u00ed\u00f0ur sem eru \u00feungar \u00ed myndum. \u00dea\u00f0 getur b\u00e6tt upphafshle\u00f0slut\u00edma s\u00ed\u00f0unnar um 20-50% me\u00f0 \u00fev\u00ed a\u00f0 hla\u00f0a a\u00f0eins myndum \u00feegar \u00fe\u00f6rf krefur. \u00deetta er s\u00e9rstaklega gagnlegt fyrir fars\u00edmanotendur og b\u00e6tir heildarupplifun notenda og SEO r\u00f6\u00f0un.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <h3 class=\"faq-question\">\n <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n Get \u00e9g breytt \u00e1 milli mismunandi myndsni\u00f0a til a\u00f0 h\u00e1marka skr\u00e1arst\u00e6r\u00f0?\n <\/h3>\n <div class=\"faq-answer\">\n <p>J\u00e1, umbreyting \u00e1 milli sni\u00f0a er oft \u00e1hrifar\u00edkasta hagr\u00e6\u00f0ingart\u00e6knin. A\u00f0 umbreyta PNG lj\u00f3smyndum \u00ed JPEG, e\u00f0a breyta kyrrst\u00e6\u00f0um myndum \u00ed n\u00fat\u00edma sni\u00f0 eins og WebP e\u00f0a AVIF getur dregi\u00f0 verulega \u00far skr\u00e1arst\u00e6r\u00f0um en vi\u00f0halda g\u00e6\u00f0um.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n\n \n <section class=\"cta-section\">\n <div class=\"cta-pattern\"><\/div>\n <div class=\"cta-content\">\n <h2 class=\"cta-title\">Settu \u00feekkingu \u00fe\u00edna \u00ed framkv\u00e6md<\/h2>\n <p class=\"cta-text\">N\u00fa \u00feegar \u00fe\u00fa skilur hugt\u00f6kin skaltu pr\u00f3fa Convertify til a\u00f0 nota \u00fea\u00f0 sem \u00fe\u00fa hefur l\u00e6rt. \u00d3keypis, \u00f3takm\u00f6rku\u00f0 vi\u00f0skipti \u00e1n \u00feess a\u00f0 \u00feurfa reikning.<\/p>\n <div class=\"hero-buttons\">\n <a href=\"\/download\" class=\"btn btn-primary\">S\u00e6kja Convertify \u00f3keypis<\/a>\n <a href=\"\/guides\" class=\"btn btn-secondary\">Fleiri lei\u00f0s\u00f6gumenn<\/a>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fullkomin lei\u00f0arv\u00edsir fyrir f\u00ednstillingu vefmynda: Sni\u00f0, \u00fej\u00f6ppun og hra\u00f0i Lei\u00f0beiningar um f\u00ednstillingu vefmynda Alhli\u00f0a handb\u00f3k til a\u00f0 hj\u00e1lpa \u00fe\u00e9r a\u00f0 […]<\/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-740125","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":"Fullkomin lei\u00f0arv\u00edsir fyrir f\u00ednstillingu vefmynda: Sni\u00f0, \u00fej\u00f6ppun og hra\u00f0i Lei\u00f0beiningar um f\u00ednstillingu vefmynda Alhli\u00f0a handb\u00f3k til a\u00f0 hj\u00e1lpa \u00fe\u00e9r a\u00f0 […]","_links":{"self":[{"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/pages\/740125","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=740125"}],"version-history":[{"count":0,"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/pages\/740125\/revisions"}],"wp:attachment":[{"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/media?parent=740125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":740125,"date":"2026-01-20T06:19:56","date_gmt":"2026-01-20T06:19:56","guid":{"rendered":"https:\/\/convertifypro.com\/?page_id=740125"},"modified":"2026-01-20T06:19:56","modified_gmt":"2026-01-20T06:19:56","slug":"web-image-optimization-guide","status":"publish","type":"page","link":"https:\/\/convertifypro.com\/is\/leidbeiningar-um-finstillingu-vefmynda\/","title":{"rendered":"Lei\u00f0beiningar um f\u00ednstillingu vefmynda"},"content":{"rendered":"\n\n\n\n \n \n \n \n Fullkomin lei\u00f0arv\u00edsir fyrir f\u00ednstillingu vefmynda: Sni\u00f0, \u00fej\u00f6ppun og hra\u00f0i<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\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 .guide-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 .hero-buttons {\n display: flex;\n justify-content: center;\n gap: 1rem;\n flex-wrap: wrap;\n }\n\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 }\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 \/* 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 \/* Why Convert Section *\/\n .why-convert-section {\n margin-bottom: 4rem;\n background: var(--light-bg);\n border-radius: 16px;\n padding: 3rem 2rem;\n }\n\n .comparison-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n }\n\n .format-card {\n background: white;\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: var(--box-shadow);\n transition: all 0.3s ease;\n border: 1px solid var(--border-color);\n }\n\n .format-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--hover-shadow);\n border-color: rgba(253, 152, 0, 0.3);\n }\n\n .format-title {\n font-size: 1.6rem;\n font-weight: 700;\n margin-bottom: 1.25rem;\n color: var(--text-color);\n display: flex;\n align-items: center;\n }\n\n .format-icon {\n color: var(--primary-color);\n margin-right: 0.75rem;\n font-size: 1.6rem;\n }\n\n .format-list {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .format-item {\n display: flex;\n align-items: flex-start;\n margin-bottom: 0.85rem;\n }\n\n .format-check {\n color: var(--primary-color);\n margin-right: 0.75rem;\n flex-shrink: 0;\n margin-top: 0.2rem;\n }\n\n .format-text {\n font-size: 0.95rem;\n color: #555;\n line-height: 1.5;\n }\n\n \/* How It Works Section *\/\n .how-it-works-section {\n margin-bottom: 4rem;\n }\n\n .steps-container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .step-card {\n display: flex;\n align-items: flex-start;\n background: white;\n border-radius: 16px;\n padding: 2rem;\n box-shadow: var(--box-shadow);\n margin-bottom: 2rem;\n border: 1px solid var(--border-color);\n transition: all 0.3s ease;\n }\n\n .step-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--hover-shadow);\n border-color: rgba(253, 152, 0, 0.3);\n }\n\n .step-number {\n width: 50px;\n height: 50px;\n background-color: rgba(253, 152, 0, 0.15);\n color: var(--primary-color);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n font-weight: 700;\n margin-right: 1.5rem;\n flex-shrink: 0;\n transition: all 0.3s ease;\n }\n\n .step-card:hover .step-number {\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 .step-content {\n flex: 1;\n }\n\n .step-title {\n font-size: 1.4rem;\n font-weight: 700;\n margin-bottom: 0.75rem;\n color: var(--text-color);\n }\n\n .step-text {\n font-size: 1rem;\n color: #555;\n line-height: 1.6;\n }\n\n \/* Use Cases Section *\/\n .use-cases-section {\n margin-bottom: 4rem;\n background: var(--light-bg);\n border-radius: 16px;\n padding: 3rem 2rem;\n }\n\n .use-cases-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n }\n\n .use-case-card {\n background: white;\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: var(--box-shadow);\n transition: all 0.3s ease;\n border: 1px solid var(--border-color);\n height: 100%;\n }\n\n .use-case-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--hover-shadow);\n border-color: rgba(253, 152, 0, 0.3);\n }\n\n .use-case-icon {\n color: var(--primary-color);\n font-size: 2rem;\n margin-bottom: 1rem;\n }\n\n .use-case-title {\n font-size: 1.3rem;\n font-weight: 700;\n margin-bottom: 1rem;\n color: var(--text-color);\n }\n\n .use-case-text {\n font-size: 0.95rem;\n color: #555;\n line-height: 1.6;\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 \/* Technical Details Section *\/\n .technical-details-section {\n margin-bottom: 4rem;\n }\n\n .technical-details-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n }\n\n .tech-detail-card {\n background: white;\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: var(--box-shadow);\n transition: all 0.3s ease;\n border: 1px solid var(--border-color);\n }\n\n .tech-detail-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--hover-shadow);\n border-color: rgba(253, 152, 0, 0.3);\n }\n\n .tech-detail-title {\n font-size: 1.3rem;\n font-weight: 700;\n margin-bottom: 1rem;\n color: var(--text-color);\n display: flex;\n align-items: center;\n }\n\n .tech-detail-icon {\n color: var(--primary-color);\n margin-right: 0.75rem;\n font-size: 1.3rem;\n }\n\n .tech-detail-text {\n font-size: 0.95rem;\n color: #555;\n line-height: 1.6;\n }\n\n \/* Security Section *\/\n .security-section {\n margin-bottom: 4rem;\n background: var(--light-bg);\n border-radius: 16px;\n padding: 3rem 2rem;\n }\n\n .security-features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n }\n\n .security-card {\n background: white;\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: var(--box-shadow);\n transition: all 0.3s ease;\n border: 1px solid var(--border-color);\n }\n\n .security-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--hover-shadow);\n border-color: rgba(253, 152, 0, 0.3);\n }\n\n .security-title {\n font-size: 1.3rem;\n font-weight: 700;\n margin-bottom: 1rem;\n color: var(--text-color);\n display: flex;\n align-items: center;\n }\n\n .security-icon {\n color: var(--primary-color);\n margin-right: 0.75rem;\n font-size: 1.3rem;\n }\n\n .security-text {\n font-size: 0.95rem;\n color: #555;\n line-height: 1.6;\n }\n\n \/* CTA Section *\/\n .cta-section {\n text-align: center;\n padding: 3rem 1rem;\n background: var(--gradient-bg);\n border-radius: 16px;\n position: relative;\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .cta-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 .cta-content {\n position: relative;\n z-index: 1;\n max-width: 800px;\n margin: 0 auto;\n }\n\n .cta-title {\n font-size: 2.2rem;\n font-weight: 700;\n margin-bottom: 1.5rem;\n color: var(--text-color);\n }\n\n .cta-text {\n font-size: 1.1rem;\n margin-bottom: 2rem;\n color: #555;\n line-height: 1.6;\n }\n\n \/* Guide-specific Styles *\/\n .guide-content {\n background: white;\n border-radius: 16px;\n padding: 2rem;\n margin-bottom: 2rem;\n box-shadow: var(--box-shadow);\n border: 1px solid var(--border-color);\n }\n\n .guide-section-title {\n font-size: 1.6rem;\n font-weight: 700;\n color: var(--text-color);\n margin-bottom: 1rem;\n }\n\n .guide-text {\n font-size: 1rem;\n color: #555;\n line-height: 1.8;\n margin-bottom: 1rem;\n }\n\n .guide-list {\n list-style: none;\n padding: 0;\n margin: 1rem 0;\n }\n\n .guide-list-item {\n display: flex;\n align-items: flex-start;\n margin-bottom: 0.75rem;\n padding-left: 1.5rem;\n position: relative;\n }\n\n .guide-list-item::before {\n content: \"\u2022\";\n color: var(--primary-color);\n font-weight: bold;\n position: absolute;\n left: 0;\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 .cta-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 .step-card {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .step-number {\n margin-bottom: 1rem;\n margin-right: 0;\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 .step-card {\n padding: 1.5rem;\n }\n\n .faq-item {\n padding: 1.25rem;\n }\n }\n\n \/* Button text should never be underlined *\/\n .btn:hover, .btn:focus, .btn:active {\n text-decoration: none !important;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"guide-section\">\n \n <section class=\"hero-section\">\n <div class=\"hero-pattern\"><\/div>\n <div class=\"hero-content\">\n <h1 class=\"hero-title\">Lei\u00f0beiningar um f\u00ednstillingu vefmynda<\/h1>\n <p class=\"hero-subtitle\">Alhli\u00f0a handb\u00f3k til a\u00f0 hj\u00e1lpa \u00fe\u00e9r a\u00f0 skilja lei\u00f0arv\u00edsir um f\u00ednstillingu vefmynda.<\/p>\n\n <div class=\"hero-badges\">\n <div class=\"hero-badge\">\n <span class=\"hero-badge-icon\"><i class=\"fas fa-clock\"><\/i><\/span>\n <span class=\"hero-badge-text\">8 m\u00edn lestur<\/span>\n <\/div>\n <div class=\"hero-badge\">\n <span class=\"hero-badge-icon\"><i class=\"fas fa-book\"><\/i><\/span>\n <span class=\"hero-badge-text\">Fr\u00e6\u00f0slulei\u00f0beiningar<\/span>\n <\/div>\n <div class=\"hero-badge\">\n <span class=\"hero-badge-icon\"><i class=\"fas fa-graduation-cap\"><\/i><\/span>\n <span class=\"hero-badge-text\">R\u00e1\u00f0leggingar s\u00e9rfr\u00e6\u00f0inga<\/span>\n <\/div>\n <\/div>\n\n <div class=\"hero-buttons\">\n <a href=\"#content\" class=\"btn btn-primary\">Byrja\u00f0u a\u00f0 lesa<\/a>\n <a href=\"\/download\" class=\"btn btn-secondary\">S\u00e6kja Convertify<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">A\u00f0 skilja vefmyndasni\u00f0<\/h2>\n <p class=\"guide-text\">A\u00f0 velja r\u00e9tt myndsni\u00f0 er grunnurinn a\u00f0 hagr\u00e6\u00f0ingu vefsins. Hvert sni\u00f0 \u00fej\u00f3nar mismunandi tilgangi og b\u00fd\u00f0ur upp \u00e1 einstaka kosti. JPEG er tilvali\u00f0 fyrir lj\u00f3smyndir og fl\u00f3knar myndir me\u00f0 m\u00f6rgum litum, b\u00fd\u00f0ur upp \u00e1 fram\u00farskarandi \u00fej\u00f6ppunarhlutf\u00f6ll en \u00e1 kostna\u00f0 \u00feess a\u00f0 vera taps\u00e1r. PNG skarar fram \u00far \u00ed myndum me\u00f0 gagns\u00e6i, sk\u00f6rpum br\u00fanum og takm\u00f6rku\u00f0um litat\u00f6flum, sem gerir \u00fea\u00f0 fullkomi\u00f0 fyrir l\u00f3g\u00f3 og graf\u00edk, \u00fe\u00f3 a\u00f0 skr\u00e1arst\u00e6r\u00f0ir hafi tilhneigingu til a\u00f0 vera st\u00e6rri.\n\nWebP t\u00e1knar n\u00e6stu kynsl\u00f3\u00f0 vefmynda, sem veitir fr\u00e1b\u00e6ra \u00fej\u00f6ppun samanbori\u00f0 vi\u00f0 b\u00e6\u00f0i JPEG og PNG \u00e1 me\u00f0an h\u00e1g\u00e6\u00f0a er vi\u00f0haldi\u00f0. \u00dea\u00f0 sty\u00f0ur b\u00e6\u00f0i tapa\u00f0a og taplausa \u00fej\u00f6ppun, gagns\u00e6i og hreyfimyndir. Hins vegar er vafrastu\u00f0ningur, \u00fe\u00f3 hann s\u00e9 umfangsmikill, ekki alhli\u00f0a. AVIF er enn n\u00fdrra og b\u00fd\u00f0ur upp \u00e1 \u00f3venjulegt \u00fej\u00f6ppunarhlutfall sem er allt a\u00f0 50% l\u00e6gra en JPEG, en notkun vafra fer enn vaxandi.\n\nFyrir vektorgraf\u00edk eins og l\u00f3g\u00f3, t\u00e1kn og einfaldar myndir er SVG \u00f3sigrandi. Sem vektorsni\u00f0 skalast SVG myndir \u00f3endanlega \u00e1n g\u00e6\u00f0ataps og hafa oft \u00f6rsm\u00e1ar skr\u00e1arst\u00e6r\u00f0ir. \u00deeir eru l\u00edka breytanlegir me\u00f0 k\u00f3\u00f0a og sty\u00f0ja gagnvirkni, sem gerir \u00fe\u00e1 \u00f3tr\u00falega fj\u00f6lh\u00e6fa fyrir n\u00fat\u00edma vefh\u00f6nnun.<\/p>\n <ul class='guide-list'><li class='guide-list-item'>JPEG: Best fyrir lj\u00f3smyndir og fl\u00f3knar myndir<\/li><li class='guide-list-item'>PNG: Tilvali\u00f0 fyrir graf\u00edk me\u00f0 gagns\u00e6i og sk\u00f6rpum br\u00fanum<\/li><li class='guide-list-item'>WebP: N\u00fat\u00edmalegt sni\u00f0 me\u00f0 fr\u00e1b\u00e6rri \u00fej\u00f6ppun<\/li><li class='guide-list-item'>AVIF: N\u00fdjasta sni\u00f0i\u00f0 me\u00f0 \u00f3venjulegri \u00fej\u00f6ppun<\/li><li class='guide-list-item'>SVG: Fullkomi\u00f0 fyrir stigst\u00e6r\u00f0 vektorgraf\u00edk og t\u00e1kn<\/li><\/ul>\n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Mynd\u00fej\u00f6ppunart\u00e6kni og g\u00e6\u00f0astillingar<\/h2>\n <p class=\"guide-text\">Skilningur \u00e1 \u00fej\u00f6ppun er lykilatri\u00f0i til a\u00f0 koma jafnv\u00e6gi \u00e1 myndg\u00e6\u00f0i og skr\u00e1arst\u00e6r\u00f0. Taps\u00fej\u00f6ppun, notu\u00f0 af sni\u00f0um eins og JPEG, fjarl\u00e6gir myndg\u00f6gn varanlega til a\u00f0 minnka skr\u00e1arst\u00e6r\u00f0ina. Lykillinn er a\u00f0 finna s\u00e6ta blettinn \u00fear sem \u00fej\u00f6ppun er h\u00e1m\u00f6rku\u00f0 \u00e1 me\u00f0an vi\u00f0unandi sj\u00f3ng\u00e6\u00f0um er vi\u00f0haldi\u00f0. Fyrir flestar vefmyndir veitir JPEG g\u00e6\u00f0astilling \u00e1 milli 75-85% fr\u00e1b\u00e6rt jafnv\u00e6gi, \u00fe\u00f3 \u00fea\u00f0 geti veri\u00f0 mismunandi eftir myndinnihaldi.\n\nTaplaus \u00fej\u00f6ppun, notu\u00f0 af PNG og sumum WebP myndum, dregur \u00far skr\u00e1arst\u00e6r\u00f0 \u00e1n g\u00e6\u00f0ataps. \u00de\u00f3 a\u00f0 \u00feetta hlj\u00f3mi tilvali\u00f0, \u00fe\u00e1 eru taplausar skr\u00e1r venjulega miklu st\u00e6rri en taplausar hli\u00f0st\u00e6\u00f0a \u00feeirra. \u00deetta gerir taplausa \u00fej\u00f6ppun best fyrir myndir \u00fear sem g\u00e6\u00f0i eru \u00ed fyrirr\u00fami, eins og v\u00f6rumyndir fyrir rafr\u00e6n vi\u00f0skipti e\u00f0a myndir sem ver\u00f0a breyttar frekar.\n\nH\u00e1\u00fer\u00f3u\u00f0 \u00fej\u00f6ppunart\u00e6kni felur \u00ed s\u00e9r stigvaxandi JPEG hle\u00f0slu, sem s\u00fdnir myndir \u00ed vaxandi g\u00e6\u00f0um, og litaundirs\u00fdni, sem dregur \u00far litauppl\u00fdsingum sem mannsaugu eru minna n\u00e6m fyrir. N\u00fat\u00edma verkf\u00e6ri bj\u00f3\u00f0a einnig upp \u00e1 skynjunarf\u00ednstillingu, stilla \u00fej\u00f6ppun \u00fat fr\u00e1 \u00fev\u00ed sem mannsauga\u00f0 tekur mest eftir, og n\u00e1 oft betri \u00e1rangri en hef\u00f0bundnar g\u00e6\u00f0astillingar.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Upplausn og m\u00f3tt\u00e6kileg myndf\u00ednstilling<\/h2>\n <p class=\"guide-text\">N\u00fat\u00edma vefh\u00f6nnun krefst myndar sem l\u00edta sk\u00f6rpum \u00fat \u00e1 allt fr\u00e1 snjalls\u00edmum til 4K skj\u00e1a. Lykillinn er a\u00f0 skilja pixla\u00fe\u00e9ttleika og getu t\u00e6kisins. 1200px brei\u00f0 mynd g\u00e6ti veri\u00f0 fullkomin fyrir skj\u00e1bor\u00f0ssko\u00f0un, en h\u00fan er of mikil fyrir 375px fars\u00edmaskj\u00e1, s\u00f3un \u00e1 bandbreidd og h\u00e6gir \u00e1 hle\u00f0slut\u00edma. A\u00f0 b\u00faa til margar myndast\u00e6r\u00f0ir tryggir a\u00f0 hvert t\u00e6ki f\u00e1i vi\u00f0eigandi st\u00e6r\u00f0armynd.\n\nM\u00f3tt\u00e6kilegar myndir nota HTML’s srcset eiginleika og mynd\u00fe\u00e1tt til a\u00f0 \u00fej\u00f3na mismunandi myndum bygg\u00f0ar \u00e1 skj\u00e1st\u00e6r\u00f0 og upplausn. \u00deessi t\u00e6kni getur dregi\u00f0 \u00far myndhle\u00f0slu um 50% e\u00f0a meira fyrir fars\u00edmanotendur. Til d\u00e6mis g\u00e6tir\u00f0u birt 400px mynd \u00ed fart\u00e6ki, 800px \u00e1 spjaldt\u00f6lvur og 1200px \u00e1 skj\u00e1bor\u00f0sskj\u00e1i. H\u00e1\u00fe\u00e9ttni skj\u00e1ir eins og Retina skj\u00e1ir \u00feurfa myndir \u00ed 2x upplausn fyrir sk\u00f6rp \u00fatlit.\n\nMyndast\u00e6r\u00f0 \u00e6tti einnig a\u00f0 taka tillit til raunverulegra skj\u00e1st\u00e6r\u00f0a \u00e1 vefs\u00ed\u00f0unni \u00feinni. Mynd sem birtist \u00ed 300px breidd \u00fearf ekki a\u00f0 vera 1200px \u00e1 breidd, \u00f3h\u00e1\u00f0 skj\u00e1 notandans. F\u00ednstilltu alltaf myndir fyrir raunverulega skj\u00e1st\u00e6r\u00f0 \u00feeirra og \u00edhuga\u00f0u a\u00f0 nota CSS til a\u00f0 takast \u00e1 vi\u00f0 minnih\u00e1ttar st\u00e6r\u00f0arst\u00e6r\u00f0 frekar en a\u00f0 \u00fej\u00f3na of st\u00f3rum myndum.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">\u00c1hrif \u00e1 \u00e1rangur og hle\u00f0slua\u00f0fer\u00f0ir<\/h2>\n <p class=\"guide-text\">Myndir hafa veruleg \u00e1hrif \u00e1 frammist\u00f6\u00f0u vefs\u00ed\u00f0unnar, oft eru \u00fe\u00e6r 50-70% af heildar\u00feyngd s\u00ed\u00f0unnar. St\u00f3rar, \u00f3be\u00f0nar myndir eru me\u00f0al a\u00f0al s\u00f6kud\u00f3lganna um h\u00e6gfara hle\u00f0slu vefs\u00ed\u00f0ur, sem hafa bein \u00e1hrif \u00e1 notendaupplifun og r\u00f6\u00f0un leitarv\u00e9la. Hver sek\u00fanda til vi\u00f0b\u00f3tar af hle\u00f0slut\u00edma getur auki\u00f0 hopphlutfall um allt a\u00f0 32%, sem gerir myndf\u00ednstillingu a\u00f0 mikilv\u00e6gu atri\u00f0i \u00ed vi\u00f0skiptum.\n\nLazy loading er \u00f6flug t\u00e6kni sem seinkar hle\u00f0slu myndar \u00fear til \u00fe\u00e6r eru a\u00f0 fara inn \u00ed \u00fats\u00fdnisg\u00e1ttina. \u00deetta b\u00e6tir verulega upphafshle\u00f0slut\u00edma, s\u00e9rstaklega fyrir myndir sem eru \u00feungar. N\u00fat\u00edma vafrar sty\u00f0ja innf\u00e6dda lata hle\u00f0slu me\u00f0 eiginleikanum loading=“lazy“ \u00e1 me\u00f0an JavaScript b\u00f3kas\u00f6fn veita h\u00e1\u00fer\u00f3a\u00f0ri stj\u00f3rn og v\u00ed\u00f0t\u00e6kari vafrastu\u00f0ning.\n\nForhle\u00f0slua\u00f0fer\u00f0ir mynda geta einnig auki\u00f0 upplifun notenda. Mikilv\u00e6gar myndir fyrir ofan brotabrot \u00e6ttu a\u00f0 vera f\u00ednstilltar fyrir hra\u00f0asta hle\u00f0slu, \u00e1 me\u00f0an h\u00e6gt er a\u00f0 hla\u00f0a ni\u00f0ur myndum fyrir ne\u00f0an brot. \u00cdhuga\u00f0u a\u00f0 nota l\u00e1gg\u00e6\u00f0a sta\u00f0setningarmyndir (LQIP) e\u00f0a \u00f3sk\u00fdr til skarp \u00e1hrif til a\u00f0 veita strax sj\u00f3nr\u00e6n endurgj\u00f6f \u00e1 me\u00f0an myndir \u00ed fullri upplausn hla\u00f0ast inn. Frams\u00e6kin JPEG k\u00f3\u00f0un gerir myndum kleift a\u00f0 birtast flj\u00f3tt \u00ed l\u00e1gum g\u00e6\u00f0um og skerpast s\u00ed\u00f0an eftir \u00fev\u00ed sem fleiri g\u00f6gn hla\u00f0ast inn.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">SEO og a\u00f0gengissj\u00f3narmi\u00f0<\/h2>\n <p class=\"guide-text\">Leitarv\u00e9lar l\u00edta \u00e1 s\u00ed\u00f0uhra\u00f0a sem r\u00f6\u00f0unar\u00fe\u00e1tt, sem gerir myndf\u00ednstillingu mikilv\u00e6ga fyrir velgengni SEO. R\u00e9tt f\u00ednstilltar myndir hj\u00e1lpa s\u00ed\u00f0um a\u00f0 hla\u00f0ast hra\u00f0ar, sem stu\u00f0lar a\u00f0 betri leitarr\u00f6\u00f0un og notendaupplifun. A\u00f0 auki veita myndaskr\u00e1arn\u00f6fn og alt texti d\u00fdrm\u00e6tt samhengi fyrir leitarv\u00e9lar, sem hj\u00e1lpar efni\u00f0 \u00feitt a\u00f0 birtast \u00ed myndaleitarni\u00f0urst\u00f6\u00f0um.\n\nA\u00f0gengi krefst yfirvega\u00f0s alt-texta sem l\u00fdsir myndefni fyrir skj\u00e1lesendur og sj\u00f3nskerta notendur. Alt texti \u00e6tti a\u00f0 vera l\u00fdsandi en hnitmi\u00f0a\u00f0ur, \u00fatsk\u00fdra hva\u00f0 er \u00e1 myndinni og tilgang hennar \u00ed samhengi. Fyrir skrautlegar myndir sem b\u00e6ta ekki uppl\u00fdsingagildi, nota\u00f0u t\u00f3ma alt eiginleika (alt=““) til a\u00f0 koma \u00ed veg fyrir a\u00f0 skj\u00e1lesarar tilkynni \u00fe\u00e6r a\u00f0 \u00f3\u00fe\u00f6rfu.\n\nSkipul\u00f6g\u00f0 g\u00f6gn og skemamerking getur auki\u00f0 hvernig leitarv\u00e9lar skilja og birta myndirnar \u00fe\u00ednar. R\u00e9tt myndas\u00ed\u00f0ukort hj\u00e1lpa leitarv\u00e9lum a\u00f0 uppg\u00f6tva og skr\u00e1 myndirnar \u00fe\u00ednar \u00e1 skilvirkari h\u00e1tt. Nafnavenjur skr\u00e1a \u00e6ttu a\u00f0 vera l\u00fdsandi og innihaldsr\u00edkar leitaror\u00f0um \u00feegar \u00fea\u00f0 \u00e1 vi\u00f0 og for\u00f0ast almenn n\u00f6fn eins og \u201eimage1.jpg\u201c \u00ed \u00fe\u00e1gu l\u00fdsandi heita eins og \u201erau\u00f0-hlaupask\u00f3r-frams\u00fdn.jpg\u201c.<\/p>\n \n <\/div>\n\n\n \n <section class=\"features-section\">\n <h2 class=\"section-title\">Helstu veitingar<\/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-image\"><\/i>\n <\/div>\n <h3 class=\"feature-title\">Veldu r\u00e9tta sni\u00f0i\u00f0<\/h3>\n <p class=\"feature-text\">Mismunandi myndsni\u00f0 skara fram \u00far \u00ed mismunandi a\u00f0st\u00e6\u00f0ur. Samsv\u00f6run sni\u00f0s vi\u00f0 ger\u00f0 efnis h\u00e1markar skilvirkni \u00fej\u00f6ppunar.<\/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\">Nota\u00f0u JPEG fyrir lj\u00f3smyndir og fl\u00f3knar myndir<\/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\">Veldu PNG fyrir graf\u00edk me\u00f0 gagns\u00e6i<\/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\">\u00cdhuga\u00f0u WebP fyrir betri \u00fej\u00f6ppun \u00e1 milli myndategunda<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-content\">\n <div class=\"feature-icon\">\n <i class=\"fas fa-compress-arrows-alt\"><\/i>\n <\/div>\n <h3 class=\"feature-title\">A\u00f0al\u00fej\u00f6ppunarstillingar<\/h3>\n <p class=\"feature-text\">A\u00f0 finna besta jafnv\u00e6gi\u00f0 milli g\u00e6\u00f0a og skr\u00e1arst\u00e6r\u00f0ar skiptir sk\u00f6pum fyrir afk\u00f6st vefsins \u00e1n \u00feess a\u00f0 f\u00f3rna sj\u00f3nr\u00e6nni a\u00f0dr\u00e1ttarafl.<\/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\">Mi\u00f0a\u00f0u vi\u00f0 75-85% g\u00e6\u00f0i fyrir flestar JPEG myndir<\/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\">Nota\u00f0u taplausa \u00fej\u00f6ppun a\u00f0eins \u00feegar g\u00e6\u00f0i eru mikilv\u00e6g<\/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\">Pr\u00f3fa\u00f0u mismunandi stillingar til a\u00f0 finna hi\u00f0 fullkomna jafnv\u00e6gi<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-content\">\n <div class=\"feature-icon\">\n <i class=\"fas fa-mobile-alt\"><\/i>\n <\/div>\n <h3 class=\"feature-title\">Innlei\u00f0a m\u00f3tt\u00e6kilegar myndir<\/h3>\n <p class=\"feature-text\">A\u00f0 birta myndir \u00ed vi\u00f0eigandi st\u00e6r\u00f0 fyrir mismunandi t\u00e6ki dregur \u00far bandbreiddarnotkun og b\u00e6tir hle\u00f0slut\u00edma verulega.<\/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\">B\u00fa\u00f0u til margar myndast\u00e6r\u00f0ir fyrir mismunandi skj\u00e1st\u00e6r\u00f0ir<\/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\">Nota\u00f0u srcset og mynd \u00fe\u00e6tti fyrir m\u00f3tt\u00e6kilega afhendingu<\/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\">\u00cdhuga\u00f0u pixla\u00fe\u00e9ttleika fyrir skj\u00e1i me\u00f0 h\u00e1rri upplausn<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n\n \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 Hver er tilvalin skr\u00e1arst\u00e6r\u00f0 fyrir vefmyndir?\n <\/h3>\n <div class=\"faq-answer\">\n <p>\u00dea\u00f0 er ekkert einhl\u00edtt svar, en mi\u00f0a almennt vi\u00f0 undir 100KB fyrir flestar myndir, undir 20KB fyrir litla graf\u00edk og undir 1MB fyrir st\u00f3rar hetjumyndir. Lykillinn er a\u00f0 koma jafnv\u00e6gi \u00e1 g\u00e6\u00f0i og hle\u00f0sluhra\u00f0a mi\u00f0a\u00f0 vi\u00f0 mikilv\u00e6gi myndarinnar og skj\u00e1st\u00e6r\u00f0.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <h3 class=\"faq-question\">\n <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n \u00c6tti \u00e9g a\u00f0 nota WebP fyrir allar vefs\u00ed\u00f0umyndirnar m\u00ednar?\n <\/h3>\n <div class=\"faq-answer\">\n <p>WebP b\u00fd\u00f0ur upp \u00e1 fram\u00farskarandi \u00fej\u00f6ppun og g\u00e6\u00f0i, en \u00fe\u00fa \u00e6ttir a\u00f0 \u00fatf\u00e6ra \u00fea\u00f0 me\u00f0 fallbacks \u00ed JPEG e\u00f0a PNG fyrir eldri vafra. Nota\u00f0u mynda\u00fe\u00e1ttinn e\u00f0a uppg\u00f6tvun mi\u00f0lara til a\u00f0 \u00fej\u00f3na WebP til a\u00f0 sty\u00f0ja vafra \u00e1 me\u00f0an \u00fe\u00fa vi\u00f0halda eindr\u00e6gni.<\/p>\n <\/div>\n <\/div>\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 f\u00ednstilla \u00e9g myndir \u00e1n \u00feess a\u00f0 tapa g\u00e6\u00f0um?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Nota\u00f0u taplaus \u00fej\u00f6ppunarverkf\u00e6ri, veldu vi\u00f0eigandi sni\u00f0 (PNG fyrir graf\u00edk, JPEG fyrir myndir) og breyttu st\u00e6r\u00f0 mynda \u00ed raunveruleg skj\u00e1st\u00e6r\u00f0. Fyrir JPEG gefa g\u00e6\u00f0astillingar \u00e1 bilinu 80-90% oft fram\u00farskarandi \u00e1rangur me\u00f0 l\u00e1gmarks s\u00fdnilegu g\u00e6\u00f0atapi.<\/p>\n <\/div>\n <\/div>\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 tapslausri og taplausri \u00fej\u00f6ppun?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Taps\u00fej\u00f6ppun fjarl\u00e6gir myndg\u00f6gn varanlega til a\u00f0 n\u00e1 minni skr\u00e1arst\u00e6r\u00f0um, sem g\u00e6ti dregi\u00f0 \u00far g\u00e6\u00f0um. Tapslaus \u00fej\u00f6ppun dregur \u00far skr\u00e1arst\u00e6r\u00f0 \u00e1n g\u00e6\u00f0ataps en n\u00e6r yfirleitt minni \u00fej\u00f6ppun. Veldu \u00fat fr\u00e1 \u00fev\u00ed hvort g\u00e6\u00f0i e\u00f0a skr\u00e1arst\u00e6r\u00f0 er mikilv\u00e6gara.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <h3 class=\"faq-question\">\n <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n Hversu mikilv\u00e6gt er letihle\u00f0sla fyrir f\u00ednstillingu myndarinnar?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Lat hle\u00f0sla er afar mikilv\u00e6g fyrir vefs\u00ed\u00f0ur sem eru \u00feungar \u00ed myndum. \u00dea\u00f0 getur b\u00e6tt upphafshle\u00f0slut\u00edma s\u00ed\u00f0unnar um 20-50% me\u00f0 \u00fev\u00ed a\u00f0 hla\u00f0a a\u00f0eins myndum \u00feegar \u00fe\u00f6rf krefur. \u00deetta er s\u00e9rstaklega gagnlegt fyrir fars\u00edmanotendur og b\u00e6tir heildarupplifun notenda og SEO r\u00f6\u00f0un.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <h3 class=\"faq-question\">\n <span class=\"faq-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n Get \u00e9g breytt \u00e1 milli mismunandi myndsni\u00f0a til a\u00f0 h\u00e1marka skr\u00e1arst\u00e6r\u00f0?\n <\/h3>\n <div class=\"faq-answer\">\n <p>J\u00e1, umbreyting \u00e1 milli sni\u00f0a er oft \u00e1hrifar\u00edkasta hagr\u00e6\u00f0ingart\u00e6knin. A\u00f0 umbreyta PNG lj\u00f3smyndum \u00ed JPEG, e\u00f0a breyta kyrrst\u00e6\u00f0um myndum \u00ed n\u00fat\u00edma sni\u00f0 eins og WebP e\u00f0a AVIF getur dregi\u00f0 verulega \u00far skr\u00e1arst\u00e6r\u00f0um en vi\u00f0halda g\u00e6\u00f0um.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n\n \n <section class=\"cta-section\">\n <div class=\"cta-pattern\"><\/div>\n <div class=\"cta-content\">\n <h2 class=\"cta-title\">Settu \u00feekkingu \u00fe\u00edna \u00ed framkv\u00e6md<\/h2>\n <p class=\"cta-text\">N\u00fa \u00feegar \u00fe\u00fa skilur hugt\u00f6kin skaltu pr\u00f3fa Convertify til a\u00f0 nota \u00fea\u00f0 sem \u00fe\u00fa hefur l\u00e6rt. \u00d3keypis, \u00f3takm\u00f6rku\u00f0 vi\u00f0skipti \u00e1n \u00feess a\u00f0 \u00feurfa reikning.<\/p>\n <div class=\"hero-buttons\">\n <a href=\"\/download\" class=\"btn btn-primary\">S\u00e6kja Convertify \u00f3keypis<\/a>\n <a href=\"\/guides\" class=\"btn btn-secondary\">Fleiri lei\u00f0s\u00f6gumenn<\/a>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fullkomin lei\u00f0arv\u00edsir fyrir f\u00ednstillingu vefmynda: Sni\u00f0, \u00fej\u00f6ppun og hra\u00f0i Lei\u00f0beiningar um f\u00ednstillingu vefmynda Alhli\u00f0a handb\u00f3k til a\u00f0 hj\u00e1lpa \u00fe\u00e9r a\u00f0 […]<\/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-740125","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":"Fullkomin lei\u00f0arv\u00edsir fyrir f\u00ednstillingu vefmynda: Sni\u00f0, \u00fej\u00f6ppun og hra\u00f0i Lei\u00f0beiningar um f\u00ednstillingu vefmynda Alhli\u00f0a handb\u00f3k til a\u00f0 hj\u00e1lpa \u00fe\u00e9r a\u00f0 […]","_links":{"self":[{"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/pages\/740125","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=740125"}],"version-history":[{"count":0,"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/pages\/740125\/revisions"}],"wp:attachment":[{"href":"https:\/\/convertifypro.com\/wp-json\/wp\/v2\/media?parent=740125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}