https://tomeight.com/tools/image-operation

1<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
2<meta name="viewport" content="width=device-width, initial-scale=1">
3<title>トメイト画像操作 | トメイト時短・便利ツール</title>
4<meta property="og:type" content="website">
5<meta property="og:site_name" content="トメイト時短・便利ツール">
6<link rel="icon" type="image/svg+xml" href="/favicon.svg">
7<link rel="preload" as="fetch" crossorigin="anonymous" href="/tools/image-operation/_payload.json">
8<style>.tomeight-logo-mark-root .color-1[data-v-37e1abb6]{fill:#df3447}.tomeight-logo-mark-root .color-2[data-v-37e1abb6]{fill:#29b35e}.tomeight-logo-mark-root .color-3[data-v-37e1abb6]{fill:#222}</style>
9<style>.the-header-root[data-v-6700bff5]{padding:.5rem;position:relative;z-index:1}.the-header-root .logo-mark[data-v-6700bff5]{height:2.5rem;vertical-align:bottom;width:auto}</style>
10<style>.the-footer-root[data-v-c40bcca1]{align-items:center;display:flex;justify-content:space-between;padding:.5rem}.the-footer-root .logo-mark[data-v-c40bcca1]{height:2.5rem;vertical-align:bottom;width:auto}.the-footer-root .links[data-v-c40bcca1]{list-style-type:none}</style>
11<style>.notifications-root[data-v-159a2a16]{left:0;pointer-events:none;position:fixed;right:0;top:4rem}.notifications-root .container[data-v-159a2a16]{position:relative}.notifications-root ul[data-v-159a2a16]{display:flex;flex-direction:column;gap:.5rem;list-style-type:none;pointer-events:auto;position:absolute;right:1.5rem;top:0}.notifications-root ul .item[data-v-159a2a16]{background-color:#fafafa;border-radius:.25rem;box-shadow:0 .25rem .5rem -.125rem rgba(34,34,34,.1),0 0 0 1px rgba(34,34,34,.2);padding:1rem 1.5rem}.notifications-root ul .item.success[data-v-159a2a16]{background-color:#29b35e;color:#fafafa}</style>
12<style>.layout-header[data-v-f4a70ddc]{border-bottom:.5rem solid #df3447}.layout-footer[data-v-f4a70ddc]{border-top:.5rem solid #df3447}</style>
13<style>.pixel-input-line>div[data-v-66f5b71f]{align-items:center;display:flex}.pixel-input-line+.pixel-input-line[data-v-66f5b71f]{margin-top:.5rem}.pixel-input[data-v-66f5b71f]{width:4rem}.pixel-input-auto[data-v-66f5b71f]{margin-left:1rem}.error[data-v-66f5b71f]{color:#cc0f35}</style>
14<style>.cycle-loading-root[data-v-42959d7c]{animation:animation-42959d7c .5s linear infinite;border-color:transparent transparent #222 #222;border-radius:50%;border-style:solid;border-width:.2em;height:.75em;opacity:.5;width:.75em}@keyframes animation-42959d7c{0%{transform:rotate(0)}to{transform:rotate(1turn)}}</style>
15<style>.drop-zone[data-v-d21acc60]{align-items:center;aspect-ratio:3/2;background-color:hsla(0,0%,80%,.4);border-radius:4px;display:flex;flex-direction:column;gap:.5rem;height:calc(100% - 2rem);justify-content:center;margin-left:auto;padding:1rem;position:relative;width:calc(100% - 2rem)}.drop-zone .place-item-icon[data-v-d21acc60]{height:auto;opacity:.5;width:25%}.controllers[data-v-d21acc60]{display:flex;gap:1rem}@media screen and (max-width:768px){.controllers[data-v-d21acc60]{flex-direction:column}}.controllers form[data-v-d21acc60],.controllers>div[data-v-d21acc60]{flex-basis:0;flex-grow:1}.controllers section+section[data-v-d21acc60]{margin-top:1rem}.ratio-input[data-v-d21acc60]{width:3rem}.children-disabled[data-v-d21acc60]{opacity:.6;pointer-events:none}.demanded-format-input[data-v-d21acc60]{display:flex;gap:.5rem}.demanded-object-fit-input[data-v-d21acc60]{display:flex;flex-direction:column}.result-area[data-v-d21acc60]{margin-top:1.5rem}.result-area .results[data-v-d21acc60]{list-style-type:none}.result-summary[data-v-d21acc60]{margin:1.5rem auto .5rem}.result-summary td[data-v-d21acc60],.result-summary th[data-v-d21acc60]{padding-left:.5rem;padding-right:.5rem}.please-download[data-v-d21acc60]{display:flex;justify-content:flex-end}.result-image[data-v-d21acc60]{display:block;height:auto;margin-left:auto;margin-right:auto;max-width:100%}.original-image-preview[data-v-d21acc60]{height:100%;left:0;-o-object-fit:contain;object-fit:contain;position:absolute;top:0;width:100%;z-index:-1}.errors[data-v-d21acc60]{color:#cc0f35;list-style-position:inside;margin-top:.5rem}.briefing[data-v-d21acc60]{background-color:hsla(0,0%,80%,.4);margin-top:2.5rem;padding:.5rem 1rem}.briefing>ul[data-v-d21acc60]{list-style-position:inside}.briefing>ul>li+li[data-v-d21acc60]{margin-top:.5rem}</style>
16<style>body,figure,hr,ol,p,ul{margin:0;padding:0}body{background-color:#fafafa;font-family:system-ui,sans-serif}p{word-break:break-all}.container{margin:0 auto;max-width:1440px}@media screen and (min-width:769px){.container{padding-left:1rem;padding-right:1rem}}@media screen and (max-width:768px){.container{padding-left:.5rem;padding-right:.5rem}}.main{padding-bottom:1rem;padding-top:1rem}h1{font-size:2rem;margin-top:0}.button{align-items:center;background-color:#fafafa;border:1px solid #222;border-radius:4px;display:flex;font-size:1rem;justify-content:center;outline:none;padding:.5rem 1rem}.button:not([disabled]){cursor:pointer}.button.active:not(:disabled),.button:active:not(:disabled){filter:brightness(.95)}.button.large{font-size:1.5rem;padding:1rem 2rem}.button.positive-color{background-color:#29b35e;color:#fafafa}.button.positive-color:disabled{opacity:.9}.button.danger-color{background-color:#df3447;color:#fafafa}.button.left-concatenation{border-bottom-left-radius:0;border-left:none;border-top-left-radius:0}.button.with-icon{display:flex;gap:.5rem}.button.with-icon>svg{height:1em;width:1em}.checkbox{margin:0 .5rem 0 0}input.input,textarea.textarea{font-size:1rem;padding:.5rem}textarea.textarea{box-sizing:border-box}.aspect-ratio-16x9{aspect-ratio:1.7777777778;display:block;width:100%}.aspect-ratio-16x9>img{height:100%;width:100%}.aspect-ratio-4x3{aspect-ratio:1.3333333333;display:block;width:100%}.aspect-ratio-4x3>img{height:100%;width:100%}.aspect-ratio-1x1{aspect-ratio:1;display:block;width:100%}.aspect-ratio-1x1>img{height:100%;width:100%}.object-fit-cover>*{-o-object-fit:cover;object-fit:cover}.excuse{color:rgba(34,34,34,.5);font-size:.75rem}hr{background-color:#222}hr.thin{border:none;height:1px}</style>
17<link rel="stylesheet" href="/_nuxt/entry.4j9nmYjI.css">
18<link rel="stylesheet" href="/_nuxt/CheckboxOption.CIUlxDDJ.css">
19<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.3-HIeTSr.js">
20<link rel="modulepreload" as="script" crossorigin href="/_nuxt/default.0KOAAiUE.js">
21<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.Hg19lySD.js">
22<link rel="modulepreload" as="script" crossorigin href="/_nuxt/paths.qj7Vdgk8.js">
23<link rel="modulepreload" as="script" crossorigin href="/_nuxt/array-tools.Ca8KMVZ_.js">
24<link rel="modulepreload" as="script" crossorigin href="/_nuxt/image-operation.5SK0WUG7.js">
25<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RadioInputs.vue.jndlP8Pt.js">
26<link rel="modulepreload" as="script" crossorigin href="/_nuxt/CheckboxOption.mjIZHW7c.js">
27<link rel="modulepreload" as="script" crossorigin href="/_nuxt/index.zxNNnXJl.js">
28<link rel="modulepreload" as="script" crossorigin href="/_nuxt/vue.f36acd1f.YLkSvQFl.js">
29<link rel="modulepreload" as="script" crossorigin href="/_nuxt/tomeight.BpD2cz_8.js">
30<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.GjjCa2Jd.js">
31<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.agm5hsBH.js">

32<script type="module" src="/_nuxt/entry.3-HIeTSr.js" crossorigin></script>

32</head><body><div id="__nuxt"><!--[--><div class="layout-header" data-v-f4a70ddc><header class="the-header-root container" data-v-f4a70ddc data-v-6700bff5><a href="/" class="" alt="トメイト" aria-label="トメイト" data-v-6700bff5><svg width="2442" height="564" version="1.1" viewbox="0 0 2442 564" xmlns="http://www.w3.org/2000/svg" class="tomeight-logo-mark-root logo-mark" role="img" data-v-6700bff5 data-v-37e1abb6><path d="m275 56.1a275 220 0 0 0-275 220 350 280 0 0 0 271 272 400 800 0 0 0 158 0 350 280 0 0 0 271-272 275 220 0 0 0-350-211 275 220 0 0 0-75-8.54z" class="color-1" data-v-37e1abb6></path><path d="m244 0 68.9 90.1-148 16 146 15.8-116 140 156-130 156 130-116-140 146-15.8-148-16 68.9-90.1-96.1 73.5v-22.4c0-2.77-2.23-5-5-5h-10c-2.77 0-5 2.23-5 5v22.4z" class="color-2" data-v-37e1abb6></path><g class="color-3" data-v-37e1abb6><path d="m879 557h33.3c18.3 0 28.7-10.3 28.7-28.7v-207h212c18.3 0 28.7-10.3 28.7-28.7v-32.7c0-18.3-10.3-28.7-28.7-28.7h-212v-126c0-18.3-10.3-28.7-28.7-28.7h-33.3c-18.3 0-28.7 10.3-28.7 28.7v423c0 18.3 10.3 28.7 28.7 28.7z" data-v-37e1abb6></path><path d="m1273 542c57.3-18.3 108-49.9 149-88.3 21.8-20.1 45.3-45.3 63.1-68.2 29.2 30.4 53.9 56.2 78 84.9 17.8 20.1 35 13.8 35-12.6v-62.5c0-14.3-4.01-24.1-13.8-35.5-18.9-21.8-32.1-34.4-51-54.5 33.3-67.1 50.5-119 64.8-186 4.01-19.5-5.73-31.5-25.8-31.5h-35c-17.2 0-26.9 8.6-30.4 25.8-7.45 32.1-23.5 84.9-46.4 136-32.1-28.1-71.7-57.9-119-88.9-19.5-13.2-35-4.01-35 18.9v40.1c0 15.5 5.73 25.8 18.9 34.4 31.5 20.6 62.5 44.7 92.9 72.2-34.4 51-86 98.6-153 123-16.1 5.73-24.1 16.1-24.1 32.7v35.5c0 20.6 12.6 31 32.1 24.1z" data-v-37e1abb6></path><path d="m1860 559h33.3c18.3 0 28.7-10.3 28.7-28.7v-273c31.5-36.1 72.2-83.7 104-136 11.5-19.5 1.72-34.4-20.6-34.4h-41.9c-15.5 0-25.8 5.73-34.4 19.5-55 87.7-114 138-169 173-30.4 18.9-60.2 33.8-79.7 42.4-15.5 6.88-22.9 16.1-22.9 32.7v33.3c0 21.2 13.2 31 32.7 23.5 16.1-6.31 36.1-15.5 56.8-26.4 26.9-14.3 55.6-33.3 84.9-56.8v203c0 18.3 10.3 28.7 28.7 28.7z" data-v-37e1abb6></path><path d="m2139 557h33.3c18.3 0 28.7-10.3 28.7-28.7v-207h212c18.3 0 28.7-10.3 28.7-28.7v-32.7c0-18.3-10.3-28.7-28.7-28.7h-212v-126c0-18.3-10.3-28.7-28.7-28.7h-33.3c-18.3 0-28.7 10.3-28.7 28.7v423c0 18.3 10.3 28.7 28.7 28.7z" data-v-37e1abb6></path></g></svg></a></header></div><!--[--><main class="container main" data-v-d21acc60><div class="controllers" data-v-d21acc60><div data-v-d21acc60><div class="drop-zone" data-v-d21acc60><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 96 960 960" class="place-item-icon" data-v-d21acc60><path d="M180 936q-24.75 0-42.375-17.625T120 876V436q0-24.75 17.625-42.375T180 376h210v60H180v440h600V436H570v-60h210q24.75 0 42.375 17.625T840 436v440q0 24.75-17.625 42.375T780 936H180Zm300-203L318 571l43-43 89 89V96h60v521l89-89 43 43-162 162Z"></path></svg><p data-v-d21acc60>画像ファイルをドロップ</p><input type="file" data-v-d21acc60><!----></div></div><form data-v-d21acc60><section data-v-d21acc60> 変換先のフォーマット: <div class="demanded-format-input" data-v-d21acc60><!--[--><label><input type="radio" value="PNG">PNG</label><label><input type="radio" value="JPEG">JPEG</label><label><input type="radio" checked value="WEBP">WEBP</label><!--]--></div></section><section data-v-d21acc60><label class="checkbox-option-root" data-v-d21acc60 data-v-eba1ca26><input type="checkbox" class="checkbox" checked data-v-eba1ca26><!--[-->画像の圧縮・変換のみ<!--]--></label><section class="children-disabled" data-v-d21acc60><div class="pixel-input-line" data-v-d21acc60 data-v-66f5b71f><div data-v-66f5b71f>横:<input type="number" class="pixel-input input" value="1280" min="1" max="5120" data-v-66f5b71f>px <label class="checkbox-option-root pixel-input-auto" data-v-66f5b71f data-v-eba1ca26><input type="checkbox" class="checkbox" checked data-v-eba1ca26><!--[-->自動<!--]--></label></div><!----></div><div class="pixel-input-line" data-v-d21acc60 data-v-66f5b71f><div data-v-66f5b71f>縦:<input type="number" class="pixel-input input" value="720" min="1" max="5120" data-v-66f5b71f>px <label class="checkbox-option-root pixel-input-auto" data-v-66f5b71f data-v-eba1ca26><input type="checkbox" class="checkbox" checked data-v-eba1ca26><!--[-->自動<!--]--></label></div><!----></div></section><section class="children-disabled" data-v-d21acc60> 画像を切り抜く必要がある場合: <div class="demanded-object-fit-input" data-v-d21acc60><!--[--><label><input type="radio" checked value="cover">覆い尽くすように切り抜き</label><label><input type="radio" value="contain">収まるように切り抜き</label><!--]--></div></section></section><section data-v-d21acc60><button type="submit" class="button with-icon positive-color" disabled data-v-d21acc60> 実行 </button><ul class="errors" data-v-d21acc60><!--[--><li data-v-d21acc60>画像ファイルを与えてください。</li>

32<!--]--></ul></section></form></div><!----><article class="briefing" data-v-d21acc60><ul data-v-d21acc60><li data-v-d21acc60>画像ファイルのサイズを大幅に削減します。</li><li data-v-d21acc60> 変換前後の画像フォーマット次第では変換後にファイルサイズが増大します。 </li><li data-v-d21acc60>JPEG、PNG、WEBPに対応しています。</li><li data-v-d21acc60> アップロードされた画像および生成された画像は、変換処理とダウンロードの猶予のために一時的にサーバに保存されます。 </li></ul></article></main><!--]--><div class="layout-footer" data-v-f4a70ddc><footer class="the-footer-root container" data-v-f4a70ddc data-v-c40bcca1><ul class="links" data-v-c40bcca1><li data-v-c40bcca1><a href="/license" class="" data-v-c40bcca1>ライセンス</a></li></ul><a href="/" class="" alt="トメイト" aria-label="トメイト" data-v-c40bcca1><svg width="2442" height="564" version="1.1" viewbox="0 0 2442 564" xmlns="http://www.w3.org/2000/svg" class="tomeight-logo-mark-root logo-mark" role="img" data-v-c40bcca1 data-v-37e1abb6><path d="m275 56.1a275 220 0 0 0-275 220 350 280 0 0 0 271 272 400 800 0 0 0 158 0 350 280 0 0 0 271-272 275 220 0 0 0-350-211 275 220 0 0 0-75-8.54z" class="color-1" data-v-37e1abb6></path><path d="m244 0 68.9 90.1-148 16 146 15.8-116 140 156-130 156 130-116-140 146-15.8-148-16 68.9-90.1-96.1 73.5v-22.4c0-2.77-2.23-5-5-5h-10c-2.77 0-5 2.23-5 5v22.4z" class="color-2" data-v-37e1abb6></path><g class="color-3" data-v-37e1abb6><path d="m879 557h33.3c18.3 0 28.7-10.3 28.7-28.7v-207h212c18.3 0 28.7-10.3 28.7-28.7v-32.7c0-18.3-10.3-28.7-28.7-28.7h-212v-126c0-18.3-10.3-28.7-28.7-28.7h-33.3c-18.3 0-28.7 10.3-28.7 28.7v423c0 18.3 10.3 28.7 28.7 28.7z" data-v-37e1abb6></path><path d="m1273 542c57.3-18.3 108-49.9 149-88.3 21.8-20.1 45.3-45.3 63.1-68.2 29.2 30.4 53.9 56.2 78 84.9 17.8 20.1 35 13.8 35-12.6v-62.5c0-14.3-4.01-24.1-13.8-35.5-18.9-21.8-32.1-34.4-51-54.5 33.3-67.1 50.5-119 64.8-186 4.01-19.5-5.73-31.5-25.8-31.5h-35c-17.2 0-26.9 8.6-30.4 25.8-7.45 32.1-23.5 84.9-46.4 136-32.1-28.1-71.7-57.9-119-88.9-19.5-13.2-35-4.01-35 18.9v40.1c0 15.5 5.73 25.8 18.9 34.4 31.5 20.6 62.5 44.7 92.9 72.2-34.4 51-86 98.6-153 123-16.1 5.73-24.1 16.1-24.1 32.7v35.5c0 20.6 12.6 31 32.1 24.1z" data-v-37e1abb6></path><path d="m1860 559h33.3c18.3 0 28.7-10.3 28.7-28.7v-273c31.5-36.1 72.2-83.7 104-136 11.5-19.5 1.72-34.4-20.6-34.4h-41.9c-15.5 0-25.8 5.73-34.4 19.5-55 87.7-114 138-169 173-30.4 18.9-60.2 33.8-79.7 42.4-15.5 6.88-22.9 16.1-22.9 32.7v33.3c0 21.2 13.2 31 32.7 23.5 16.1-6.31 36.1-15.5 56.8-26.4 26.9-14.3 55.6-33.3 84.9-56.8v203c0 18.3 10.3 28.7 28.7 28.7z" data-v-37e1abb6></path><path d="m2139 557h33.3c18.3 0 28.7-10.3 28.7-28.7v-207h212c18.3 0 28.7-10.3 28.7-28.7v-32.7c0-18.3-10.3-28.7-28.7-28.7h-212v-126c0-18.3-10.3-28.7-28.7-28.7h-33.3c-18.3 0-28.7 10.3-28.7 28.7v423c0 18.3 10.3 28.7 28.7 28.7z" data-v-37e1abb6></path></g></svg></a></footer></div><div class="notifications-root" data-v-f4a70ddc data-v-159a2a16><div class="container" data-v-159a2a16><ul data-v-159a2a16><!--[--><!--]--></ul></div></div><!--]--></div>

32<script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/tools/image-operation/_payload.json">[{"state":1,"once":8,"_errors":10,"serverRendered":12,"path":13,"prerenderedAt":14},["Reactive",2],{"$sserial":3,"$ssite-config":4},0,{"env":5,"name":6,"url":7},"production","@tomeight/lightning","https://tomeight.com",["Reactive",9],["Set"],["Reactive",11],{},true,"/tools/image-operation",1719930676912]</script>

32

33<script>window.__NUXT__={};window.__NUXT__.config={public:{umamiHost:"https://tomeight.com",umamiId:"a7a0fbb7-f370-4c23-b51c-3d3ad0e429ce",siteUrl:"https://tomeight.com"},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>

33</body></html>