{"id":921,"date":"2026-11-09T08:18:57","date_gmt":"2026-11-09T08:18:57","guid":{"rendered":"https:\/\/coolmedialife.com\/?p=921"},"modified":"2026-11-09T08:45:37","modified_gmt":"2026-11-09T08:45:37","slug":"part-6-settings-formats","status":"publish","type":"post","link":"https:\/\/coolmedialife.com\/index.php\/heic-image-viewer\/part-6-settings-formats\/","title":{"rendered":"HEIC +Converter\u00a0\u2013 Settings"},"content":{"rendered":"\n<style>\n\/* ==========================================================================\n   HEIC +Converter \u2014 User Guide for coolmedialife.com\n   Theme: Occasio. Everything is scoped to #hc-guide, and colors\/fonts are\n   taken from the theme's own CSS variables where they exist, so the guide\n   inherits the site's typography, navy headings and steel-blue links.\n   Prefix: hc-\n   ========================================================================== *\/\n\n#hc-guide {\n  \/* Theme tokens first, hard fallbacks second. *\/\n  --hc-ink: var(--text-color, rgba(0, 0, 0, .9));\n  --hc-ink2: var(--medium-text-color, rgba(0, 0, 0, .7));\n  --hc-ink3: var(--light-text-color, rgba(0, 0, 0, .5));\n  --hc-line: var(--light-border-color, rgba(0, 0, 0, .1));\n  --hc-line2: var(--medium-border-color, rgba(0, 0, 0, .22));\n  --hc-accent: var(--link-color, #5d7b94);\n  --hc-accent-hover: var(--link-hover-color, #2a4861);\n  --hc-accent-soft: #eff4f7;\n  --hc-title: var(--title-color, #2a4861);\n  --hc-head-bg: var(--light-gray-color, #ededef);\n  --hc-ok: var(--accent-color, #60945d);\n  --hc-ok-soft: #f0f6ef;\n  --hc-warn: #8a5300;\n  --hc-warn-soft: #fdf6e7;\n\n  \/* Product colors: the app's own accent, plus one mark per format family. *\/\n  --hc-brand: #e74c3c;\n  --hc-brand-soft: #fdeeeb;\n  --hc-fmt-jpeg: #c0392b;\n  --hc-fmt-png: #217346;\n  --hc-fmt-archive: #4a6b8a;\n  --hc-fmt-other: #5a5a5a;\n\n  --hc-mono: \"Cascadia Mono\", Consolas, \"Courier New\", monospace;\n\n  color: var(--hc-ink);\n  max-width: 100%;\n  text-align: left;\n}\n\n#hc-guide *,\n#hc-guide *::before,\n#hc-guide *::after {\n  box-sizing: border-box;\n}\n\n\/* ---------- Text ---------- *\/\n\n#hc-guide p {\n  margin: 0 0 1em;\n}\n\n#hc-guide h2 {\n  margin: 2.2em 0 .65em;\n  padding: 0 0 .35em;\n  font-size: 1.5rem;\n  line-height: 1.35;\n  letter-spacing: -.01em;\n  color: var(--hc-title);\n  border-bottom: 1px solid var(--hc-line);\n}\n\n#hc-guide h3 {\n  margin: 1.7em 0 .45em;\n  font-size: 1.15rem;\n  line-height: 1.45;\n  letter-spacing: 0;\n  color: var(--hc-title);\n}\n\n#hc-guide h2[id] {\n  \/* No sticky header on this theme; small offset keeps the heading off the edge. *\/\n  scroll-margin-top: 24px;\n}\n\n#hc-guide a {\n  color: var(--hc-accent);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n#hc-guide a:hover,\n#hc-guide a:focus {\n  color: var(--hc-accent-hover);\n}\n\n#hc-guide strong {\n  color: var(--hc-ink);\n}\n\n#hc-guide ul,\n#hc-guide ol {\n  margin: 0 0 1em;\n  padding-left: 22px;\n}\n\n#hc-guide li {\n  margin: 0 0 .4em;\n}\n\n#hc-guide li:last-child {\n  margin-bottom: 0;\n}\n\n#hc-guide code {\n  font-family: var(--hc-mono);\n  font-size: .85em;\n  padding: .05em .32em;\n  color: #2b3138;\n  background: #f4f6f8;\n  border: 1px solid var(--hc-line);\n  border-radius: 3px;\n  white-space: nowrap;\n}\n\n#hc-guide kbd {\n  display: inline-block;\n  min-width: 22px;\n  padding: 1px 6px;\n  font-family: var(--hc-mono);\n  font-size: .78em;\n  line-height: 1.6;\n  text-align: center;\n  color: #2b3138;\n  background: #fafafa;\n  border: 1px solid var(--hc-line2);\n  border-bottom-width: 2px;\n  border-radius: 4px;\n}\n\n\/* ---------- Intro ---------- *\/\n\n#hc-guide .hc-lede {\n  font-size: 1.05em;\n  color: var(--hc-ink2);\n  margin-bottom: .6em;\n}\n\n#hc-guide .hc-meta {\n  margin: 0 0 1.2em;\n  font-size: .82em;\n  color: var(--hc-ink3);\n}\n\n#hc-guide .hc-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin: 0 0 .4em;\n}\n\n#hc-guide .hc-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 3px 11px 3px 4px;\n  font-size: .78em;\n  line-height: 1.6;\n  color: var(--hc-ink2);\n  background: #fff;\n  border: 1px solid var(--hc-line);\n  border-radius: 999px;\n}\n\n#hc-guide .hc-chip b {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  flex: 0 0 auto;\n  color: #fff;\n  font-size: 9.5px;\n  font-weight: 700;\n  border-radius: 5px;\n}\n\n#hc-guide .hc-chip.hc-jpeg b { background: var(--hc-fmt-jpeg); }\n#hc-guide .hc-chip.hc-png b { background: var(--hc-fmt-png); }\n#hc-guide .hc-chip.hc-archive b { background: var(--hc-fmt-archive); }\n#hc-guide .hc-chip.hc-tool b { background: var(--hc-fmt-other); }\n\n\/* ---------- Contents ---------- *\/\n\n#hc-guide .hc-toc {\n  margin: 1.6em 0 .4em;\n  padding: 16px 20px 14px;\n  background: #f7f9fa;\n  border: 1px solid var(--hc-line);\n  border-radius: 6px;\n}\n\n#hc-guide .hc-toc-title {\n  margin: 0 0 8px;\n  font-size: .72rem;\n  font-weight: 700;\n  letter-spacing: .08em;\n  text-transform: uppercase;\n  color: var(--hc-ink3);\n}\n\n#hc-guide .hc-toc-list {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 2px 26px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n#hc-guide .hc-toc-list li {\n  margin: 0;\n  list-style: none;\n}\n\n#hc-guide .hc-toc-list a {\n  display: block;\n  padding: 3px 0;\n  font-size: .93em;\n  color: var(--hc-ink2);\n  text-decoration: none;\n}\n\n#hc-guide .hc-toc-list a:hover {\n  color: var(--hc-accent-hover);\n  text-decoration: underline;\n}\n\n\/* ---------- Feature cards ---------- *\/\n\n#hc-guide .hc-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n  margin: 1.3em 0 1.5em;\n}\n\n#hc-guide .hc-card {\n  padding: 14px 16px;\n  background: #fff;\n  border: 1px solid var(--hc-line);\n  border-radius: 6px;\n}\n\n#hc-guide .hc-card-head {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  margin-bottom: 4px;\n}\n\n#hc-guide .hc-card-mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  flex: 0 0 auto;\n  color: #fff;\n  font-size: 10px;\n  font-weight: 700;\n  border-radius: 5px;\n}\n\n#hc-guide .hc-mark-jpeg { background: var(--hc-fmt-jpeg); }\n#hc-guide .hc-mark-png { background: var(--hc-fmt-png); }\n#hc-guide .hc-mark-archive { background: var(--hc-fmt-archive); }\n#hc-guide .hc-mark-other { background: var(--hc-fmt-other); }\n\n#hc-guide .hc-card h4 {\n  margin: 0;\n  font-size: 1em;\n  font-weight: 700;\n  line-height: 1.4;\n  color: var(--hc-ink);\n}\n\n#hc-guide .hc-card p {\n  margin: 0;\n  font-size: .88em;\n  line-height: 1.65;\n  color: var(--hc-ink2);\n}\n\n\/* ---------- Callouts ---------- *\/\n\n#hc-guide .hc-note {\n  display: grid;\n  grid-template-columns: 18px minmax(0, 1fr);\n  gap: 10px;\n  margin: 1.2em 0;\n  padding: 13px 15px;\n  font-size: .95em;\n  line-height: 1.7;\n  color: var(--hc-ink2);\n  background: var(--hc-accent-soft);\n  border: 1px solid var(--hc-line);\n  border-left: 3px solid var(--hc-accent);\n  border-radius: 4px;\n}\n\n#hc-guide .hc-note p {\n  margin: 0;\n}\n\n#hc-guide .hc-note p + p {\n  margin-top: .5em;\n}\n\n#hc-guide .hc-note-ico {\n  font-weight: 700;\n  line-height: 1.7;\n  text-align: center;\n  color: var(--hc-accent-hover);\n}\n\n#hc-guide .hc-note.hc-tip {\n  background: var(--hc-ok-soft);\n  border-left-color: var(--hc-ok);\n}\n\n#hc-guide .hc-note.hc-tip .hc-note-ico {\n  color: var(--hc-ok);\n}\n\n#hc-guide .hc-note.hc-warn {\n  background: var(--hc-warn-soft);\n  border-left-color: #b0761a;\n}\n\n#hc-guide .hc-note.hc-warn .hc-note-ico {\n  color: var(--hc-warn);\n}\n\n\/* ---------- Tables ---------- *\/\n\n#hc-guide .hc-table {\n  margin: 1.2em 0 1.5em;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n#hc-guide table {\n  width: 100%;\n  margin: 0;\n  border: 1px solid var(--hc-line);\n  border-collapse: collapse;\n  background: #fff;\n  font-size: .88em;\n  line-height: 1.6;\n}\n\n#hc-guide thead th {\n  padding: 8px 11px;\n  text-align: left;\n  font-size: .72em;\n  font-weight: 700;\n  letter-spacing: .05em;\n  text-transform: uppercase;\n  color: var(--hc-ink2);\n  background: #f4f5f6;\n  border: 0;\n  border-bottom: 1px solid var(--hc-line2);\n  white-space: nowrap;\n}\n\n#hc-guide tbody td {\n  padding: 9px 11px;\n  vertical-align: top;\n  color: var(--hc-ink2);\n  border: 0;\n  border-bottom: 1px solid var(--hc-line);\n}\n\n#hc-guide tbody tr:last-child td {\n  border-bottom: 0;\n}\n\n#hc-guide tbody td:first-child {\n  color: var(--hc-ink);\n}\n\n#hc-guide .hc-mono-list {\n  font-family: var(--hc-mono);\n  font-size: .86em;\n  line-height: 1.8;\n  overflow-wrap: anywhere;\n}\n\n\/* ---------- Numbered steps ---------- *\/\n\n#hc-guide ol.hc-steps {\n  margin: 1.1em 0 1.3em;\n  padding: 0;\n  list-style: none;\n  counter-reset: hc-step;\n}\n\n#hc-guide ol.hc-steps > li {\n  position: relative;\n  margin: 0 0 .65em;\n  padding-left: 32px;\n  list-style: none;\n  counter-increment: hc-step;\n}\n\n#hc-guide ol.hc-steps > li::before {\n  content: counter(hc-step);\n  position: absolute;\n  left: 0;\n  top: 3px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 21px;\n  height: 21px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--hc-accent-hover);\n  background: var(--hc-accent-soft);\n  border: 1px solid var(--hc-line);\n  border-radius: 50%;\n}\n\n\/* ---------- Window diagram ---------- *\/\n\n#hc-guide .hc-wire {\n  margin: 1.3em 0 0;\n  overflow: hidden;\n  background: #fff;\n  border: 1px solid var(--hc-line2);\n  border-radius: 6px;\n}\n\n#hc-guide .hc-wire-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: 27px;\n  padding: 0 10px;\n  font-size: 10.5px;\n  color: var(--hc-ink2);\n  background: #fafbfb;\n  border-bottom: 1px solid var(--hc-line);\n}\n\n#hc-guide .hc-wire-btns {\n  display: flex;\n  gap: 9px;\n  color: var(--hc-ink3);\n  font-size: 10px;\n}\n\n#hc-guide .hc-wire-hero {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 76px;\n  background: var(--hc-brand);\n}\n\n#hc-guide .hc-wire-drop {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  width: 78%;\n  height: 54px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #fff;\n  background: rgba(255, 255, 255, .06);\n  border: 1px dashed rgba(255, 255, 255, .75);\n  border-radius: 6px;\n}\n\n#hc-guide .hc-wire-drop span {\n  font-size: 9px;\n  font-weight: 400;\n  text-decoration: underline;\n  opacity: .9;\n}\n\n#hc-guide .hc-wire-head,\n#hc-guide .hc-wire-row {\n  display: grid;\n  grid-template-columns: minmax(0, 2.2fr) 58px 86px minmax(0, 1.2fr) 66px;\n  gap: 8px;\n  align-items: center;\n  padding: 0 10px;\n  font-size: 9.5px;\n  color: var(--hc-ink2);\n}\n\n#hc-guide .hc-wire-head {\n  height: 24px;\n  font-size: 9px;\n  letter-spacing: .04em;\n  text-transform: uppercase;\n  color: var(--hc-ink3);\n  background: #eeeef2;\n  border-bottom: 1px solid var(--hc-line);\n}\n\n#hc-guide .hc-wire-row {\n  height: 26px;\n  background: #fff;\n  border-bottom: 1px solid #f0f1f3;\n}\n\n#hc-guide .hc-wire-foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 7px 10px;\n  font-size: 9.5px;\n  color: var(--hc-ink2);\n  background: #f2f4f7;\n  border-top: 1px solid var(--hc-line);\n}\n\n#hc-guide .hc-wire-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n\n#hc-guide .hc-wire-fields b {\n  font-weight: 600;\n  color: var(--hc-ink);\n}\n\n#hc-guide .hc-wire-cta {\n  flex: 0 0 auto;\n  padding: 7px 26px;\n  font-size: 10px;\n  font-weight: 700;\n  color: #fff;\n  background: var(--hc-brand);\n  border-radius: 4px;\n}\n\n#hc-guide .hc-wire-ok { color: #2f7d32; font-weight: 600; }\n#hc-guide .hc-wire-busy { color: var(--hc-accent-hover); font-weight: 600; }\n#hc-guide .hc-wire-ops { color: var(--hc-accent); }\n\n\/* Checkboxes in the diagram are drawn, not typed: the glyph at 9px is a\n   hairline. A filled square reads cleanly at any zoom. *\/\n#hc-guide .hc-box {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  margin-right: 4px;\n  background: #fff;\n  border: 1px solid var(--hc-line2);\n  border-radius: 2px;\n  vertical-align: baseline;\n}\n\n#hc-guide .hc-box.hc-box-on {\n  background: var(--hc-accent-hover);\n  border-color: var(--hc-accent-hover);\n}\n\n#hc-guide .hc-caption {\n  margin: .6em 0 0;\n  font-size: .82em;\n  line-height: 1.6;\n  color: var(--hc-ink3);\n}\n\n\/* ---------- Small screens ---------- *\/\n\n@media (max-width: 700px) {\n  #hc-guide .hc-grid,\n  #hc-guide .hc-toc-list {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  #hc-guide .hc-wire-head,\n  #hc-guide .hc-wire-row {\n    grid-template-columns: minmax(0, 1.6fr) 52px minmax(0, 1fr);\n  }\n\n  #hc-guide .hc-wire-head > :nth-child(3),\n  #hc-guide .hc-wire-head > :nth-child(5),\n  #hc-guide .hc-wire-row > :nth-child(3),\n  #hc-guide .hc-wire-row > :nth-child(5) {\n    display: none;\n  }\n}\n\n\/* ---------- Print ---------- *\/\n\n@media print {\n  #hc-guide {\n    color: #000;\n  }\n\n  #hc-guide .hc-toc {\n    display: none;\n  }\n\n  #hc-guide h2 {\n    break-after: avoid;\n    page-break-after: avoid;\n  }\n\n  #hc-guide .hc-table,\n  #hc-guide .hc-note,\n  #hc-guide .hc-card,\n  #hc-guide .hc-wire {\n    break-inside: avoid;\n    page-break-inside: avoid;\n  }\n\n  #hc-guide a {\n    color: #000;\n    text-decoration: none;\n  }\n}\n\n\/* --------------------------------------------------------------------------\n   Part kicker (pages 2-7) and the page-number pager.\n   The theme prints wp_link_pages() immediately after the_content(), inside\n   .entry-content but outside #hc-guide, so the pager rules below are scoped\n   to .entry-content instead of the guide wrapper.\n   -------------------------------------------------------------------------- *\/\n#hc-guide .hc-part {\n  margin: 0 0 1.1rem;\n  font-size: .72rem;\n  font-weight: 700;\n  letter-spacing: .09em;\n  text-transform: uppercase;\n  color: var(--hc-ink3);\n}\n\n.entry-content .post-nav-links {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  gap: 6px;\n  margin: 2.6rem 0 .2rem;\n  font-size: 0;\n  line-height: 1;\n}\n.entry-content .post-nav-links a,\n.entry-content .post-nav-links .post-page-numbers {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 34px;\n  height: 34px;\n  padding: 0 9px;\n  font-size: .85rem;\n  font-weight: 600;\n  line-height: 1;\n  color: #5d7b94;\n  background: #fff;\n  border: 1px solid rgba(0, 0, 0, .22);\n  border-radius: 6px;\n  text-decoration: none;\n  transition: background .15s ease, color .15s ease, border-color .15s ease;\n}\n.entry-content .post-nav-links a:hover,\n.entry-content .post-nav-links a:focus {\n  color: #fff;\n  background: #5d7b94;\n  border-color: #5d7b94;\n}\n.entry-content .post-nav-links .current {\n  color: #fff;\n  background: #2a4861;\n  border-color: #2a4861;\n  cursor: default;\n}\n\n\/* --------------------------------------------------------------------------\n   Multi-page layout: right rail with the seven parts, plus the bottom pager.\n   Each part is its own WordPress post, and the theme caps single-post content\n   at 800px, so #hc-guide is widened below to 800px body + 200px rail.\n   The rail comes *after* the body in the markup; it is moved to the second\n   column by source order, so no grid placement juggling is needed.\n   Links are sibling-relative (..\/part-3-convert\/), so they survive any\n   permalink structure.\n   -------------------------------------------------------------------------- *\/\n#hc-guide .hc-layout {\n  display: grid;\n  grid-template-columns: minmax(0, 800px) 200px;\n  gap: 40px;\n  \/* Body text starts at the very left edge of the post column instead of\n     floating in the middle: the leftover width goes to the right of the rail,\n     where there is nothing to look at. *\/\n  justify-content: start;\n  align-items: start;\n}\n#hc-guide .hc-body {\n  min-width: 0;\n}\n\n#hc-guide .hc-rail {\n  position: sticky;\n  top: 24px;\n  font-size: .82rem;\n  line-height: 1.4;\n}\n#hc-guide .hc-rail-title {\n  margin: 0 0 .75rem;\n  font-size: .7rem;\n  font-weight: 700;\n  letter-spacing: .09em;\n  text-transform: uppercase;\n  color: var(--hc-ink3);\n}\n#hc-guide .hc-rail-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-right: 2px solid var(--hc-line);\n}\n#hc-guide .hc-rail-list li {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\/* Right-hand rail: the list reads left-to-right (number, then label) and is\n   left-aligned with the rest of the guide; only the accent border sits on the\n   right edge, so the column still points back at the body text. *\/\n#hc-guide .hc-rail-list a {\n  display: block;\n  padding: 5px 11px 5px 10px;\n  margin-right: -2px;\n  border-right: 2px solid transparent;\n  color: var(--hc-ink2);\n  text-align: left;\n  text-decoration: none;\n  transition: color .15s ease, border-color .15s ease;\n}\n#hc-guide .hc-rail-list a:hover,\n#hc-guide .hc-rail-list a:focus {\n  color: var(--hc-accent);\n  border-right-color: var(--hc-line2);\n}\n#hc-guide .hc-rail-list a.is-current {\n  color: var(--hc-title);\n  font-weight: 600;\n  border-right-color: var(--hc-accent);\n}\n#hc-guide .hc-rail-num {\n  display: inline-block;\n  width: 1.1em;\n  margin-right: .25em;\n  color: var(--hc-ink3);\n  font-variant-numeric: tabular-nums;\n}\n\n\/* Hand-off card between the last section and the pager. One clear sentence\n   about the next part beats a row of bare page numbers. *\/\n#hc-guide .hc-cta {\n  position: relative;\n  display: block;\n  margin: 2.4rem 0 0;\n  padding: 16px 62px 16px 18px;\n  background: #fff;\n  border: 1px solid var(--hc-line2);\n  border-left: 3px solid var(--hc-brand);\n  border-radius: 8px;\n  text-decoration: none;\n  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;\n}\n#hc-guide .hc-cta:hover,\n#hc-guide .hc-cta:focus {\n  background: var(--hc-brand-soft);\n  border-color: var(--hc-brand);\n  box-shadow: 0 4px 14px rgba(231, 76, 60, .12);\n}\n#hc-guide .hc-cta-kicker {\n  display: block;\n  font-size: .68rem;\n  font-weight: 700;\n  letter-spacing: .09em;\n  line-height: 1.4;\n  text-transform: uppercase;\n  color: var(--hc-brand);\n}\n#hc-guide .hc-cta-title {\n  display: block;\n  margin: .25rem 0 .3rem;\n  font-size: 1.08rem;\n  font-weight: 700;\n  line-height: 1.3;\n  color: var(--hc-title);\n}\n#hc-guide .hc-cta-note {\n  display: block;\n  font-size: .88rem;\n  line-height: 1.5;\n  color: var(--hc-ink2);\n}\n#hc-guide .hc-cta-arrow {\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  margin-top: -18px;\n  font-size: 1.5rem;\n  line-height: 1;\n  color: var(--hc-brand);\n  background: var(--hc-brand-soft);\n  border-radius: 50%;\n  transition: transform .15s ease, color .15s ease, background .15s ease;\n}\n#hc-guide .hc-cta:hover .hc-cta-arrow,\n#hc-guide .hc-cta:focus .hc-cta-arrow {\n  color: #fff;\n  background: var(--hc-brand);\n  transform: translateX(3px);\n}\n\n#hc-guide .hc-pager {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  margin: 1.6rem 0 .4rem;\n  padding-top: 1.4rem;\n  border-top: 1px solid var(--hc-line);\n}\n#hc-guide .hc-pager a,\n#hc-guide .hc-pager span {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 34px;\n  height: 34px;\n  padding: 0 9px;\n  font-size: .85rem;\n  font-weight: 600;\n  line-height: 1;\n  color: var(--hc-accent);\n  background: #fff;\n  border: 1px solid var(--hc-line2);\n  border-radius: 6px;\n  text-decoration: none;\n  transition: background .15s ease, color .15s ease, border-color .15s ease;\n}\n#hc-guide .hc-pager a:hover,\n#hc-guide .hc-pager a:focus {\n  color: #fff;\n  background: var(--hc-accent);\n  border-color: var(--hc-accent);\n}\n#hc-guide .hc-pager .is-current {\n  color: #fff;\n  background: #2a4861;\n  border-color: #2a4861;\n  cursor: default;\n}\n#hc-guide .hc-pager .is-disabled {\n  color: var(--hc-ink3);\n  border-color: var(--hc-line);\n  background: #fff;\n  opacity: .45;\n  cursor: default;\n}\n#hc-guide .hc-pager-link {\n  font-size: 1rem;\n  padding: 0 10px;\n}\n\n@media (max-width: 879px) {\n  #hc-guide .hc-layout {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 20px;\n  }\n  \/* The rail follows the body in the markup, so pull it back above the text\n     once the layout collapses to a single column. *\/\n  #hc-guide .hc-rail {\n    position: static;\n    order: -1;\n  }\n  #hc-guide .hc-rail-title {\n    margin-bottom: .5rem;\n  }\n  #hc-guide .hc-rail-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    border-right: 0;\n  }\n  #hc-guide .hc-rail-list a {\n    margin-right: 0;\n    padding: 4px 9px;\n    border: 1px solid var(--hc-line2);\n    border-radius: 6px;\n  }\n  #hc-guide .hc-rail-list a:hover,\n  #hc-guide .hc-rail-list a:focus {\n    border-color: var(--hc-accent);\n  }\n  #hc-guide .hc-rail-list a.is-current {\n    color: #fff;\n    background: #2a4861;\n    border-color: #2a4861;\n  }\n  #hc-guide .hc-rail-num {\n    color: inherit;\n  }\n}\n\n\/* --------------------------------------------------------------------------\n   Guide pages run wider than a normal post.\n   These seven parts are posts (so part 1 can keep the exact URL the app opens),\n   and the theme caps single-post content at 800px. :has(#hc-guide) keeps the\n   widening and the sidebar removal strictly scoped to pages carrying the guide,\n   so the rest of the blog is untouched.\n   -------------------------------------------------------------------------- *\/\n@media (min-width: 880px) {\n  body.single:has(#hc-guide) .site-content,\n  body.page:has(#hc-guide) .site-content {\n    display: block;\n  }\n  body.single:has(#hc-guide) .site-content .site-main,\n  body.page:has(#hc-guide) .site-content .site-main {\n    max-width: 1160px;\n    flex-basis: auto;\n  }\n  body.single:has(#hc-guide) .site-content .sidebar,\n  body.page:has(#hc-guide) .site-content .sidebar {\n    display: none;\n  }\n}\n<\/style>\n\n<div id=\"hc-guide\">\n  <div class=\"hc-layout\">\n    <div class=\"hc-body\">\n      <p class=\"hc-part\">Part 6 of 7 &middot; Settings &amp; reference<\/p>\n      <nav class=\"hc-toc\" aria-label=\"On this page\">\n        <p class=\"hc-toc-title\">On this page<\/p>\n        <ul class=\"hc-toc-list\">\n          <li><a href=\"#hc-settings\">Settings<\/a><\/li>\n          <li><a href=\"#hc-formats\">Supported formats<\/a><\/li>\n          <li><a href=\"#hc-keyboard\">Shortcut reference<\/a><\/li>\n        <\/ul>\n      <\/nav>\n\n<h2 id=\"hc-settings\">Settings<\/h2>\n\n  <p>Six controls sit between the list and the <em>Convert<\/em> button. Only the output folder is remembered between sessions; the rest fall back to their defaults each time you start the app.<\/p>\n\n  <div class=\"hc-table\">\n    <table>\n      <thead>\n        <tr><th>Control<\/th><th>What it does<\/th><th>Default<\/th><\/tr>\n      <\/thead>\n      <tbody>\n        <tr><td>Output Folder<\/td><td>Destination for the batch. <code>&hellip;<\/code> picks a new one; <em>Open Output Folder<\/em> opens the current one in Explorer.<\/td><td>Pictures &middot; remembered<\/td><\/tr>\n        <tr><td>Format<\/td><td>Extension applied to every output file in the run.<\/td><td><code>.jpeg<\/code><\/td><\/tr>\n        <tr><td>Open folder after convert<\/td><td>Opens the output folder in Explorer when a run finishes.<\/td><td>On<\/td><\/tr>\n        <tr><td>Save EXIF info<\/td><td>Keeps EXIF \/ XMP \/ IPTC metadata in the converted file. The colour profile is always kept.<\/td><td>On<\/td><\/tr>\n        <tr><td>Quality<\/td><td>JPEG \/ JPG output quality, 1&ndash;100. Greyed out for every other format.<\/td><td>90<\/td><\/tr>\n        <tr><td>Reset<\/td><td>Puts the quality back to 90. Visible but greyed out while you are already at 90.<\/td><td>&mdash;<\/td><\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n\n  <p><em>Show EXIF<\/em> sits next to <em>Save EXIF info<\/em> because it is about the same subject, but it is not a setting: it opens a read-only window (see <a href=\"..\/part-5-exif\/#hc-exif\">EXIF info<\/a>).<\/p>\n\n  <div class=\"hc-note\">\n    <span class=\"hc-note-ico\" aria-hidden=\"true\">i<\/span>\n    <p><strong>Why quality is disabled for most formats.<\/strong> PNG and TIFF are lossless &mdash; a &#8220;quality&#8221; number would silently change the compression level, not the picture. BMP, GIF, SVG and XPM have no quality parameter at all. Rather than let the slider pretend, it is greyed out.<\/p>\n  <\/div>\n\n<h2 id=\"hc-formats\">Supported formats<\/h2>\n\n  <p><strong>In:<\/strong> <code>.heic<\/code> and <code>.heif<\/code>. Nothing else is accepted, and there is no &#8220;convert to HEIC&#8221; direction &mdash; HEIC is input only.<\/p>\n\n  <div class=\"hc-table\">\n    <table>\n      <thead>\n        <tr><th>Output<\/th><th>Compression<\/th><th>Quality slider<\/th><th>Good for<\/th><\/tr>\n      <\/thead>\n      <tbody>\n        <tr><td>.jpeg<\/td><td>Lossy<\/td><td>Yes<\/td><td>The default. Photos for sharing, email, any Windows or Android app.<\/td><\/tr>\n        <tr><td>.jpg<\/td><td>Lossy<\/td><td>Yes<\/td><td>Same encoder as JPEG; the extension some upload forms insist on.<\/td><\/tr>\n        <tr><td>.png<\/td><td>Lossless<\/td><td>No<\/td><td>Screenshots, text, flat colour, transparency-friendly workflows.<\/td><\/tr>\n        <tr><td>.bmp<\/td><td>None<\/td><td>No<\/td><td>Maximum compatibility for odd legacy tools. Very large files.<\/td><\/tr>\n        <tr><td>.tiff<\/td><td>Lossless<\/td><td>No<\/td><td>Archiving and print pipelines that expect TIFF.<\/td><\/tr>\n        <tr><td>.gif<\/td><td>Lossy palette<\/td><td>No<\/td><td>The 256-colour case: where a GIF is explicitly required.<\/td><\/tr>\n        <tr><td>.svg<\/td><td>Wrapper<\/td><td>No<\/td><td>Placing the photo in vector layouts; the pixels are embedded, not re-drawn.<\/td><\/tr>\n        <tr><td>.xpm<\/td><td>Text<\/td><td>No<\/td><td>X11 \/ legacy Unix assets.<\/td><\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n\n  <p>The output file always keeps the source base name and gets the chosen extension, written into the output folder. See <a href=\"..\/part-3-convert\/#hc-output\">Where the files go<\/a> for the collision rule.<\/p>\n\n<h2 id=\"hc-keyboard\">Shortcut reference<\/h2>\n\n  <p>One table for the whole app. Everything here applies to the viewer, which is the only window with shortcuts; the main window is mouse-driven.<\/p>\n\n  <div class=\"hc-table\">\n    <table>\n      <thead>\n        <tr><th>Action<\/th><th>Mouse<\/th><th>Keyboard<\/th><\/tr>\n      <\/thead>\n      <tbody>\n        <tr><td>Zoom in \/ out<\/td><td>Wheel, or the &plusmn; buttons<\/td><td><kbd>+<\/kbd> \/ <kbd>&minus;<\/kbd><\/td><\/tr>\n        <tr><td>Fit to window<\/td><td>Double-click the photo, or <em>Fit<\/em><\/td><td><kbd>0<\/kbd> \/ <kbd>Ctrl<\/kbd>+<kbd>0<\/kbd><\/td><\/tr>\n        <tr><td>Actual size<\/td><td><em>1:1<\/em><\/td><td><kbd>1<\/kbd> \/ <kbd>Ctrl<\/kbd>+<kbd>1<\/kbd><\/td><\/tr>\n        <tr><td>Previous \/ next photo<\/td><td>&lsaquo; &nbsp; &rsaquo;<\/td><td><kbd>&larr;<\/kbd> \/ <kbd>&rarr;<\/kbd>, <kbd>Page Up<\/kbd> \/ <kbd>Page Down<\/kbd><\/td><\/tr>\n        <tr><td>Rotate<\/td><td>&#8634; &nbsp; &#8635;<\/td><td><kbd>Ctrl<\/kbd>+<kbd>L<\/kbd> \/ <kbd>Ctrl<\/kbd>+<kbd>R<\/kbd><\/td><\/tr>\n        <tr><td>Copy photo<\/td><td>&mdash;<\/td><td><kbd>Ctrl<\/kbd>+<kbd>C<\/kbd><\/td><\/tr>\n        <tr><td>Full screen<\/td><td>Full-screen button<\/td><td><kbd>F11<\/kbd><\/td><\/tr>\n        <tr><td>Close \/ leave full screen<\/td><td>The window&#8217;s close button<\/td><td><kbd>Esc<\/kbd><\/td><\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n\n      <a class=\"hc-cta\" href=\"..\/part-7-troubleshooting-faq\/\">\n        <span class=\"hc-cta-kicker\">Next &middot; part 7 of 7<\/span>\n        <span class=\"hc-cta-title\">Troubleshooting &amp; FAQ<\/span>\n        <span class=\"hc-cta-note\">Files that refuse to convert, blank thumbnails, overwritten outputs &mdash; and the fix for each.<\/span>\n        <span class=\"hc-cta-arrow\" aria-hidden=\"true\">&rsaquo;<\/span>\n      <\/a>\n\n      <nav class=\"hc-pager\" aria-label=\"Guide pages\">\n        <a class=\"hc-pager-link\" href=\"..\/part-5-exif\/\" aria-label=\"Previous page\">&lsaquo;<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/converter-what-you-want\/\">1<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/part-2-add-photos\/\">2<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/part-3-convert\/\">3<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/part-4-viewer\/\">4<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/part-5-exif\/\">5<\/a>\n        <span class=\"hc-pager-num is-current\" aria-current=\"page\">6<\/span>\n        <a class=\"hc-pager-num\" href=\"..\/part-7-troubleshooting-faq\/\">7<\/a>\n        <a class=\"hc-pager-link\" href=\"..\/part-7-troubleshooting-faq\/\" aria-label=\"Next page\">&rsaquo;<\/a>\n      <\/nav>\n    <\/div>\n\n    <aside class=\"hc-rail\">\n      <p class=\"hc-rail-title\">User guide<\/p>\n      <ol class=\"hc-rail-list\">\n        <li><a href=\"..\/converter-what-you-want\/\"><span class=\"hc-rail-num\">1<\/span>Why &amp; overview<\/a><\/li>\n        <li><a href=\"..\/part-2-add-photos\/\"><span class=\"hc-rail-num\">2<\/span>Install &amp; add photos<\/a><\/li>\n        <li><a href=\"..\/part-3-convert\/\"><span class=\"hc-rail-num\">3<\/span>Converting photos<\/a><\/li>\n        <li><a href=\"..\/part-4-viewer\/\"><span class=\"hc-rail-num\">4<\/span>Viewing photos<\/a><\/li>\n        <li><a href=\"..\/part-5-exif\/\"><span class=\"hc-rail-num\">5<\/span>EXIF info<\/a><\/li>\n        <li><a href=\"..\/part-6-settings-formats\/\" class=\"is-current\" aria-current=\"page\"><span class=\"hc-rail-num\">6<\/span>Settings &amp; reference<\/a><\/li>\n        <li><a href=\"..\/part-7-troubleshooting-faq\/\"><span class=\"hc-rail-num\">7<\/span>Troubleshooting &amp; FAQ<\/a><\/li>\n      <\/ol>\n    <\/aside>\n  <\/div>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Part 6 of 7 &middot; Settings &amp; reference On this page Settings Supported formats Shortcut reference Settings Six controls sit between the list and the [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-921","post","type-post","status-publish","format-standard","hentry","category-heic-image-viewer"],"_links":{"self":[{"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/posts\/921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/comments?post=921"}],"version-history":[{"count":2,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/posts\/921\/revisions"}],"predecessor-version":[{"id":930,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/posts\/921\/revisions\/930"}],"wp:attachment":[{"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/media?parent=921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/categories?post=921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/tags?post=921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}