Images

Image sizes for social media
Finding images that are available in the public domain

https://webp-converter.com/
http://www.sitepoint.com/how-to-make-your-web-app-smarter-with-image-recognition/
http://www.sitepoint.com/lazy-loading-images-not-really-annoy-users/
http://www.sitepoint.com/best-plugins-for-sketch-app
http://www.sitepoint.com/7-best-search-engines-free-images

http://www.sitepoint.com/image-editing-in-sketch-app-3/
http://www.sitepoint.com/webp-image-format/
http://www.sitepoint.com/image-compression-tools
http://www.sitepoint.com/optimizing-your-images-for-wordpress
http://www.sitepoint.com/build-simple-image-editor-with-css-filters-jquery

http://www.sitepoint.com/6-free-icon-editors/
http://go.sitepoint.com/t/ViewEmail/y/CEEB16C3A91CE81A/4C0C0AB95472652005263A35EB2CBB57

See snip for tools to take screenshot.

Mobile apps:
MSQRD
MIITOMO
BITMOJI
PRISMA

Image recognition:
http://www.sitepoint.com/image-recognition-with-the-google-vision-api-and-ionic/

https://medium.com/@duhroach/reducing-jpg-file-size-e5b27df3257c
http://go.sitepoint.com/t/ViewEmail/y/C06B55D38D1FD33A/4C0C0AB95472652005263A35EB2CBB57
http://www.sitepoint.com/svg-vector-effects-non-scaling-strokes
http://www.sitepoint.com/watch-canva-vs-canva-for-work/
http://www.sitepoint.com/preloading-images-in-parallel-with-promises/
https://www.imgix.com/
http://www.sitepoint.com/saving-bandwidth-by-using-images-the-smart-way/
http://sitepointnewsletters.cmail19.com/t/ViewEmail/y/C0F5461A124C0F45/652BA517A3830D173D3F7F9A22A6E02E
http://www.sitepoint.com/mastering-image-optimization-in-wordpress
http://www.sitepoint.com/watch-loading-images-the-lazy-loading-way/
http://go.sitepoint.com/t/ViewEmail/y/C5255E2552982EAA/4C0C0AB95472652005263A35EB2CBB57

https://www.imgix.com
http://www.sitepoint.com/can-svg-save-fat-png-32s

When it comes to saving images for the web when using Photoshop think carefully what purpose the image is going to serve on the website. Few images require the close attention of users and are only there for decoration; if this is the case then keep the quality of the file down to a minimum.

Try to stick to 8 bit PNGs as 24 and 32 bit PNGs can really be quite hefty in size. If you do use 32 big PNGs for its alpha transparency then you'll run into the usual IE6 problems. Avoid using the AlphaImageLoader filter to fix the problem as it will really cause the download to lag in IE6. As an alternative take a look at the jQuery PNG Fix.

Once you have you finished images then run them through Yahoo's free service, Smush It. This Yahoo application is wonderful. It utilises a number of command line tools such as Pngcrush and Gifsiclef and allows the user to shrink images without loss of quality. Smush It is now integrated with the YSlow Firebug plugin.

—-

PNG, GIF, and JPEG all have different advantages. When there is no transparency in an image, test out which file size/image quality is best between PNG, GIF, and JPEG. For large images, JPEG will almost always win for quality vs size. For small image without transparency, see which has a better file size PNG or GIF. If you decide on a GIF, be sure to play with the dither options and the lossy options. Often, you can squeeze even smaller files out of Photoshop through adjusting the output settings even further. Fo images that need to have transparency, make educated decisions on how they will be used. If they will be layered over a complex background, you may need to consider using PNG file. If background is consistent enough that the color matte of a GIF won't stand out poorly, see if the GIF file is smaller.

https://www.sitepoint.com/how-to-find-cool-quirky-copyright-free-photos-on-flickr/

References:

Everything You Need to Know About Image Compression
http://www.suburban-glory.com/blog?page=104
http://fuelyourcoding.com/10-rules-of-front-end-coding/
The Comprehensive Guide to Saving Images for the Web

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License