Web Irudiak optimizatzeko gida osoa: formatuak, konpresioa eta abiadura<\/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\">Web Irudiak optimizatzeko gida<\/h1>\n <p class=\"hero-subtitle\">Web-irudien optimizaziorako gida ulertzen laguntzeko gida integrala.<\/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 minutuko irakurketa<\/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\">Hezkuntza Gida<\/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\">Adituen aholkuak<\/span>\n <\/div>\n <\/div>\n\n <div class=\"hero-buttons\">\n <a href=\"#content\" class=\"btn btn-primary\">Hasi Irakurtzen<\/a>\n <a href=\"\/download\" class=\"btn btn-secondary\">Deskargatu Convertify<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Webeko irudi formatuak ulertzea<\/h2>\n <p class=\"guide-text\">Irudi-formatu egokia aukeratzea da web optimizazioaren oinarria. Formatu bakoitzak helburu desberdinak ditu eta abantaila bereziak eskaintzen ditu. JPEG aproposa da kolore askotako argazki eta irudi konplexuetarako, konpresio-erlazio bikainak eskaintzen ditu baina galerak izatearen kostuarekin. PNG gardentasuna, ertz zorrotzak eta kolore paleta mugatuak dituzten irudietan nabarmentzen da, logotipo eta grafikoetarako ezin hobea da, nahiz eta fitxategien tamaina handiagoak izan.\n\nWebP-k web-irudien hurrengo belaunaldia adierazten du, JPEG eta PNG-rekin alderatuta, konpresio handiagoa eskainiz, kalitate handia mantenduz. Bai galerarik eta galerarik gabeko konpresioa, gardentasuna eta animazioa onartzen ditu. Hala ere, arakatzailearen laguntza, zabala izan arren, ez da unibertsala. AVIF are berriagoa da, konpresio-tasa paregabeak eskaintzen ditu JPEG baino %50 txikiagoak, baina arakatzailearen adopzioa hazten ari da.\n\nLogotipoak, ikonoak eta ilustrazio sinpleak bezalako grafiko bektorialetarako, SVG ezin hobea da. Bektorial formatu gisa, SVG irudiek infinitu eskalatzen dute kalitatea galdu gabe eta askotan fitxategi-tamaina txikiak izaten dituzte. Kodearekin ere editagarriak dira eta interaktibitatea onartzen dute, eta oso polifazetikoak dira web diseinu modernorako.<\/p>\n <ul class='guide-list'><li class='guide-list-item'>JPEG: onena argazkietarako eta irudi konplexuetarako<\/li><li class='guide-list-item'>PNG: Gardentasuna eta ertz zorrotzak dituzten grafikoetarako aproposa<\/li><li class='guide-list-item'>WebP: formatu modernoa goi-konpresioarekin<\/li><li class='guide-list-item'>AVIF: formatu berriena konpresio bikainarekin<\/li><li class='guide-list-item'>SVG: ezin hobea bektorial grafiko eta ikono eskalagarrietarako<\/li><\/ul>\n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Irudien Konpresioaren Teknikak eta Kalitate Ezarpenak<\/h2>\n <p class=\"guide-text\">Konpresioa ulertzea funtsezkoa da irudiaren kalitatea fitxategiaren tamainarekin orekatzeko. JPEG bezalako formatuek erabiltzen duten konpresio galerak betirako kentzen ditu irudien datuak fitxategiaren tamaina murrizteko. Gakoa konpresioa maximizatzen den leku gozoa aurkitzea da, kalitate bisual onargarria mantenduz. Webeko irudi gehienetarako, % 75-85 arteko JPEG kalitate ezarpenak oreka bikaina eskaintzen du, nahiz eta hori alda daiteke irudiaren edukiaren arabera.\n\nPNG eta WebP irudi batzuek erabiltzen duten galerarik gabeko konpresioak fitxategiaren tamaina murrizten du kalitate-galerarik gabe. Hau aproposa dirudien arren, galerarik gabeko fitxategiak normalean askoz ere handiagoak izan ohi dira galeraren parekoak baino. Horrek galerarik gabeko konpresio egokia egiten du kalitatea funtsezkoa den irudietarako, hala nola produktuen argazkiak merkataritza elektronikorako edo gehiago editatuko diren irudietarako.\n\nKonpresio-teknika aurreratuen artean, JPEG karga progresiboa, irudiak kalitate handiagoan bistaratzen dituena, eta kroma-azpilaginketa, giza begiek ez duten kolore-informazioa murrizten du. Tresna modernoek pertzepzio-optimizazioa ere eskaintzen dute, konpresioa giza begiak gehien nabaritzen duenaren arabera egokituz, sarritan kalitatezko ezarpen tradizionalek baino emaitza hobeak lortuz.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Ebazpena eta irudi sentikorren optimizazioa<\/h2>\n <p class=\"guide-text\">Web-diseinu modernoak telefono mugikorretatik hasi eta 4K monitoretaraino zirraragarriak diren irudiak eskatzen ditu. Gakoa pixelen dentsitatea eta gailuen gaitasunak ulertzea da. 1200 px-ko zabalerako irudia ezin hobea izan daiteke mahaigainean ikusteko, baina gehiegizkoa da 375 px-eko pantaila mugikor batentzat, banda-zabalera alferrik galdu eta karga-denborak motelduz. Irudi-tamaina anitz sortzeak gailu bakoitzak tamaina egokia duen irudia jasotzen duela ziurtatzen du.\n\nIrudi sentikorrak HTMLren srcset atributua eta irudi elementua erabiltzen dituzte pantailaren tamainan eta bereizmenean oinarritutako irudi desberdinak hornitzeko. Teknika honek irudien karga % 50 edo gehiago murriztu dezake mugikorren erabiltzaileentzat. Adibidez, 400 px-ko irudia gailu mugikorretarako, 800 px-eko tabletetara eta 1200 px-eko mahaigaineko pantailetara. Erretina pantailak bezalako dentsitate handiko pantailek bikoitzeko bereizmeneko irudiak behar dituzte itxura txukuna izateko.\n\nIrudiaren tamainak zure webguneko benetako bistaratzeko dimentsioak ere kontuan hartu behar ditu. 300 px-ko zabaleran bistaratzen den irudi batek ez du 1200 px-ko zabalera izan behar, erabiltzailearen pantaila edozein dela ere. Optimizatu beti irudiak benetako bistaratze-tamainarako, eta kontuan hartu CSS erabiltzea eskalatze txikia kudeatzeko, tamaina handiko irudiak hornitzeko beharrean.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Errendimendu-eragina eta karga-estrategiak<\/h2>\n <p class=\"guide-text\">Irudiek nabarmen eragiten dute webgunearen errendimenduan, askotan orriaren pisu osoaren % 50-70 ordezkatzen dutenak. Optimizatu gabeko irudi handiak kargatzeko webgune motelen errudun nagusien artean daude, erabiltzailearen esperientzia eta bilatzaileen sailkapenean zuzenean eragiten dutenak. Karga-denboraren segundo gehigarri bakoitzak errebote-tasak % 32 arte handitu ditzake, eta irudien optimizazioa negoziorako funtsezkoa da.\n\nLazy loading teknika indartsua da, irudiak kargatzea atzeratzen duena bista-atalara sartu arte. Horrek ikaragarri hobetzen du hasierako orrien karga-denborak, batez ere irudi asko dituzten orrialdeetarako. Arakatzaile modernoek karga natiboa onartzen dute loading=”lazy” atributuarekin, eta JavaScript liburutegiek kontrol aurreratuagoa eta arakatzailearen laguntza zabalagoa eskaintzen dute.\n\nIrudiak aurrez kargatzeko estrategiek erabiltzailearen esperientzia hobetu dezakete. Tolesturako irudi kritikoak optimizatu behar dira azkarren kargatzeko, eta tolesturako irudiak alferrak kargatu daitezkeen bitartean. Kontuan izan kalitate baxuko irudien leku-markak (LQIP) edo lausotze-zorrotz efektuak erabiltzea berehalako iritzi bisuala emateko bereizmen osoko irudiak kargatzen diren bitartean. JPEG kodetze progresiboak irudiak kalitate baxuan azkar agertzea ahalbidetzen du, gero datu gehiago kargatu ahala zorrozten.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">SEO eta irisgarritasun-gogoetak<\/h2>\n <p class=\"guide-text\">Bilatzaileek orrialdearen abiadura sailkapeneko faktore gisa hartzen dute, eta irudien optimizazioa funtsezkoa da SEO arrakastarako. Behar bezala optimizatutako irudiek orriak azkarrago kargatzen laguntzen dute, bilaketa-sailkapena eta erabiltzailearen esperientzia hobetzen laguntzen dutenak. Gainera, irudi-fitxategien izenek eta alt-testuak testuinguru baliotsua eskaintzen diete bilatzaileei, zure edukia irudien bilaketa-emaitzetan agertzen lagunduz.\n\nIrisgarritasunak pantaila-irakurleentzako eta ikusmen urritasuna duten erabiltzaileentzako irudi-edukia deskribatzen duen beste testu hausnartua eskatzen du. Alt testuak deskribatzailea baina zehatza izan behar du, irudian zer dagoen eta bere helburua testuinguruan azalduz. Informazio-baliorik gehitzen ez duten irudi apaingarrietarako, erabili alt atributu hutsak (alt=””) pantaila-irakurleek alferrik iragar ez ditzaten.\n\nDatu egituratuek eta eskema-markak bilatzaileek zure irudiak nola ulertzen eta bistaratzen duten hobetu dezakete. Irudien mapa egokiak bilatzaileei zure irudiak modu eraginkorragoan aurkitzen eta indexatzen laguntzen die. Fitxategiak izendatzeko konbentzioak deskribatzaileak eta gako-hitz-aberastuak izan behar dira garrantzitsua denean, “image1.jpg” bezalako izen generikoak saihestuz “red-running-shoes-front-view.jpg” bezalako izen deskribatzaileen alde.<\/p>\n \n <\/div>\n\n\n \n <section class=\"features-section\">\n <h2 class=\"section-title\">Gakoak hartzeko<\/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\">Aukeratu formatu egokia<\/h3>\n <p class=\"feature-text\">Irudi formatu desberdinak eszenatoki desberdinetan nabarmentzen dira. Formatua eduki motarekin lotzeak konpresioaren eraginkortasuna maximizatzen du.<\/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\">Erabili JPEG argazkietarako eta irudi konplexuetarako<\/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\">Aukeratu PNG gardentasuna duten grafikoetarako<\/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\">Demagun WebP irudi mota guztietan konpresio hobea izateko<\/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\">Konpresioaren ezarpen nagusiak<\/h3>\n <p class=\"feature-text\">Kalitatearen eta fitxategiaren tamainaren arteko oreka optimoa aurkitzea funtsezkoa da web-errendimendurako, erakargarri bisuala uko egin gabe.<\/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\">Helburua %75-85eko kalitatea JPEG irudi gehienetarako<\/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\">Erabili galerarik gabeko konpresioa kalitatea kritikoa denean soilik<\/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\">Probatu ezarpen desberdinak oreka perfektua aurkitzeko<\/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\">Irudi sentikorrak ezarri<\/h3>\n <p class=\"feature-text\">Tamaina egokiko irudiak gailu desberdinetan hornitzeak banda-zabaleraren erabilera murrizten du eta kargatzeko denborak nabarmen hobetzen ditu.<\/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\">Sortu hainbat irudi-tamaina pantaila-tamaina desberdinetarako<\/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\">Erabili srcset eta irudi elementuak bidalketa erantzuteko<\/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\">Kontuan hartu pixel-dentsitatea bereizmen handiko pantailetarako<\/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\">Maiz egiten diren galderak<\/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 Zein da web-irudien fitxategien tamaina aproposa?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Ez dago erantzun bakarra, baina, oro har, irudi gehienetarako 100 KB baino gutxiagokoa da, 20 KB baino gutxiago grafiko txikietarako eta 1 MB baino gutxiago heroi irudi handietarako. Gakoa kalitatea kargatzeko abiadurarekin orekatzea da, irudiaren garrantziaren eta pantailaren tamainaren arabera.<\/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 WebP erabili behar al dut nire webguneko irudi guztietan?\n <\/h3>\n <div class=\"faq-answer\">\n <p>WebP-k konpresio eta kalitate bikaina eskaintzen du, baina arakatzaile zaharrentzako JPEG edo PNG-ren babesarekin ezarri beharko zenuke. Erabili irudi-elementua edo zerbitzariaren alboko detekzioa WebP arakatzaileei laguntza emateko, bateragarritasuna mantenduz.<\/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 Nola optimizatzen ditut irudiak kalitatea galdu gabe?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Erabili galerarik gabeko konpresio-tresnak, aukeratu formatu egokiak (PNG grafikoetarako, JPEG argazkietarako) eta aldatu irudiak beren benetako bistaratzeko neurrietara. JPEG-rako, % 80-90 arteko kalitate-ezarpenek emaitza bikainak ematen dituzte sarritan, kalitate-galera ikusgarri minimoarekin.<\/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 Zein da galerarik gabeko eta galerarik gabeko konpresioaren arteko aldea?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Konpresio galerak betirako kentzen ditu irudien datuak fitxategien tamaina txikiagoak lortzeko, kalitatea murriztuz. Galerarik gabeko konpresioak fitxategien tamaina murrizten du kalitate-galerarik gabe, baina normalean konpresio txikiagoa lortzen du. Aukeratu kalitatea edo fitxategiaren tamaina garrantzitsuagoa den kontuan hartuta.<\/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 Zein garrantzitsua da karga alferrak irudiak optimizatzeko?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Karga alferrak oso garrantzitsua da irudi asko dituzten webguneentzat. Hasierako orrialdearen karga-denborak % 20-50 hobetu ditzake irudiak behar denean soilik kargatuz. Hau bereziki onuragarria da mugikorreko erabiltzaileentzat eta erabiltzailearen esperientzia orokorra eta SEO sailkapena hobetzen ditu.<\/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 Irudi formatu ezberdinen artean bihur al dezaket fitxategien tamaina optimizatzeko?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Bai, formatuen artean bihurtzea optimizazio teknikarik eraginkorrena izaten da. PNG argazkiak JPEG bihurtzeak edo irudi estatikoak WebP edo AVIF bezalako formatu modernoetara bihurtzeak ikaragarri murriztu ditzake fitxategien tamainak kalitatea mantenduz.<\/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\">Jarri zure ezagutzak praktikan<\/h2>\n <p class=\"cta-text\">Kontzeptuak ulertzen dituzunean, saiatu Convertify ikasitakoa aplikatzeko. Doako bihurketa mugagabeak, konturik gabe.<\/p>\n <div class=\"hero-buttons\">\n <a href=\"\/download\" class=\"btn btn-primary\">Deskargatu Convertify doan<\/a>\n <a href=\"\/guides\" class=\"btn btn-secondary\">Gida gehiago<\/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>Web Irudiak optimizatzeko gida osoa: formatuak, konpresioa eta abiadura Web Irudiak optimizatzeko gida Web-irudien optimizaziorako gida ulertzen laguntzeko gida integrala. […]<\/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":"Web Irudiak optimizatzeko gida osoa: formatuak, konpresioa eta abiadura Web Irudiak optimizatzeko gida Web-irudien optimizaziorako gida ulertzen laguntzeko gida integrala. […]","_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\/eu\/web-irudiak-optimizatzeko-gida\/","title":{"rendered":"Web Irudiak optimizatzeko gida"},"content":{"rendered":"\n\n\n\n \n \n \n \n Web Irudiak optimizatzeko gida osoa: formatuak, konpresioa eta abiadura<\/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\">Web Irudiak optimizatzeko gida<\/h1>\n <p class=\"hero-subtitle\">Web-irudien optimizaziorako gida ulertzen laguntzeko gida integrala.<\/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 minutuko irakurketa<\/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\">Hezkuntza Gida<\/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\">Adituen aholkuak<\/span>\n <\/div>\n <\/div>\n\n <div class=\"hero-buttons\">\n <a href=\"#content\" class=\"btn btn-primary\">Hasi Irakurtzen<\/a>\n <a href=\"\/download\" class=\"btn btn-secondary\">Deskargatu Convertify<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Webeko irudi formatuak ulertzea<\/h2>\n <p class=\"guide-text\">Irudi-formatu egokia aukeratzea da web optimizazioaren oinarria. Formatu bakoitzak helburu desberdinak ditu eta abantaila bereziak eskaintzen ditu. JPEG aproposa da kolore askotako argazki eta irudi konplexuetarako, konpresio-erlazio bikainak eskaintzen ditu baina galerak izatearen kostuarekin. PNG gardentasuna, ertz zorrotzak eta kolore paleta mugatuak dituzten irudietan nabarmentzen da, logotipo eta grafikoetarako ezin hobea da, nahiz eta fitxategien tamaina handiagoak izan.\n\nWebP-k web-irudien hurrengo belaunaldia adierazten du, JPEG eta PNG-rekin alderatuta, konpresio handiagoa eskainiz, kalitate handia mantenduz. Bai galerarik eta galerarik gabeko konpresioa, gardentasuna eta animazioa onartzen ditu. Hala ere, arakatzailearen laguntza, zabala izan arren, ez da unibertsala. AVIF are berriagoa da, konpresio-tasa paregabeak eskaintzen ditu JPEG baino %50 txikiagoak, baina arakatzailearen adopzioa hazten ari da.\n\nLogotipoak, ikonoak eta ilustrazio sinpleak bezalako grafiko bektorialetarako, SVG ezin hobea da. Bektorial formatu gisa, SVG irudiek infinitu eskalatzen dute kalitatea galdu gabe eta askotan fitxategi-tamaina txikiak izaten dituzte. Kodearekin ere editagarriak dira eta interaktibitatea onartzen dute, eta oso polifazetikoak dira web diseinu modernorako.<\/p>\n <ul class='guide-list'><li class='guide-list-item'>JPEG: onena argazkietarako eta irudi konplexuetarako<\/li><li class='guide-list-item'>PNG: Gardentasuna eta ertz zorrotzak dituzten grafikoetarako aproposa<\/li><li class='guide-list-item'>WebP: formatu modernoa goi-konpresioarekin<\/li><li class='guide-list-item'>AVIF: formatu berriena konpresio bikainarekin<\/li><li class='guide-list-item'>SVG: ezin hobea bektorial grafiko eta ikono eskalagarrietarako<\/li><\/ul>\n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Irudien Konpresioaren Teknikak eta Kalitate Ezarpenak<\/h2>\n <p class=\"guide-text\">Konpresioa ulertzea funtsezkoa da irudiaren kalitatea fitxategiaren tamainarekin orekatzeko. JPEG bezalako formatuek erabiltzen duten konpresio galerak betirako kentzen ditu irudien datuak fitxategiaren tamaina murrizteko. Gakoa konpresioa maximizatzen den leku gozoa aurkitzea da, kalitate bisual onargarria mantenduz. Webeko irudi gehienetarako, % 75-85 arteko JPEG kalitate ezarpenak oreka bikaina eskaintzen du, nahiz eta hori alda daiteke irudiaren edukiaren arabera.\n\nPNG eta WebP irudi batzuek erabiltzen duten galerarik gabeko konpresioak fitxategiaren tamaina murrizten du kalitate-galerarik gabe. Hau aproposa dirudien arren, galerarik gabeko fitxategiak normalean askoz ere handiagoak izan ohi dira galeraren parekoak baino. Horrek galerarik gabeko konpresio egokia egiten du kalitatea funtsezkoa den irudietarako, hala nola produktuen argazkiak merkataritza elektronikorako edo gehiago editatuko diren irudietarako.\n\nKonpresio-teknika aurreratuen artean, JPEG karga progresiboa, irudiak kalitate handiagoan bistaratzen dituena, eta kroma-azpilaginketa, giza begiek ez duten kolore-informazioa murrizten du. Tresna modernoek pertzepzio-optimizazioa ere eskaintzen dute, konpresioa giza begiak gehien nabaritzen duenaren arabera egokituz, sarritan kalitatezko ezarpen tradizionalek baino emaitza hobeak lortuz.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Ebazpena eta irudi sentikorren optimizazioa<\/h2>\n <p class=\"guide-text\">Web-diseinu modernoak telefono mugikorretatik hasi eta 4K monitoretaraino zirraragarriak diren irudiak eskatzen ditu. Gakoa pixelen dentsitatea eta gailuen gaitasunak ulertzea da. 1200 px-ko zabalerako irudia ezin hobea izan daiteke mahaigainean ikusteko, baina gehiegizkoa da 375 px-eko pantaila mugikor batentzat, banda-zabalera alferrik galdu eta karga-denborak motelduz. Irudi-tamaina anitz sortzeak gailu bakoitzak tamaina egokia duen irudia jasotzen duela ziurtatzen du.\n\nIrudi sentikorrak HTMLren srcset atributua eta irudi elementua erabiltzen dituzte pantailaren tamainan eta bereizmenean oinarritutako irudi desberdinak hornitzeko. Teknika honek irudien karga % 50 edo gehiago murriztu dezake mugikorren erabiltzaileentzat. Adibidez, 400 px-ko irudia gailu mugikorretarako, 800 px-eko tabletetara eta 1200 px-eko mahaigaineko pantailetara. Erretina pantailak bezalako dentsitate handiko pantailek bikoitzeko bereizmeneko irudiak behar dituzte itxura txukuna izateko.\n\nIrudiaren tamainak zure webguneko benetako bistaratzeko dimentsioak ere kontuan hartu behar ditu. 300 px-ko zabaleran bistaratzen den irudi batek ez du 1200 px-ko zabalera izan behar, erabiltzailearen pantaila edozein dela ere. Optimizatu beti irudiak benetako bistaratze-tamainarako, eta kontuan hartu CSS erabiltzea eskalatze txikia kudeatzeko, tamaina handiko irudiak hornitzeko beharrean.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Errendimendu-eragina eta karga-estrategiak<\/h2>\n <p class=\"guide-text\">Irudiek nabarmen eragiten dute webgunearen errendimenduan, askotan orriaren pisu osoaren % 50-70 ordezkatzen dutenak. Optimizatu gabeko irudi handiak kargatzeko webgune motelen errudun nagusien artean daude, erabiltzailearen esperientzia eta bilatzaileen sailkapenean zuzenean eragiten dutenak. Karga-denboraren segundo gehigarri bakoitzak errebote-tasak % 32 arte handitu ditzake, eta irudien optimizazioa negoziorako funtsezkoa da.\n\nLazy loading teknika indartsua da, irudiak kargatzea atzeratzen duena bista-atalara sartu arte. Horrek ikaragarri hobetzen du hasierako orrien karga-denborak, batez ere irudi asko dituzten orrialdeetarako. Arakatzaile modernoek karga natiboa onartzen dute loading=”lazy” atributuarekin, eta JavaScript liburutegiek kontrol aurreratuagoa eta arakatzailearen laguntza zabalagoa eskaintzen dute.\n\nIrudiak aurrez kargatzeko estrategiek erabiltzailearen esperientzia hobetu dezakete. Tolesturako irudi kritikoak optimizatu behar dira azkarren kargatzeko, eta tolesturako irudiak alferrak kargatu daitezkeen bitartean. Kontuan izan kalitate baxuko irudien leku-markak (LQIP) edo lausotze-zorrotz efektuak erabiltzea berehalako iritzi bisuala emateko bereizmen osoko irudiak kargatzen diren bitartean. JPEG kodetze progresiboak irudiak kalitate baxuan azkar agertzea ahalbidetzen du, gero datu gehiago kargatu ahala zorrozten.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">SEO eta irisgarritasun-gogoetak<\/h2>\n <p class=\"guide-text\">Bilatzaileek orrialdearen abiadura sailkapeneko faktore gisa hartzen dute, eta irudien optimizazioa funtsezkoa da SEO arrakastarako. Behar bezala optimizatutako irudiek orriak azkarrago kargatzen laguntzen dute, bilaketa-sailkapena eta erabiltzailearen esperientzia hobetzen laguntzen dutenak. Gainera, irudi-fitxategien izenek eta alt-testuak testuinguru baliotsua eskaintzen diete bilatzaileei, zure edukia irudien bilaketa-emaitzetan agertzen lagunduz.\n\nIrisgarritasunak pantaila-irakurleentzako eta ikusmen urritasuna duten erabiltzaileentzako irudi-edukia deskribatzen duen beste testu hausnartua eskatzen du. Alt testuak deskribatzailea baina zehatza izan behar du, irudian zer dagoen eta bere helburua testuinguruan azalduz. Informazio-baliorik gehitzen ez duten irudi apaingarrietarako, erabili alt atributu hutsak (alt=””) pantaila-irakurleek alferrik iragar ez ditzaten.\n\nDatu egituratuek eta eskema-markak bilatzaileek zure irudiak nola ulertzen eta bistaratzen duten hobetu dezakete. Irudien mapa egokiak bilatzaileei zure irudiak modu eraginkorragoan aurkitzen eta indexatzen laguntzen die. Fitxategiak izendatzeko konbentzioak deskribatzaileak eta gako-hitz-aberastuak izan behar dira garrantzitsua denean, “image1.jpg” bezalako izen generikoak saihestuz “red-running-shoes-front-view.jpg” bezalako izen deskribatzaileen alde.<\/p>\n \n <\/div>\n\n\n \n <section class=\"features-section\">\n <h2 class=\"section-title\">Gakoak hartzeko<\/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\">Aukeratu formatu egokia<\/h3>\n <p class=\"feature-text\">Irudi formatu desberdinak eszenatoki desberdinetan nabarmentzen dira. Formatua eduki motarekin lotzeak konpresioaren eraginkortasuna maximizatzen du.<\/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\">Erabili JPEG argazkietarako eta irudi konplexuetarako<\/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\">Aukeratu PNG gardentasuna duten grafikoetarako<\/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\">Demagun WebP irudi mota guztietan konpresio hobea izateko<\/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\">Konpresioaren ezarpen nagusiak<\/h3>\n <p class=\"feature-text\">Kalitatearen eta fitxategiaren tamainaren arteko oreka optimoa aurkitzea funtsezkoa da web-errendimendurako, erakargarri bisuala uko egin gabe.<\/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\">Helburua %75-85eko kalitatea JPEG irudi gehienetarako<\/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\">Erabili galerarik gabeko konpresioa kalitatea kritikoa denean soilik<\/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\">Probatu ezarpen desberdinak oreka perfektua aurkitzeko<\/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\">Irudi sentikorrak ezarri<\/h3>\n <p class=\"feature-text\">Tamaina egokiko irudiak gailu desberdinetan hornitzeak banda-zabaleraren erabilera murrizten du eta kargatzeko denborak nabarmen hobetzen ditu.<\/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\">Sortu hainbat irudi-tamaina pantaila-tamaina desberdinetarako<\/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\">Erabili srcset eta irudi elementuak bidalketa erantzuteko<\/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\">Kontuan hartu pixel-dentsitatea bereizmen handiko pantailetarako<\/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\">Maiz egiten diren galderak<\/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 Zein da web-irudien fitxategien tamaina aproposa?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Ez dago erantzun bakarra, baina, oro har, irudi gehienetarako 100 KB baino gutxiagokoa da, 20 KB baino gutxiago grafiko txikietarako eta 1 MB baino gutxiago heroi irudi handietarako. Gakoa kalitatea kargatzeko abiadurarekin orekatzea da, irudiaren garrantziaren eta pantailaren tamainaren arabera.<\/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 WebP erabili behar al dut nire webguneko irudi guztietan?\n <\/h3>\n <div class=\"faq-answer\">\n <p>WebP-k konpresio eta kalitate bikaina eskaintzen du, baina arakatzaile zaharrentzako JPEG edo PNG-ren babesarekin ezarri beharko zenuke. Erabili irudi-elementua edo zerbitzariaren alboko detekzioa WebP arakatzaileei laguntza emateko, bateragarritasuna mantenduz.<\/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 Nola optimizatzen ditut irudiak kalitatea galdu gabe?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Erabili galerarik gabeko konpresio-tresnak, aukeratu formatu egokiak (PNG grafikoetarako, JPEG argazkietarako) eta aldatu irudiak beren benetako bistaratzeko neurrietara. JPEG-rako, % 80-90 arteko kalitate-ezarpenek emaitza bikainak ematen dituzte sarritan, kalitate-galera ikusgarri minimoarekin.<\/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 Zein da galerarik gabeko eta galerarik gabeko konpresioaren arteko aldea?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Konpresio galerak betirako kentzen ditu irudien datuak fitxategien tamaina txikiagoak lortzeko, kalitatea murriztuz. Galerarik gabeko konpresioak fitxategien tamaina murrizten du kalitate-galerarik gabe, baina normalean konpresio txikiagoa lortzen du. Aukeratu kalitatea edo fitxategiaren tamaina garrantzitsuagoa den kontuan hartuta.<\/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 Zein garrantzitsua da karga alferrak irudiak optimizatzeko?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Karga alferrak oso garrantzitsua da irudi asko dituzten webguneentzat. Hasierako orrialdearen karga-denborak % 20-50 hobetu ditzake irudiak behar denean soilik kargatuz. Hau bereziki onuragarria da mugikorreko erabiltzaileentzat eta erabiltzailearen esperientzia orokorra eta SEO sailkapena hobetzen ditu.<\/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 Irudi formatu ezberdinen artean bihur al dezaket fitxategien tamaina optimizatzeko?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Bai, formatuen artean bihurtzea optimizazio teknikarik eraginkorrena izaten da. PNG argazkiak JPEG bihurtzeak edo irudi estatikoak WebP edo AVIF bezalako formatu modernoetara bihurtzeak ikaragarri murriztu ditzake fitxategien tamainak kalitatea mantenduz.<\/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\">Jarri zure ezagutzak praktikan<\/h2>\n <p class=\"cta-text\">Kontzeptuak ulertzen dituzunean, saiatu Convertify ikasitakoa aplikatzeko. Doako bihurketa mugagabeak, konturik gabe.<\/p>\n <div class=\"hero-buttons\">\n <a href=\"\/download\" class=\"btn btn-primary\">Deskargatu Convertify doan<\/a>\n <a href=\"\/guides\" class=\"btn btn-secondary\">Gida gehiago<\/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>Web Irudiak optimizatzeko gida osoa: formatuak, konpresioa eta abiadura Web Irudiak optimizatzeko gida Web-irudien optimizaziorako gida ulertzen laguntzeko gida integrala. […]<\/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":"Web Irudiak optimizatzeko gida osoa: formatuak, konpresioa eta abiadura Web Irudiak optimizatzeko gida Web-irudien optimizaziorako gida ulertzen laguntzeko gida integrala. […]","_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}]}}