-
-
Save hsanchez7934/d186dd17f175e258e478c7be67299fb0 to your computer and use it in GitHub Desktop.
Crushing images.
ImageOptim
This app is a actually a collection of other image optimizers for the different image file types.
It runs a file through each optimizer to minimize overall file size.
For the most part, it’s removing a metric ton of crufty meta data hiding in your images.
You’ll realize the biggest gains in pngs first, then jpgs, then gif.
SVGO GUI
For use when you save an image out as .svg and you are in fact using it as an image,
NOT for inline svg code
Works a lot like ImageOptim
IMAGE OPTIM https://imageoptim.com/mac
SVGO GUI https://github.com/svg/svgo-gui
Image Sprite
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
Responsive Image Handling
srcset defines the set of images we will allow the browser to choose between, and what size each image is. Before each comma, we write:
An image filename (puppy-480w.jpg.)
A space.
The image’s inherent width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image’s real size, which can be found by inspecting the image file on your computer (for example on a Mac you can select the image in Finder, and press Cmd + I to bring up the info screen.)
sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier. In this case, before each comma we write:
a media condition ((max-width:480px)) - In this case, we are saying “when the viewport width is 480 pixels or less”.
A space.
The width of the slot the image will fill when the media condition is true (440px.)
JPG
Common format for digital photos and other digital graphics.
Use “lossy” compression, meaning image quality is lost as file size decreases.
extensions = .jpg or .jpeg.
best uses are photos and images w/ complex coloring.
PNG
“Portable Network Graphics” were created as an improved, non-patented replacement for “Graphics Interchange Format” (GIF)
“lossless” image compression, which means there is no data loss
two formats: PNG-8 (similar to GIF, 256 colors, 1-bit transparency) and PNG-24 (24-bit color, similar to JPEG, over 16 million colors)
transparency can be set between opaque and completely transparent
best uses include web images, logos, text images, complex images like photos if file size is not an issue
GIF
format commonly used on the web and as sprites in software programs
“lossless” compression, but each image is capped at 256 colors, so their file size starts smaller than jpg’s
GIF animation is simple, creating a series of GIF frames to make up the moving image
best uses include simple images like line drawings, color borders, simple illustrations, tiny icons, web graphics with not many colors, and of course - animations
SVG
scaleable vector graphic, lossless compression, scales without losing clarity
looks great on retina displays
design control like interactivity and filters
can be used as an image <img src='some-image.svg' alt='some image'
can be used inline with html, and then controlled with css
best suited for when you need to manipulate an image via css, primarily used for icons, logos, and illustrations.
<svg ...><path class="icon" .../>
WEBP
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.