A New Way To Reduce Font Loading Impact: CSS Font Descriptors — Smashing Magazine
Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. Upcoming font options may finally deliver on the promise of making it easier to align fallback fonts to the final fonts. Font loading has long been a bugbear of web performance, and there really are no good choices here. If you want to use web fonts your choices are
Halve the size of images by optimising for high density displays
Halve the size of images by optimising for high density displays A long time ago we had monitors of varying resolutions, but once we started to go beyond 1024x768, screens started to get bigger as resolution got bigger. Then full-colour web-capable mobile phones arrived, but the story was the same. They had small screens, but also small resolutions. Then in 2010 the iPhone 4 came out (holy shit th
Optimize Images with a GitHub Action | CSS-Tricks
I was playing with GitHub Actions the other day. Such a nice tool! Short story: you can have it run code for you, like run your build processes, tests, and deployments. But it’s just configuration files that can run whatever you need. There is a whole marketplace of Actions wanting to do work for you. What I wanted to do was run code to do image optimization. That way I never have to think about i
JPEG画像の最適化には85%の品質がいいらしいので画像の最適化プロセスを見直してみた
オリジナルはPhotoshopの「書き出し」で画質を100%にして書き出した画像です。画像によっては81%にしても目視では差がわからなかったので、それくらい下げちゃっても良さそうですけど、ざっくりとしたデフォルトとしては85%が良さそうです。91% → 85%の方が85% → 81%より圧縮率がいいんですね。 サンプル画像 上の表にある「sampleXX.jpg」の画像をまとめて圧縮したファイルを用意しました。ご参考までに以下からダウンロードどうぞ。 サンプル画像をまとめて圧縮したファイル（ZIP / 3.4MB） ちなみに、表で91%と81%になっているのはImageOptimで設定できるのが、なぜかその数値だったからです。90%、80%には設定できませんでした（v1.8.0）。 職場で作業するときのプロセスはだいたい以下のような感じです。 PhotoshopやAffinity Desi
10 Image Optimization Tips for Your Ecommerce Site in 2024
Build your dream business for $1/month Start your free trial, then enjoy 3 months of Shopify for $1/month when you sign up for a monthly Basic or Starter plan. Sign up for a free trial Select a monthly Basic or Starter plan $1/month pricing will be applied at checkout Add products, launch your store, and start selling!
画像の最適化 | Web | Google Developers
Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform
Mac Automatorとpngquantを使ってPNG画像の圧縮を自動化する方法
イメージオプティム でPNG画像を圧縮しようとするとすごく時間がかかるので、他の方法を探してみたらMacのAutomatorとpngquant というコマンドラインのPNG最適化ツールを使う方法があったので試してみました。 見つけた情報そのままでは僕の環境ではうまく動かなかったので設定方法を書き留めておきます。お役に立てば幸いです。 目次 フォルダに保存したPNG画像を自動最適化する設定 pngquantのインストール Automatorサービスの作成 フォルダアクションの設定 ファイルの右クリックでPNG画像を最適化できるようにする設定 OptiPNGとイメージオプティムで同じ設定をする方法 Macの環境など フォルダに保存したPNG画像を自動最適化する設定 設定したフォルダにPNG画像が保存されると、自動でpngquantのコマンドが走るようにAutomatorを使って設定をします。
uncss: Find Unused CSS
You know what's better than adding features to a website or app, from a code perspective? Removing stuff you don't need. Whether it be code, images, or dependencies, getting rid of the crap stale code is like the first sip of a big glass of wine after a long day of stressful work. Running a directory of images through ImageOptim is a euphoric experience, am I right? What if there was a tool, h
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
EWWW Image Optimizer
Description Are you frustrated by a slow website? Do over-sized images make you say “ewww”… Let EWWW Image Optimizer help you make your site faster, improve your bounce rate, and boost your SEO. But most importantly, make your visitors happier so they keep coming back for more. With EWWW IO you can optimize all your existing images, from any plugin, and then let EWWW IO take care of new image uplo
Comparison of all optimisation tools | ImageOptim-CLI
Automates batch optimisation of images.Speeding up images often comes with a cost in picture quality and finding the right balance can be difficult. Here we compare the percentage file size savings across several image optimisation tools, followed by the percentage of quality lost. See the installation guide, examples and grunt-imageoptim.
RequireJS
/* --- RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code. IE 6+ .......... compatible ✔ Firefox 2+ ..... compatible ✔ Safari 3.2+ .... compatible ✔ Chrome 3+ ...... compatible ✔ Opera 10+ ...... co
Grunticon: A Grunt.js plugin for managing and delivering sharp icons to all devices | Filament Group, Inc., Boston, MA
Grunticon: A Grunt.js plugin for managing and delivering sharp icons to all devices Posted by Scott Jehl 08/31/2012 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. Note: Grunticon was formerly named Unicon. The name was chang
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Images are hard. | CSS-Tricks
GitHub - chrissimpkins/Crunch: Insane(ly slow but wicked good) PNG image optimization
Image Optimization In WordPress — Smashing Magazine
SVGOMG - SVGO's Missing GUI
Toolbox / BEM
svg/svgo: Nodejs-based tool for optimizing SVG vector graphics files.
WebsitePolicies: Compliance Solutions for Online Businesses
