8 天前 / 码小生
这是第 143篇不掺水的原创，想要了解更多，请戳下方卡片关注我们吧～本文首发于政采云前端团队博客：性能优化——图片压缩、加载和格式选择 https://www.zoo.team/article/images-compress 前言相信大家都听说过 "258 原则 (https://blog.csdn.net/weixin_42139375/article/details/83001248)" ，一个网站的性能好坏很大程度上会影响到用户的体验。 在我经历的多个电商与大屏项目的优化性能的项目后，我发现图片资源的处理在网站性能优化中有着举足轻重的作用。
49 天前 / 冷星1024
大厂技术坚持周更精选好文前端实现图片压缩的背景我们都知道在“寸土寸金”的互联网时代， 速度是第一竞争力， 虽然我们的 5G 发展已经摇摇领先， 但是也经不住用户在一个网页里传很多“巨无霸”图片， 最终导致的结果就是页面“龟速”打开。..... 那么作为技术人， 当然也有一堆的解决方案， 比如： 压缩图片再上传将图片上传到图床， 利用图床压缩能力和 CDN 节点就近分发图片流式加载图片懒加载 / 预加载当然聪明的小伙伴也会将上面的方案组合， 设计更优秀的图片“提速”方案。
118 天前 / reesunhuang
目录 动态链接要解决什么问题？ 矛盾：代码段不可写 解决矛盾：增加一层间接性 示例代码 b.c a.c main.c 编译成动态链接库 动态库的依赖关系 动态库的加载过程 动态链接器加载动态库 动态库的加载地址分析 符号重定位 全局符号表 全局偏移表 GOT liba.so 动态库文件的布局 liba.so 动态库的虚拟地址 GOT 表的内部结构 反汇编 liba.so 代码 在上一篇文章中，我们一起学习了 Linux 系统中 GCC 编译器在编译可执行程序时，静态链接过程中是如何进行符号重定位的。 为了完整性，我们这篇文章来一起探索一下：动态链接过程中是如何进行符号重定位的。
131 天前 / 楼外青山
大厂技术坚持周更精选好文背景在最近观察业务表现过程中，注意到系统中图片占较大比重，但是图片的加载经常会出现空白闪烁等等的一些体验问题，部分页面如下 一些场景的加载卡顿截取 可以看到是典型的图文为主的展示页面，系统内有多处类似的场景。并且加载首屏的图片资源消耗也是非常耗时，lighthouse 对课程列表的分析结果。图片比重和大小都偏大。 因此这里做优化的收益是比较明显的能给用户和公司带来收益的。但是缺少一个系统化的优化流程。 开始之前在开始之前我们先对一些基本只是有些了解，如图片格式，什么是无损和有损压缩。
150 天前 / 昌明说
我是灰昌，分享程序员赚钱路上的点点滴滴。 Clipping Magic 是一个通过算法将图片背景删除的在线服务，九年前上线后，由于不断的出现错误，甚至一度要被作者关闭。但是后来随着一篇帖子的走红，这个服务访问人数越来越多，已经处理超过 1 亿张图片，算法越来越精准，共服务超过 20 万互联网用户。 除了免费的背景删除服务之外，还提供了自动剪切 AI，智能边缘，颜色，阴影，色偏清理等等几十种服务。Clipping Magic 采取按月订阅制，三个不同的订阅模式，不同收费标准有不同的功能范围和处理照片数量限制。
265 天前 / 公众号Python集中营
需求说明：制作一个马赛克图片，将几万张图片进行合成，每个马赛克格子的尺寸为 15x15。 完整源码在文末有说明，需要的可以去下载哈。 看一下生成的马赛克图片的效果： 需要使用到的 python 模块包如下： importcv2#pipinstallopencv-python#图像处理库 importglob#导入文件处理库 importargparse#命令行解析库 importnumpyasnp#数据处理库 fromtqdmimporttqdm#导入进度条库 fromitertoolsimportproduct#导入迭代器库 importlogging#导入日志库 设置 logging 模块日志打印。
285 天前 / 冷星1024
大家好，我是 Peter，微信朋友圈都发过吧？它支持最多发 9 张图片，所以我们也称之为九宫格 要知道发 1~9 任意数量的图片时，这些图片的排列方式可能有所不同。大体有这四种排列情况： 情况一：只有一张图，完整展示整张图 1 张图情况二：2~3 张图的情况，无法完整展示每张图，则在第一排依次排开（一排最多 3 张） 2 张图 & 3 张图情况三：4 张图的情况，无法完整展示每张图，每排 2 张图，共 2 排 4 张图情况四：5~9 张图的情况跟情况二类似，也无法完整展示每张图，每排最多 3 张图，依次排开 5 张图其实就是对不同数量的图片做了一个排版的自适应...
597 天前 / fingerQin
首页下载 APP 我用两周开发了一个图片类应用微信小程序 ( 一)fingerQin 关注赞赏支持我用两周开发了一个图片类应用微信小程序 ( 一)一个月前，我的朋友找到我说他想做一个流量类的应用微信小程序。于是它就给我推荐了几款当前流量比较可观的小程序。 经过漫长的沟通下来。我终于搞明白这兄弟的意图：想通过朋友圈吸引用户进入小程序，小程序植入微信小程序官方提供的广告来实现流量变现。 我觉得这想法不错。技术难度不大。经过整理，我们确定了这款流量应用小程序的功能如下： 图片合成器：这是每年节假日或热点事件时非常火热的功能。
785 天前 / 杨琼璞
很多场景中，您或许需要用到图片；如写文章、做设计、搞 PPT、发朋友圈诸此等等；之前有发布文章欲问美图何处寻？倾城之链有定音，介绍了大量高质量、免费美图网站；而本篇文章，将会对图片工具网站做下分享；您可以借助这些工具，除了对已有图片修改尺寸、无损压缩 / 放大、下载、智能抠图等，还能轻松设计出诸如海报，邀请函，微信图片，Banner，简历、代码截图等；堪称超级实用，您值得拥有。 本文首发于个人主博客：超实用图片工具网站，值得典藏 | 晚晴幽草轩。 微注：以下分享的诸多推荐工具及评语，皆来自个人打造的应用：倾城之链。
816 天前 / openio
为了让大家更好地学习 Pipcook 和机器学习，我们准备了实战系列教程，会分别从前端组件识别、图片风格迁移、AI 作诗以及博客自动分类，这几个具体示例来讲解如何在我们日常开发中使用 Pipcook，如果需要了解 Pipcook 1.0，请阅读文章AI JavaScript, Pipcook 1.0。 开源地址：https://github.com/alibaba/pipcook 背景 您是否在前端业务中遇到过这样的场景：手中有一些图片，您想有一种自动的方式来识别这些图片这个图片里都包含哪些组件，这些组件都在图片的什么位置，属于哪种类型的组件，这种类型的任务一般在深度学习领域称为目标检测。
822 天前 / lmjben
今天来实现一个图片碎片化加载效果，效果如下： 碎片化加载我们分为 3 个步骤来实现： 定义 html 结构拆分图片编写动画函数定义 html 结构 这里只需要一个 canvas 元素就可以了。 拆分图片 这个例子中，我们将图片按照 10 行 10 列的网格，拆分成 100 个小碎片，这样就可以对每一个小碎片独立渲染了。 letimage=newImage(); image.src="https://cdn.yinhengli.com/canvas-example.jpeg"; letboxWidth,boxHeight; //拆分成10行，10列 letrows=10, columns=20, counter=0; image.onload=function(){ //计算每一行...
870 天前 / mzlogin
我习惯使用 Vim 编辑 Markdown 文件，一直存在一个痛点就是粘贴图片很不方便。 前后对比我以前常用的操作流程： 复制图片 / 截图； 在保存图片对话框里一层层点选保存路径，输入文件名保存； 回到 Vim 里，手动输入引用图片的表达式。 第 2 步和第 3 步是比较痛苦的，尤其是文件路径比较深的时候，可能要点选好几次。 最近偶然发现的一个外国小伙写的插件 md-img-paste.vim[1]，能比较好地解决这个问题。现在的操作流程： 复制图片 / 截图； 在 Vim 里输入图片相对路径，自动保存图片并插入引用图片的表达式。
914 天前 / 前端De早读课
前言 利用技术解决效能问题，这种小应用的思路很不错。今日早读文章由流利说 @ 张纯、@ 郭帅兵授权分享。 @ 张纯，流利说前端开发 2019 加入流利说，主要负责流利说 APP 商业化前端开发工作。@ 郭帅兵 流利说前端开发 2017 年加入流利说，主要负责流利阅读小程序和商业化前端开发工作 正文从这开始～～ 背景介绍流利说是一家比较重内容的公司。围绕着整个英语学习，从渠道投放，商业转化，课程内容，分享等都充满了各种内容生成环节。其中使用图片表达又是所有内容中最直接应用最广泛的。
983 天前 / 承香墨影
题图 by @rayyu 一. 序图片一直是 App 中吃内存的大户，当我们做内存优化的时候，永远也绕不开对图片内存的优化。可能你很多其他方案一起上，最后还不如对 Bitmap 进行常规优化来的有效。 对图片的优化前提是对图片操作的收拢，这样我们才可以做整体的策略控制。例如对于一些低端设备，我们可以将图片格式从 ARGB_8888 变为 RGB_565，这样一个简单的调整，可以让图片内存的占用减少一半；又例如在适当的时机，主动回收掉一些图片缓存，避免被 Low Memory Kiiler 盯上。 但是这一切的前提，就是我们要收拢对图片的操作。
1009 天前 / 空巢搬砖仔
Web 图片优化指南2019-11-19Adrian Bece原作，授权 New Frontend翻译。 未优化的图片是影响网站性能的主要因素之一，尤其会影响初次加载。取决于图像的分辨率和画质，图片可能占据整个网站流量的 70%. 生产环境出现未优化的图片并显著影响初次加载速度的现象还是挺常见的。缺乏经验的开发者通常没有意识到这一潜在问题，也不了解各种优化图片的工具和方法。 本文的目标是介绍优化 web 图片的主要工具和方法。 计算 JPG 文件尺寸未压缩图片的尺寸很容易计算，只需将图片的长宽相乘（px 值），再乘以 3 字节（因为 RGB 色彩系统使用 24 个位元）。