[ad_1] Gutenberg 14.3 was released this week with drag-and-drop improvements for both the block editor and the site editor. Automattic-sponsored contributor Aaron Robertshaw published a video, illustrating how the block editor now supports dropping an image onto an empty paragraph block to replace it with a new Image block. The site editor has also added drag-and-drop capabilities for blocks and patterns in the new zoomed-out view, which was added in Gutenberg version 14.1. It zooms out to focus on building and composing patterns, allowing users to move sections around without affecting the inner blocks. It can be enabled under “Experiments.” In 14.3, users can drag blocks and patterns right onto the canvas with an overhead view that makes it easy to place in between existing blocks. video source: Gutenberg PR #44402 This version also introduces new support for alt + arrow keyboard combinations for navigating blocks. Robertshaw explained how they work: For example, if your cursor is towards the end of a long paragraph, you can quickly press alt + up arrow to move to the beginning of that paragraph. If you are already at the beginning of a text block, you’ll move to the start of the previous paragraph. Similarly, alt + down arrow will move you to the end of a block of text. The Styles typography controls have been updated to include the Tools Panels that users have available in the Block Settings interface. This makes the experience more consistent and expands the capabilities to allow for resetting the values. This release includes dozens of fixes and improvements to design tools, components, the Block API, and more. Check out the changelog in the announcement post for the full list of updates. Gutenberg 14.3 will not be included in the upcoming WordPress 6.1 release but will be rolled into core the next time around. If you want these features now, you can install the Gutenberg plugin. [ad_2] Source link
Continue readingTag Archives: Image
7 Best WordPress Image Optimization Plugins and Tools (Tested) – 2022
[ad_1] Searching for the best image optimization plugins or tools to speed up your WordPress site’s images? By now, you probably know the importance of website loading times and page speed. The internet has been abuzz with news about how loading times impact your bottom line and Google has been pretty clear about favoring fast loading websites and blogs. While there are many ways to optimize the speed of your website, one of the first places you should look to make improvements are the images you use. To help you with optimizing your images, in this post we’ll take a look at seven best image optimization tools and compare their results with real testing. We’ll start by sharing details for each image optimization tool along with its individual performance. At the end of the post, we’ll put everything together into a few different comparison tables so that you can easily see how the different tools and plugins stack up. 📚 Here’s everything that you’ll find in this post: Seven Best WordPress Image Optimization Plugins and Tools: Individual Details and Performance Below, we’ll share details for the seven best WordPress image optimization tools and plugins. Beyond sharing basic features and pricing information, we also tested each plugin on this list by seeing how well it was able to optimize the same two test images using both lossless and lossy compression: Both images are 1280 px wide and we’re sharing data for the full size image (rather than one of the smaller thumbnail sizes that WordPress automatically generates). We also did not convert them to WebP, which is a feature that a lot of image optimization tools offer. Instead, we kept them in their original image formats. Of course, beyond the file size savings themselves, you also might be concerned with the quality of the compressed images. To my eye, all of these tools resulted in more or less the same image quality, so I don’t think it needs to play a role in your decision: For lossless compression, there was no difference in quality (which is the definition of lossless). For lossy compression, there was a small reduction in quality, but it was very difficult to notice and I didn’t see any noticeably different results between the different tools in terms of image quality. 1. EWWW Image Optimizer When you install and activate EWWW Image Optimizer, it will automatically optimize any images that you upload to your website. It can optimize JPGs, PNGs, GIFs, and PDFs and it also allows you to go through your existing media library and optimize already uploaded images. The plugin can also convert images to the best format if you decide to enable this option in the plugin settings. One of the benefits of EWWW Image Optimizer is that it allows you to optimize images using their specialized servers to provide both lossy and lossless compression. In short, this means that image optimization won’t cause additional load on your server. The paid service also offers other enhancements such as a built-in CDN, WebP conversion, automatic scaling, and more. Alternatively, you can do the processing on your own server for free, but you can only access lossless compression if you use your server. Pricing: If you use your local server for processing, you get unlimited usage for free. However, this only supports lossless compression, which is a pretty big limitation. Paid plans start at $7 per month for unlimited image optimizations for a single site, along with a built-in CDN. 👉 Use our exclusive EWWW Image Optimizer coupon to get 15% OFF. How did the plugin do? Image File Type Compression Type Original Size Reduced Size Percentage Reduced JPG Lossless 271 KB 271 KB 0% JPG Lossy 271 KB 151 KB 44.2% PNG Lossless 416 KB N/A* N/A* PNG Lossy 416 KB 105 KB 74.8% *I couldn’t get EWWW Image Optimizer to run a lossless PNG compression for some reason. Even if I chose lossless, it still used lossy compression. 2. Smush Image Compression and Optimization Developed by WPMU Dev, Smush Image Compression and Optimization plugin is available in both free and premium versions. After you install the plugin, you’ll be taken to the plugin settings page where you can see how many images were already optimized and configure which thumbnail sizes you want the plugin to optimize, whether images should be resized, and more. The free version of the plugin lets you optimize unlimited images, but each individual image cannot exceed 5 MB. The plugin can optimize your JPEG, GIF and PNG images individually or you can use their bulk optimize feature. In addition, you can optimize image files that are uploaded outside your media library such as images stored in your theme files. Pricing: To remove the 5 MB limit for individual images and access other paid features such as CDN image delivery, WebP conversion, and more, the paid plans start at $7.50 per month. How did the plugin do? Image File Type Compression Type Original Size Reduced Size Percentage Reduced JPG Lossless 271 KB 268 KB 1% JPG Lossy 271 KB 224 KB 17.5% PNG Lossless 416 KB 320 KB 23% PNG Lossy 416 KB 74 KB 82.3% 3. ShortPixel ShortPixel is a freemium plugin that can compress JPGs, PNGs, and GIFs. After the plugin installation, you will prompted to sign up for an API key by providing your email address. The plugin will automatically optimize every uploaded image and you can also bulk optimize images already present in your media library. The plugin supports both lossy and lossless compression methods. It will also optimize all the thumbnails created by WordPress, remove EXIF data, set a maximum resolution for your images, and save a backup of every image you upload to a new folder. Other useful features include the following: Conversion to WebP or AVIF formats for smaller file sizings. Retina image serving. PDF optimization in addition to images. The original ShortPixel plugin optimizes the images on your site’s server. However, there’s also
Continue readingJetpack 9.9 Released With a Refreshed Image Gallery Carousel – WP Tavern
[ad_1] Today, Automattic released version 9.9 of its popular Jetpack plugin. The development team improved the modal animation and transition speed for the Instant Search module and added the Social Preview panel to the pre-publish sidebar. However, the most notable user-facing update was a refresh of its Carousel feature. The module creates a fullscreen overlay gallery of a post’s images once one is clicked. Users can enable this feature via the Jetpack > Settings > Writing page in the WordPress admin. Users can also turn on the display of EXIF data and the media attachment commenting form. Jetpack Carousel handles Image and Gallery blocks a bit differently. Regardless of whether Gallery images are linked or not, they will always be included in the image carousel when clicked. However, only Image blocks that specifically link to the attachment page are added. I have never much cared for the Jetpack Carousel feature. There were always prettier image-overlay, lightbox-type solutions out in the wild. We use the plugin here at WP Tavern, so it is just something I have learned to live with. There was no sense in installing yet another plugin when we were already using the massive mono-project to run many other features on the site. And, it generally got the job done. However, today, I can finally say that I am happy with the implementation. It is cleaner, offers a larger viewing area for individual images, and tucks unnecessary bits away for the average user. The following is a screenshot of the carousel in all its fullscreen wonder: Jetpack carousel in version 9.9. For comparison, here is what the same image slide looks like in Jetpack 9.8.1: Jetpack carousel in version 9.8.1. In the new version, the image metadata and commenting form are hidden by default. The user must click the info or comment icon buttons to slide each section open. This is a better implementation because it decreases the noise in the carousel while still making the features available for those who want them. Image metadata in the carousel. Overall, I am enjoying this update. Swiping and scrolling through the gallery feels smoother. I would love for WordPress to bring a standard set of functions and blocks for displaying media metadata to the development community. Every plugin and theme author who wants to showcase that info must build a custom system for their projects, such as formatting aperture, shutter speed, and focal length. The following is the output of an image attachment page from a theme I have worked on: Custom theme image info. There is no reason that the theme and Jetpack should be working with custom wrappers for the metadata. WordPress stores EXIF and ID3 tags automatically. It just does not expose them to developers in any meaningful way. Like this: Like Loading… [ad_2] Source link
Continue readingCreate Per-Post Social Media Images With the Social Image Generator WordPress Plugin – WordPress Tavern
[ad_1] It was a bit of a low-key announcement when Daniel Post introduced Social Image Generator to the world in February via tweet. But, when you get repped by Chris Coyier of CSS-Tricks and the co-founder of WordPress uses your plugin (come on, Matt, set a default image), it means your product is on the right track. I am not easily impressed by every new plugin to fly across my metaphorical desk. I probably install at least a couple dozen every week. Sometimes, I do so because something looks handy on the surface, and I want to see if I can find some use for it. Other times, I think it might be worth sharing with Tavern readers. More often than not, I consider most of them cringeworthy. I have high standards. As I chatted with Post about this new plugin, I was excited enough to call Social Image Generator one of those OMG-where-have-you-been? types of plugins. You will not hear that from me often. Post quit his day job to venture out earlier this year, creating his one-man WordPress agency named Posty Studio. Social Image Generator is its first product. “I kept seeing tutorials on my Twitter feed on how to automatically generate images for your social media posts, but unfortunately, they all used a similar approach (Node.js) that just wasn’t suitable for WordPress,” said Post of the inspiration for the plugin. “This got me thinking: would it be possible to make this for WordPress? I started playing around with image generation in PHP, and when I got my proof of concept working, I realized that this might actually be something I should pursue.” In our chat over Slack, we actually saw the plugin in action. As he shared Coyier’s article from CSS-Tricks, the chatting platform displayed the social image in real-time. Auto-generated image appearing via Slack. Maybe it was fate. Maybe Post knew it would happen and thought it would be a good idea to show off his work as we talked about his project. Either way, it was enough to impress the writer who is unafraid to call your plugin a dumpster fire if he smells smoke. Post seems to be hitting all the right notes with this commercial plugin. It has a slew of features built into version 1.x, which we will get to shortly. It is dead simple to use. It is something nearly any website owner needs, assuming they want to share their content via social networks. And, with a $39/year starting price, it is not an overly expensive product for those on the fence about buying. How the Plugin Works After installing and activating Social Image Generator, users are taken to the plugin’s settings screen. Other than a license key field and a button for clearing the image cache, most users will want to dive straight into the template editor. At the moment, the plugin includes 23 templates. From Twenty Seventeen to Twenty Twenty-One, each of the last four default WordPress themes also has a dedicated template. After selecting one, users can customize the colors for the logo, post title, and more — the amount of customization depends on the chosen template. Browsing the plugin’s templates. Aside from selecting colors, users can choose between various logo and text options. They can also upload a default image for posts without featured images. Editing a template from Social Image Generator. When it comes time to publish, the plugin adds a meta box to the post sidebar. Users can further customize their social image and text on a per-post basis. Social image preview box on the post-editing screen. Once published, the plugin creates an image that will appear when a post is shared on social media. On the whole, there is a ton that anyone can do with the built-in templates. There is also an API for developers to create their own. For a first outing, it is a robust offering. However, there is so much more that can be done to make the plugin more flexible. Version 2.0 and Beyond Thus far, Post said he has received tons of positive feedback along with feature requests. Primarily, users are asking for more customization options and the ability to create and use multiple templates. These are the focus areas for the next version. With a 1,718% increase in revenue in the past month, it seems he might have the initial financial backing to invest in them. “I’ve started building a completely overhauled drag-n-drop editor, which will allow you to create basically any custom image you want,” he said. “It will be heavily inspired by the block editor, and I want to keep the UI and UX as close to the block editor as possible.” The new template editor would allow users to create multiple layers, an idea similar to how Photoshop, Gimp, and other image-editing software works. The difference would be that it can pull in data from WordPress. “For example, an ‘Image’ layer will have options such as height/width and positioning, as well as some stylistic options like color filters and gradient overlays,” said Post. “A ‘Text’ layer can be any font, color, and size and can show predefined options (post title, date, etc.) or whatever you want. You can add an infinite number of layers and order them however you’d like.” He seems excited about opening up new possibilities with an overhauled editor. Users could potentially create social image templates for each post type. A custom layer might pull in post metadata, such as displaying product pricing or ratings from eCommerce plugins like WooCommerce. “The prebuilt templates will still exist, similar to Block Patterns in the block editor,” said the plugin developer. “They will, however, serve as a starting point rather than the final product. I’ll also try to implement theme styling as much as possible. “The possibilities here are so endless, and I’m incredibly excited for this next part.” Like this: Like Loading… [ad_2] Source link
Continue reading