サイトを公開すると写真が切れてしまう

Question

@charset "utf-8";
  
body {
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 2;
}

p,h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
}

img {
  vertical-align: 0;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  color: #3583aa;
  text-decoration: none;
}

a:visited {
  color: #788d98;
}

a:hover {
  text-decoration: underline;
}

header {
  width: 100%;
  height: 600px;
}

.logo {
  float: left;
  margin: 0 0 0 10px;
}

.logo a {
  color: #3583aa;
  font-family: 'Sriracha', cursive;
  font-size: 40px;
}

.global-nav {
  float: right;
  margin: 10px;
}

.global-nav li {
  float: left;
  margin: 0 20px;
  font-size: 30px;
  list-style: none;
}

.global-nav li a {
  color: #3583aa;
  font-family: 'Vollkorn', serif;
}

.global-nav li a:hover {
  border-bottom: 2px solid #ffffff;
  padding-bottom: 3px;
  text-decoration: none;
  color: #cccccc;
}

.top {
  clear: both;
  text-align: center;
  padding-top: 150px;
}

.topfont{
    stroke: #000;
    fill: #00ffff;
    stroke-width: 2.5;
    stroke-dasharray:  4000;
    stroke-dashoffset: 4000;
    animation: DASH 8s ease-in-out alternate 0s forwards;
    -webkit-animation: DASH 8s ease-in-out alternate 0s forwards;
}

@keyframes DASH {
    0% {
        stroke-dashoffset: 4000;
        }
    100% {
        stroke-dashoffset: 0;
        }
    }

@-webkit-keyframes DASH {
    0% {
        stroke-dashoffset: 4000;
    }
    100% {
        stroke-dashoffset: 0;
      }
    }

#portfolio {
  background-image: url(../image/background-a.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: 100% auto;
}

#wrap {
  clear: both;
  background-color: #ffffff;
  overflow: hidden;
}

#wrap p {
  font-family: "M PLUS Rounded 1c";
}

#profile {
  width: auto;
  height: 850px;
}

.photo {
  text-align: center;
}

.profile-image {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
}

.introduction {
  width: 80%;
  margin: 0 auto;
}
.introduction p {
  font-size: 28px;
}

#skill {
  width: auto;
  height: 850px;
  background-color: #eaeaea;
}

.container {
  margin-top: 150px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.item {
  margin:0 20px;
}

h1,h2 {
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
}

#works {
  width: 100%;
  height: 850px;
}

.works-a {
  margin: 100px 450px;
  width: 450px;
  height: 300px;
}

#contact {
  background-color: #eaeaea;
  height: 1000px;
  width: 100%;
  margin: 0 auto;
}

.google {
  padding: 0 26%;
}

footer {
  text-align: center;
  background-color: #696969;
}
```ポートフォリオサイトを作り、xfreeでサーバーを借りてffftpでサイトをアップロードしたのですが、写真が途中で切れてしまいます。テキストエディタで表示する時は問題なくうつります。解決方法を教えてもらいたいです。　　(追記)実際の写真のサイズは2725 x 1670であり、cssで縦450px、横300pxに設定しています。ファイルのパスはC:\Users\Owner\Documents\web file\imageとなっておりweb fileにcssのフォルダーとhtmlファイルが入っています。　![イメージ説明](467f86cc209436d4c2bac0ef94685748.png)

Comments

[m.ts10806]

コード及びファイル構成を提示してください。
あと、画像は欠損なく完全にアップロードされてるのでしょうか。
画像URLに直接アクセスしてみてください。

Answer 1

回答　無料サーバーの限界です。画像を縮小してアップロードしてください。

拝見させていただきましたが、画像ファイル自体がその範囲で途切れています。
xfreeってなんだ？と、ふと気になって確かめたところ無料のサーバーなんですね。
1ファイルの容量に制限が掛かっているようです。
３ＭＢまでとのこと。
ＤＬして確かめた画像ファイルの容量は２．９８ＭＢだったので、
アップロードのファイルサイズ上限に抵触したとみて良いでしょう。

参考URL xfree
https://www.xfree.ne.jp/server/

以下蛇足です。
あまり重い画像ファイルばかりだとアクセスしたときに読み込みが遅くなるので、
画像のサイズを減らすサービス等で処理してからアップするようにした方が良いと思いますよ。

Comments

[sasaki0757]

画像の縮小を行い、ffftpの写真を更新しましたが、写真の表示は戻りませんでした。html,css,写真ファイルの容量は1.32MBまで減らしました。

[退会済みユーザー]

キャッシュが残っているのだと思います。キャッシュをクリアするか、シークレットモードで再確認してみてください。当方はシークレットモードにて問題ないことを確認しました。
キャッシュクリア→`Shitf+F5`を押してみるとか。

[sasaki0757]

解決しました。ありがとうございます。