タグ

ブラウザと画像に関するmohnoのブックマーク (3)

  • 細切れ保存にさようなら。スクロールスクリーンショットを撮る方法(Android・iOS・Win・Mac・Chromebook)

    細切れ保存にさようなら。スクロールスクリーンショットを撮る方法(Android・iOS・Win・MacChromebook)2022.02.04 21:00188,226 David Nield - Gizmodo US [原文] ( satomi ) ページ全体を保存したい。そんなとき覚えてると便利なのが「スクロールスクリーンショット」。 ふつうのスクリーンショットは見えてる範囲までしか撮れませんけど、スクロールスクリーンショットなら上から下まで一発で取得が可能です。Webページはもちろん、文書やメニューもこの方法で大丈夫。撮ってスクロールして、また撮ってスクロールして、一番下まで撮ったら全部つなぎ合わせて…という手間がかかりません。 手順は細切れのスクショと少し異なります。OS別に見ていきましょう。 Androidでスクロールスクリーンショットを撮る方法スクロールスクリーンショットは

    細切れ保存にさようなら。スクロールスクリーンショットを撮る方法(Android・iOS・Win・Mac・Chromebook)
    mohno
    mohno 2022/02/05
    ↓いろんな方法があるんだな。「.mhtmlで保存」が使えなくて困ることはあんまりないけど、そのときに振り返るとしよう。(忘れていなければ)
  • そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説! | Web Design Trends

    WebP(ウェッピー)は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP(ウェッピー)の基と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います。 WebP(ウェッピー)とは? WebP(ウェッピー)は、Googleが開発している次世代画像フォーマットで、拡張子は「.webp」です。 WebPは、JPEGやPNGと比べ、同程度の画質の画像をより小さなファイルサイズで保存することができます。Googleの発表では、PNGよりも26%、JPEGよりも25%〜34%程度ファイルサイズを抑えることができると言われています。 また、WebPは背景透過(アルファチャンネル)や、アニメーションにも対応しています。つまり、JPEGのよ

    そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説! | Web Design Trends
    mohno
    mohno 2021/09/09
    仕事かつ転送量を気にすべきサイトならそうすべきなんだろうけどな。音楽は最近ではmp3を使ってるんだよな。あと.NETのImageFormatにもないみたいだし。
  • 【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい

    そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的(?)になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考: img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら? なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか

    【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
    mohno
    mohno 2020/07/03
    「レスポンシブな時代にはwidthとheight属性を書かないのが一般的に」「ブラウザはimg要素に指定されたwidthとheight属性の値をもとにアスペクト比を計算」←スタイルと両方が意味を持つということか。へぇぇ。
  • 1