Kompletan vodi\u010d za optimizaciju web slika: Formati, kompresija i brzina<\/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\">Vodi\u010d za optimizaciju web slika<\/h1>\n <p class=\"hero-subtitle\">Opse\u017ean vodi\u010d koji \u0107e vam pomo\u0107i da razumijete vodi\u010d za optimizaciju web slika.<\/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 min \u010ditanja<\/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\">Obrazovni vodi\u010d<\/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\">Savjeti stru\u010dnjaka<\/span>\n <\/div>\n <\/div>\n\n <div class=\"hero-buttons\">\n <a href=\"#content\" class=\"btn btn-primary\">Po\u010dnite \u010ditati<\/a>\n <a href=\"\/download\" class=\"btn btn-secondary\">Preuzmite Convertify<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Razumijevanje web formata slika<\/h2>\n <p class=\"guide-text\">Odabir pravog formata slike temelj je web optimizacije. Svaki format slu\u017ei razli\u010ditim svrhama i nudi jedinstvene prednosti. JPEG je idealan za fotografije i slo\u017eene slike s mnogo boja, nudi izvrsne omjere kompresije, ali uz cijenu gubitka. PNG se isti\u010de u slikama s prozirno\u0161\u0107u, o\u0161trim rubovima i ograni\u010denim paletama boja, \u0161to ga \u010dini savr\u0161enim za logotipe i grafike, iako su veli\u010dine datoteka obi\u010dno ve\u0107e.\n\nWebP predstavlja sljede\u0107u generaciju web slika, pru\u017eaju\u0107i vrhunsku kompresiju u usporedbi s JPEG i PNG uz zadr\u017eavanje visoke kvalitete. Podr\u017eava kompresiju bez gubitaka i gubitaka, transparentnost i animaciju. Me\u0111utim, podr\u0161ka preglednika, iako opse\u017ena, nije univerzalna. AVIF je jo\u0161 noviji, nudi iznimne stope kompresije do 50% manje od JPEG-a, ali prihva\u0107anje preglednika i dalje raste.\n\nZa vektorsku grafiku poput logotipa, ikona i jednostavnih ilustracija, SVG je nepobjediv. Kao vektorski format, SVG slike se beskona\u010dno skaliraju bez gubitka kvalitete i \u010desto imaju malene veli\u010dine datoteka. Tako\u0111er ih je mogu\u0107e ure\u0111ivati \u200b\u200bpomo\u0107u koda i podr\u017eavaju interaktivnost, \u0161to ih \u010dini nevjerojatno svestranim za moderan web dizajn.<\/p>\n <ul class='guide-list'><li class='guide-list-item'>JPEG: Najbolji za fotografije i slo\u017eene slike<\/li><li class='guide-list-item'>PNG: Idealno za grafike s prozirno\u0161\u0107u i o\u0161trim rubovima<\/li><li class='guide-list-item'>WebP: moderan format s vrhunskom kompresijom<\/li><li class='guide-list-item'>AVIF: Najnoviji format s iznimnom kompresijom<\/li><li class='guide-list-item'>SVG: Savr\u0161en za skalabilnu vektorsku grafiku i ikone<\/li><\/ul>\n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Tehnike kompresije slike i postavke kvalitete<\/h2>\n <p class=\"guide-text\">Razumijevanje kompresije klju\u010dno je za balansiranje kvalitete slike i veli\u010dine datoteke. Kompresija s gubitkom, koju koriste formati kao \u0161to je JPEG, trajno uklanja slikovne podatke kako bi se smanjila veli\u010dina datoteke. Klju\u010d je pronala\u017eenje najboljeg mjesta gdje je kompresija maksimizirana uz odr\u017eavanje prihvatljive vizualne kvalitete. Za ve\u0107inu web slika, postavka JPEG kvalitete izme\u0111u 75-85% pru\u017ea izvrsnu ravnote\u017eu, iako to mo\u017ee varirati ovisno o sadr\u017eaju slike.\n\nKompresija bez gubitaka, koju koriste PNG i neke WebP slike, smanjuje veli\u010dinu datoteke bez gubitka kvalitete. Iako ovo zvu\u010di idealno, datoteke bez gubitaka obi\u010dno su mnogo ve\u0107e od svojih kopija s gubicima. Zbog toga je kompresija bez gubitaka najprikladnija za slike gdje je kvaliteta najva\u017enija, kao \u0161to su fotografije proizvoda za e-trgovinu ili slike koje \u0107e se dodatno ure\u0111ivati.\n\nNapredne tehnike kompresije uklju\u010duju progresivno u\u010ditavanje JPEG-a, koje prikazuje slike u sve ve\u0107im prijelazima kvalitete, i chroma subsampling, koje smanjuje informacije o boji na koje su ljudske o\u010di manje osjetljive. Moderni alati tako\u0111er nude perceptivnu optimizaciju, prilago\u0111avaju\u0107i kompresiju na temelju onoga \u0161to ljudsko oko najvi\u0161e primje\u0107uje, \u010desto posti\u017eu\u0107i bolje rezultate od tradicionalnih postavki kvalitete.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Rezolucija i responzivna optimizacija slike<\/h2>\n <p class=\"guide-text\">Moderni web dizajn zahtijeva slike koje izgledaju o\u0161tro na svemu, od pametnih telefona do 4K monitora. Klju\u010dno je razumijevanje gusto\u0107e piksela i mogu\u0107nosti ure\u0111aja. Slika \u0161irine 1200 piksela mogla bi biti savr\u0161ena za gledanje na stolnom ra\u010dunalu, ali je pretjerana za zaslon mobilnog ure\u0111aja od 375 piksela, gubi propusnost i usporava vrijeme u\u010ditavanja. Stvaranje vi\u0161e veli\u010dina slike osigurava da svaki ure\u0111aj dobije sliku odgovaraju\u0107e veli\u010dine.\n\nResponzivne slike koriste HTML-ov atribut srcset i element slike za poslu\u017eivanje razli\u010ditih slika na temelju veli\u010dine i rezolucije zaslona. Ova tehnika mo\u017ee smanjiti sadr\u017eaj slike za 50% ili vi\u0161e za mobilne korisnike. Na primjer, mo\u017eete poslu\u017eiti sliku od 400 px na mobilnim ure\u0111ajima, 800 px na tabletima i 1200 px na zaslonima stolnih ra\u010dunala. Zasloni visoke gusto\u0107e poput Retina zaslona zahtijevaju slike 2x rezolucije za o\u0161tar izgled.\n\nOdre\u0111ivanje veli\u010dine slike tako\u0111er treba uzeti u obzir stvarne dimenzije prikaza na va\u0161oj web stranici. Slika prikazana u \u0161irini od 300 piksela ne mora biti \u0161iroka 1200 piksela, bez obzira na zaslon korisnika. Uvijek optimizirajte slike za njihovu stvarnu veli\u010dinu prikaza i razmislite o kori\u0161tenju CSS-a za manje skaliranje umjesto poslu\u017eivanja prevelikih slika.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Utjecaj na izvedbu i strategije u\u010ditavanja<\/h2>\n <p class=\"guide-text\">Slike zna\u010dajno utje\u010du na performanse web stranice, \u010desto predstavljaju 50-70% ukupne te\u017eine stranice. Velike, neoptimizirane slike me\u0111u glavnim su krivcima sporog u\u010ditavanja web stranica, izravno utje\u010du\u0107i na korisni\u010dko iskustvo i rangiranje u tra\u017eilicama. Svaka dodatna sekunda vremena u\u010ditavanja mo\u017ee pove\u0107ati stope odustajanja do 32%, \u010dine\u0107i optimizaciju slike klju\u010dnim za poslovanje.\n\nLijeno u\u010ditavanje mo\u0107na je tehnika koja odga\u0111a u\u010ditavanje slike sve dok ne u\u0111u u okvir za prikaz. Ovo dramati\u010dno pobolj\u0161ava po\u010detno vrijeme u\u010ditavanja stranice, posebno za stranice s velikim brojem slika. Moderni preglednici podr\u017eavaju izvorno lijeno u\u010ditavanje s atributom loading=”lazy”, dok JavaScript biblioteke pru\u017eaju napredniju kontrolu i \u0161iru podr\u0161ku preglednika.\n\nStrategije predu\u010ditavanja slika tako\u0111er mogu pobolj\u0161ati korisni\u010dko iskustvo. Kriti\u010dne slike na gornjoj polovici treba optimizirati za najbr\u017ee u\u010ditavanje, dok se slike na donjoj polovici mogu lijeno u\u010ditavati. Razmislite o kori\u0161tenju rezerviranih mjesta za slike niske kvalitete (LQIP) ili efekata zamu\u0107enja do o\u0161trine kako biste pru\u017eili trenutnu vizualnu povratnu informaciju dok se u\u010ditavaju slike pune rezolucije. Progresivno JPEG kodiranje omogu\u0107uje brzo pojavljivanje slika u niskoj kvaliteti, a zatim izo\u0161travanje kako se vi\u0161e podataka u\u010ditava.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">SEO i razmatranja pristupa\u010dnosti<\/h2>\n <p class=\"guide-text\">Tra\u017eilice smatraju brzinu stranice faktorom rangiranja, zbog \u010dega je optimizacija slike klju\u010dna za uspjeh SEO-a. Ispravno optimizirane slike poma\u017eu stranicama da se br\u017ee u\u010ditavaju, pridonose\u0107i boljem poretku u pretra\u017eivanju i korisni\u010dkom iskustvu. Osim toga, nazivi slikovnih datoteka i zamjenski tekst pru\u017eaju vrijedan kontekst tra\u017eilicama, poma\u017eu\u0107i da se va\u0161 sadr\u017eaj pojavi u rezultatima pretra\u017eivanja slika.\n\nPristupa\u010dnost zahtijeva promi\u0161ljen zamjenski tekst koji opisuje slikovni sadr\u017eaj za \u010dita\u010de zaslona i korisnike o\u0161te\u0107ena vida. Zamjenski tekst trebao bi biti deskriptivan, ali sa\u017eet, obja\u0161njavaju\u0107i \u0161to je na slici i njezinu svrhu u kontekstu. Za ukrasne slike koje ne dodaju informativnu vrijednost, koristite prazne alt atribute (alt=””) kako biste sprije\u010dili \u010dita\u010de zaslona da ih nepotrebno najavljuju.\n\nStrukturirani podaci i ozna\u010davanje sheme mogu pobolj\u0161ati na\u010din na koji tra\u017eilice razumiju i prikazuju va\u0161e slike. Ispravne slikovne karte stranica poma\u017eu tra\u017eilicama da u\u010dinkovitije otkriju i indeksiraju va\u0161e slike. Konvencije imenovanja datoteka trebale bi biti opisne i bogate klju\u010dnim rije\u010dima kada je relevantno, izbjegavaju\u0107i generi\u010dke nazive poput “image1.jpg” u korist opisnih naziva poput “crvene-tenisice-sprijeda-pogled.jpg”.<\/p>\n \n <\/div>\n\n\n \n <section class=\"features-section\">\n <h2 class=\"section-title\">Klju\u010dni podaci za van<\/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\">Odaberite pravi format<\/h3>\n <p class=\"feature-text\">Razli\u010diti formati slika izvrsni su u razli\u010ditim scenarijima. Uskla\u0111ivanje formata s vrstom sadr\u017eaja pove\u0107ava u\u010dinkovitost kompresije.<\/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\">Koristite JPEG za fotografije i slo\u017eene slike<\/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\">Odaberite PNG za grafiku s prozirno\u0161\u0107u<\/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\">Razmotrite WebP za bolju kompresiju svih vrsta slika<\/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\">Glavne postavke kompresije<\/h3>\n <p class=\"feature-text\">Pronala\u017eenje optimalne ravnote\u017ee izme\u0111u kvalitete i veli\u010dine datoteke klju\u010dno je za izvedbu weba bez \u017ertvovanja vizualne privla\u010dnosti.<\/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\">Ciljajte 75-85% kvalitete za ve\u0107inu JPEG slika<\/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\">Koristite kompresiju bez gubitaka samo kada je kvaliteta kriti\u010dna<\/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\">Testirajte razli\u010dite postavke kako biste prona\u0161li savr\u0161enu ravnote\u017eu<\/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\">Implementirajte responzivne slike<\/h3>\n <p class=\"feature-text\">Poslu\u017eivanje slika odgovaraju\u0107e veli\u010dine razli\u010ditim ure\u0111ajima smanjuje kori\u0161tenje propusnosti i zna\u010dajno pobolj\u0161ava vrijeme u\u010ditavanja.<\/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\">Stvorite vi\u0161e veli\u010dina slike za razli\u010dite veli\u010dine zaslona<\/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\">Koristite srcset i elemente slike za responzivnu isporuku<\/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\">Uzmite u obzir gusto\u0107u piksela za zaslone visoke razlu\u010divosti<\/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\">\u010cesto postavljana pitanja<\/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 Koja je idealna veli\u010dina datoteke za web slike?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Ne postoji jednozna\u010dan odgovor za sve, ali op\u0107enito ciljajte na manje od 100 KB za ve\u0107inu slika, ispod 20 KB za male grafike i ispod 1 MB za velike glavne slike. Klju\u010d je u ravnote\u017ei izme\u0111u kvalitete i brzine u\u010ditavanja na temelju va\u017enosti slike i veli\u010dine prikaza.<\/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 Trebam li koristiti WebP za sve slike svojih web stranica?\n <\/h3>\n <div class=\"faq-answer\">\n <p>WebP nudi izvrsnu kompresiju i kvalitetu, ali trebali biste ga implementirati s rezervnim JPEG ili PNG za starije preglednike. Upotrijebite element slike ili otkrivanje na strani poslu\u017eitelja za poslu\u017eivanje WebP-a u preglednicima koji ga podr\u017eavaju uz odr\u017eavanje kompatibilnosti.<\/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 Kako mogu optimizirati slike bez gubitka kvalitete?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Koristite alate za kompresiju bez gubitaka, odaberite odgovaraju\u0107e formate (PNG za grafiku, JPEG za fotografije) i promijenite veli\u010dinu slika na njihove stvarne dimenzije za prikaz. Za JPEG, postavke kvalitete izme\u0111u 80-90% \u010desto daju izvrsne rezultate s minimalnim vidljivim gubitkom kvalitete.<\/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 Koja je razlika izme\u0111u kompresije bez gubitaka i kompresije bez gubitaka?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Kompresija s gubitkom trajno uklanja slikovne podatke kako bi se postigla manja veli\u010dina datoteke, potencijalno smanjuju\u0107i kvalitetu. Kompresija bez gubitaka smanjuje veli\u010dinu datoteke bez gubitka kvalitete, ali obi\u010dno posti\u017ee manju kompresiju. Odaberite na temelju toga je li kvaliteta ili veli\u010dina datoteke va\u017enija.<\/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 Koliko je odlagano u\u010ditavanje va\u017eno za optimizaciju slike?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Lijeno u\u010ditavanje iznimno je va\u017eno za web stranice s velikim brojem slika. Mo\u017ee pobolj\u0161ati po\u010detno vrijeme u\u010ditavanja stranice za 20-50% u\u010ditavanjem slika samo kada je potrebno. Ovo je posebno korisno za mobilne korisnike i pobolj\u0161ava cjelokupno korisni\u010dko iskustvo i SEO rangiranje.<\/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 Mogu li pretvarati razli\u010dite formate slika kako bih optimizirao veli\u010dinu datoteke?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Da, pretvaranje izme\u0111u formata \u010desto je naju\u010dinkovitija tehnika optimizacije. Pretvaranje PNG fotografija u JPEG ili pretvaranje stati\u010dnih slika u moderne formate poput WebP ili AVIF mo\u017ee dramati\u010dno smanjiti veli\u010dinu datoteka uz zadr\u017eavanje kvalitete.<\/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\">Primijenite svoje znanje u praksi<\/h2>\n <p class=\"cta-text\">Sada kada ste razumjeli koncepte, poku\u0161ajte Convertify primijeniti ono \u0161to ste nau\u010dili. Besplatne, neograni\u010dene konverzije bez potrebe za ra\u010dunom.<\/p>\n <div class=\"hero-buttons\">\n <a href=\"\/download\" class=\"btn btn-primary\">Preuzmite Convertify besplatno<\/a>\n <a href=\"\/guides\" class=\"btn btn-secondary\">Vi\u0161e vodi\u010da<\/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>Kompletan vodi\u010d za optimizaciju web slika: Formati, kompresija i brzina Vodi\u010d za optimizaciju web slika Opse\u017ean vodi\u010d koji \u0107e vam […]<\/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":"Kompletan vodi\u010d za optimizaciju web slika: Formati, kompresija i brzina Vodi\u010d za optimizaciju web slika Opse\u017ean vodi\u010d koji \u0107e vam […]","_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\/hr\/vodic-za-optimizaciju-web-slika\/","title":{"rendered":"Vodi\u010d za optimizaciju web slika"},"content":{"rendered":"\n\n\n\n \n \n \n \n Kompletan vodi\u010d za optimizaciju web slika: Formati, kompresija i brzina<\/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\">Vodi\u010d za optimizaciju web slika<\/h1>\n <p class=\"hero-subtitle\">Opse\u017ean vodi\u010d koji \u0107e vam pomo\u0107i da razumijete vodi\u010d za optimizaciju web slika.<\/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 min \u010ditanja<\/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\">Obrazovni vodi\u010d<\/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\">Savjeti stru\u010dnjaka<\/span>\n <\/div>\n <\/div>\n\n <div class=\"hero-buttons\">\n <a href=\"#content\" class=\"btn btn-primary\">Po\u010dnite \u010ditati<\/a>\n <a href=\"\/download\" class=\"btn btn-secondary\">Preuzmite Convertify<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Razumijevanje web formata slika<\/h2>\n <p class=\"guide-text\">Odabir pravog formata slike temelj je web optimizacije. Svaki format slu\u017ei razli\u010ditim svrhama i nudi jedinstvene prednosti. JPEG je idealan za fotografije i slo\u017eene slike s mnogo boja, nudi izvrsne omjere kompresije, ali uz cijenu gubitka. PNG se isti\u010de u slikama s prozirno\u0161\u0107u, o\u0161trim rubovima i ograni\u010denim paletama boja, \u0161to ga \u010dini savr\u0161enim za logotipe i grafike, iako su veli\u010dine datoteka obi\u010dno ve\u0107e.\n\nWebP predstavlja sljede\u0107u generaciju web slika, pru\u017eaju\u0107i vrhunsku kompresiju u usporedbi s JPEG i PNG uz zadr\u017eavanje visoke kvalitete. Podr\u017eava kompresiju bez gubitaka i gubitaka, transparentnost i animaciju. Me\u0111utim, podr\u0161ka preglednika, iako opse\u017ena, nije univerzalna. AVIF je jo\u0161 noviji, nudi iznimne stope kompresije do 50% manje od JPEG-a, ali prihva\u0107anje preglednika i dalje raste.\n\nZa vektorsku grafiku poput logotipa, ikona i jednostavnih ilustracija, SVG je nepobjediv. Kao vektorski format, SVG slike se beskona\u010dno skaliraju bez gubitka kvalitete i \u010desto imaju malene veli\u010dine datoteka. Tako\u0111er ih je mogu\u0107e ure\u0111ivati \u200b\u200bpomo\u0107u koda i podr\u017eavaju interaktivnost, \u0161to ih \u010dini nevjerojatno svestranim za moderan web dizajn.<\/p>\n <ul class='guide-list'><li class='guide-list-item'>JPEG: Najbolji za fotografije i slo\u017eene slike<\/li><li class='guide-list-item'>PNG: Idealno za grafike s prozirno\u0161\u0107u i o\u0161trim rubovima<\/li><li class='guide-list-item'>WebP: moderan format s vrhunskom kompresijom<\/li><li class='guide-list-item'>AVIF: Najnoviji format s iznimnom kompresijom<\/li><li class='guide-list-item'>SVG: Savr\u0161en za skalabilnu vektorsku grafiku i ikone<\/li><\/ul>\n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Tehnike kompresije slike i postavke kvalitete<\/h2>\n <p class=\"guide-text\">Razumijevanje kompresije klju\u010dno je za balansiranje kvalitete slike i veli\u010dine datoteke. Kompresija s gubitkom, koju koriste formati kao \u0161to je JPEG, trajno uklanja slikovne podatke kako bi se smanjila veli\u010dina datoteke. Klju\u010d je pronala\u017eenje najboljeg mjesta gdje je kompresija maksimizirana uz odr\u017eavanje prihvatljive vizualne kvalitete. Za ve\u0107inu web slika, postavka JPEG kvalitete izme\u0111u 75-85% pru\u017ea izvrsnu ravnote\u017eu, iako to mo\u017ee varirati ovisno o sadr\u017eaju slike.\n\nKompresija bez gubitaka, koju koriste PNG i neke WebP slike, smanjuje veli\u010dinu datoteke bez gubitka kvalitete. Iako ovo zvu\u010di idealno, datoteke bez gubitaka obi\u010dno su mnogo ve\u0107e od svojih kopija s gubicima. Zbog toga je kompresija bez gubitaka najprikladnija za slike gdje je kvaliteta najva\u017enija, kao \u0161to su fotografije proizvoda za e-trgovinu ili slike koje \u0107e se dodatno ure\u0111ivati.\n\nNapredne tehnike kompresije uklju\u010duju progresivno u\u010ditavanje JPEG-a, koje prikazuje slike u sve ve\u0107im prijelazima kvalitete, i chroma subsampling, koje smanjuje informacije o boji na koje su ljudske o\u010di manje osjetljive. Moderni alati tako\u0111er nude perceptivnu optimizaciju, prilago\u0111avaju\u0107i kompresiju na temelju onoga \u0161to ljudsko oko najvi\u0161e primje\u0107uje, \u010desto posti\u017eu\u0107i bolje rezultate od tradicionalnih postavki kvalitete.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Rezolucija i responzivna optimizacija slike<\/h2>\n <p class=\"guide-text\">Moderni web dizajn zahtijeva slike koje izgledaju o\u0161tro na svemu, od pametnih telefona do 4K monitora. Klju\u010dno je razumijevanje gusto\u0107e piksela i mogu\u0107nosti ure\u0111aja. Slika \u0161irine 1200 piksela mogla bi biti savr\u0161ena za gledanje na stolnom ra\u010dunalu, ali je pretjerana za zaslon mobilnog ure\u0111aja od 375 piksela, gubi propusnost i usporava vrijeme u\u010ditavanja. Stvaranje vi\u0161e veli\u010dina slike osigurava da svaki ure\u0111aj dobije sliku odgovaraju\u0107e veli\u010dine.\n\nResponzivne slike koriste HTML-ov atribut srcset i element slike za poslu\u017eivanje razli\u010ditih slika na temelju veli\u010dine i rezolucije zaslona. Ova tehnika mo\u017ee smanjiti sadr\u017eaj slike za 50% ili vi\u0161e za mobilne korisnike. Na primjer, mo\u017eete poslu\u017eiti sliku od 400 px na mobilnim ure\u0111ajima, 800 px na tabletima i 1200 px na zaslonima stolnih ra\u010dunala. Zasloni visoke gusto\u0107e poput Retina zaslona zahtijevaju slike 2x rezolucije za o\u0161tar izgled.\n\nOdre\u0111ivanje veli\u010dine slike tako\u0111er treba uzeti u obzir stvarne dimenzije prikaza na va\u0161oj web stranici. Slika prikazana u \u0161irini od 300 piksela ne mora biti \u0161iroka 1200 piksela, bez obzira na zaslon korisnika. Uvijek optimizirajte slike za njihovu stvarnu veli\u010dinu prikaza i razmislite o kori\u0161tenju CSS-a za manje skaliranje umjesto poslu\u017eivanja prevelikih slika.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">Utjecaj na izvedbu i strategije u\u010ditavanja<\/h2>\n <p class=\"guide-text\">Slike zna\u010dajno utje\u010du na performanse web stranice, \u010desto predstavljaju 50-70% ukupne te\u017eine stranice. Velike, neoptimizirane slike me\u0111u glavnim su krivcima sporog u\u010ditavanja web stranica, izravno utje\u010du\u0107i na korisni\u010dko iskustvo i rangiranje u tra\u017eilicama. Svaka dodatna sekunda vremena u\u010ditavanja mo\u017ee pove\u0107ati stope odustajanja do 32%, \u010dine\u0107i optimizaciju slike klju\u010dnim za poslovanje.\n\nLijeno u\u010ditavanje mo\u0107na je tehnika koja odga\u0111a u\u010ditavanje slike sve dok ne u\u0111u u okvir za prikaz. Ovo dramati\u010dno pobolj\u0161ava po\u010detno vrijeme u\u010ditavanja stranice, posebno za stranice s velikim brojem slika. Moderni preglednici podr\u017eavaju izvorno lijeno u\u010ditavanje s atributom loading=”lazy”, dok JavaScript biblioteke pru\u017eaju napredniju kontrolu i \u0161iru podr\u0161ku preglednika.\n\nStrategije predu\u010ditavanja slika tako\u0111er mogu pobolj\u0161ati korisni\u010dko iskustvo. Kriti\u010dne slike na gornjoj polovici treba optimizirati za najbr\u017ee u\u010ditavanje, dok se slike na donjoj polovici mogu lijeno u\u010ditavati. Razmislite o kori\u0161tenju rezerviranih mjesta za slike niske kvalitete (LQIP) ili efekata zamu\u0107enja do o\u0161trine kako biste pru\u017eili trenutnu vizualnu povratnu informaciju dok se u\u010ditavaju slike pune rezolucije. Progresivno JPEG kodiranje omogu\u0107uje brzo pojavljivanje slika u niskoj kvaliteti, a zatim izo\u0161travanje kako se vi\u0161e podataka u\u010ditava.<\/p>\n \n <\/div>\n <div class=\"guide-content\">\n <h2 class=\"guide-section-title\">SEO i razmatranja pristupa\u010dnosti<\/h2>\n <p class=\"guide-text\">Tra\u017eilice smatraju brzinu stranice faktorom rangiranja, zbog \u010dega je optimizacija slike klju\u010dna za uspjeh SEO-a. Ispravno optimizirane slike poma\u017eu stranicama da se br\u017ee u\u010ditavaju, pridonose\u0107i boljem poretku u pretra\u017eivanju i korisni\u010dkom iskustvu. Osim toga, nazivi slikovnih datoteka i zamjenski tekst pru\u017eaju vrijedan kontekst tra\u017eilicama, poma\u017eu\u0107i da se va\u0161 sadr\u017eaj pojavi u rezultatima pretra\u017eivanja slika.\n\nPristupa\u010dnost zahtijeva promi\u0161ljen zamjenski tekst koji opisuje slikovni sadr\u017eaj za \u010dita\u010de zaslona i korisnike o\u0161te\u0107ena vida. Zamjenski tekst trebao bi biti deskriptivan, ali sa\u017eet, obja\u0161njavaju\u0107i \u0161to je na slici i njezinu svrhu u kontekstu. Za ukrasne slike koje ne dodaju informativnu vrijednost, koristite prazne alt atribute (alt=””) kako biste sprije\u010dili \u010dita\u010de zaslona da ih nepotrebno najavljuju.\n\nStrukturirani podaci i ozna\u010davanje sheme mogu pobolj\u0161ati na\u010din na koji tra\u017eilice razumiju i prikazuju va\u0161e slike. Ispravne slikovne karte stranica poma\u017eu tra\u017eilicama da u\u010dinkovitije otkriju i indeksiraju va\u0161e slike. Konvencije imenovanja datoteka trebale bi biti opisne i bogate klju\u010dnim rije\u010dima kada je relevantno, izbjegavaju\u0107i generi\u010dke nazive poput “image1.jpg” u korist opisnih naziva poput “crvene-tenisice-sprijeda-pogled.jpg”.<\/p>\n \n <\/div>\n\n\n \n <section class=\"features-section\">\n <h2 class=\"section-title\">Klju\u010dni podaci za van<\/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\">Odaberite pravi format<\/h3>\n <p class=\"feature-text\">Razli\u010diti formati slika izvrsni su u razli\u010ditim scenarijima. Uskla\u0111ivanje formata s vrstom sadr\u017eaja pove\u0107ava u\u010dinkovitost kompresije.<\/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\">Koristite JPEG za fotografije i slo\u017eene slike<\/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\">Odaberite PNG za grafiku s prozirno\u0161\u0107u<\/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\">Razmotrite WebP za bolju kompresiju svih vrsta slika<\/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\">Glavne postavke kompresije<\/h3>\n <p class=\"feature-text\">Pronala\u017eenje optimalne ravnote\u017ee izme\u0111u kvalitete i veli\u010dine datoteke klju\u010dno je za izvedbu weba bez \u017ertvovanja vizualne privla\u010dnosti.<\/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\">Ciljajte 75-85% kvalitete za ve\u0107inu JPEG slika<\/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\">Koristite kompresiju bez gubitaka samo kada je kvaliteta kriti\u010dna<\/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\">Testirajte razli\u010dite postavke kako biste prona\u0161li savr\u0161enu ravnote\u017eu<\/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\">Implementirajte responzivne slike<\/h3>\n <p class=\"feature-text\">Poslu\u017eivanje slika odgovaraju\u0107e veli\u010dine razli\u010ditim ure\u0111ajima smanjuje kori\u0161tenje propusnosti i zna\u010dajno pobolj\u0161ava vrijeme u\u010ditavanja.<\/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\">Stvorite vi\u0161e veli\u010dina slike za razli\u010dite veli\u010dine zaslona<\/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\">Koristite srcset i elemente slike za responzivnu isporuku<\/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\">Uzmite u obzir gusto\u0107u piksela za zaslone visoke razlu\u010divosti<\/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\">\u010cesto postavljana pitanja<\/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 Koja je idealna veli\u010dina datoteke za web slike?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Ne postoji jednozna\u010dan odgovor za sve, ali op\u0107enito ciljajte na manje od 100 KB za ve\u0107inu slika, ispod 20 KB za male grafike i ispod 1 MB za velike glavne slike. Klju\u010d je u ravnote\u017ei izme\u0111u kvalitete i brzine u\u010ditavanja na temelju va\u017enosti slike i veli\u010dine prikaza.<\/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 Trebam li koristiti WebP za sve slike svojih web stranica?\n <\/h3>\n <div class=\"faq-answer\">\n <p>WebP nudi izvrsnu kompresiju i kvalitetu, ali trebali biste ga implementirati s rezervnim JPEG ili PNG za starije preglednike. Upotrijebite element slike ili otkrivanje na strani poslu\u017eitelja za poslu\u017eivanje WebP-a u preglednicima koji ga podr\u017eavaju uz odr\u017eavanje kompatibilnosti.<\/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 Kako mogu optimizirati slike bez gubitka kvalitete?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Koristite alate za kompresiju bez gubitaka, odaberite odgovaraju\u0107e formate (PNG za grafiku, JPEG za fotografije) i promijenite veli\u010dinu slika na njihove stvarne dimenzije za prikaz. Za JPEG, postavke kvalitete izme\u0111u 80-90% \u010desto daju izvrsne rezultate s minimalnim vidljivim gubitkom kvalitete.<\/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 Koja je razlika izme\u0111u kompresije bez gubitaka i kompresije bez gubitaka?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Kompresija s gubitkom trajno uklanja slikovne podatke kako bi se postigla manja veli\u010dina datoteke, potencijalno smanjuju\u0107i kvalitetu. Kompresija bez gubitaka smanjuje veli\u010dinu datoteke bez gubitka kvalitete, ali obi\u010dno posti\u017ee manju kompresiju. Odaberite na temelju toga je li kvaliteta ili veli\u010dina datoteke va\u017enija.<\/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 Koliko je odlagano u\u010ditavanje va\u017eno za optimizaciju slike?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Lijeno u\u010ditavanje iznimno je va\u017eno za web stranice s velikim brojem slika. Mo\u017ee pobolj\u0161ati po\u010detno vrijeme u\u010ditavanja stranice za 20-50% u\u010ditavanjem slika samo kada je potrebno. Ovo je posebno korisno za mobilne korisnike i pobolj\u0161ava cjelokupno korisni\u010dko iskustvo i SEO rangiranje.<\/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 Mogu li pretvarati razli\u010dite formate slika kako bih optimizirao veli\u010dinu datoteke?\n <\/h3>\n <div class=\"faq-answer\">\n <p>Da, pretvaranje izme\u0111u formata \u010desto je naju\u010dinkovitija tehnika optimizacije. Pretvaranje PNG fotografija u JPEG ili pretvaranje stati\u010dnih slika u moderne formate poput WebP ili AVIF mo\u017ee dramati\u010dno smanjiti veli\u010dinu datoteka uz zadr\u017eavanje kvalitete.<\/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\">Primijenite svoje znanje u praksi<\/h2>\n <p class=\"cta-text\">Sada kada ste razumjeli koncepte, poku\u0161ajte Convertify primijeniti ono \u0161to ste nau\u010dili. Besplatne, neograni\u010dene konverzije bez potrebe za ra\u010dunom.<\/p>\n <div class=\"hero-buttons\">\n <a href=\"\/download\" class=\"btn btn-primary\">Preuzmite Convertify besplatno<\/a>\n <a href=\"\/guides\" class=\"btn btn-secondary\">Vi\u0161e vodi\u010da<\/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>Kompletan vodi\u010d za optimizaciju web slika: Formati, kompresija i brzina Vodi\u010d za optimizaciju web slika Opse\u017ean vodi\u010d koji \u0107e vam […]<\/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":"Kompletan vodi\u010d za optimizaciju web slika: Formati, kompresija i brzina Vodi\u010d za optimizaciju web slika Opse\u017ean vodi\u010d koji \u0107e vam […]","_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}]}}