WEB制作で画像のサイズってどうしてますか？

Question

HTMLでのWEB制作で画像を取り扱う時、どんな感じで画像をリサイズしてますか？
ベストな方法とその理由を教えてください。
macだと直接プレビューで大きさを調整して、それを貼り付けるのですが？
もしくはimgタグにidで名前を付けてcssの方で変形させるという方法を取っていますか？
最近制作を初めて初心者です。よろしくお願いします。

Answer 1

読み込みの速さなどを考慮するときは、事前にトリミング、解像度調整、サイズ調整等を行なってからサーバーに上げています。
開発中は元の画像をcssでサイズ調整して使ったほうが画像のアップロードが一回で済むので楽です。

Comments

[takawork]

回答ありがとうございました。

Answer 2

imgタグにsrcset属性で持たせるのがモダンな感じだと思います。

<img src="img/example-img.jpg"
     srcset="img/example-img.jpg 1x,
             img/[e-mail] 2x"
     alt="Example image">

ブラウザの問題もあるかもしれませんが、picturefill.jsの導入で完璧です。

対応状況

https://caniuse.com/#search=srcset

HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう

http://kia-king.com/blog/tutorial/responsive-images-with-srcset/