adobe

Optimizing Images in WordPress to Improve Performance and SEO

Posted on Updated on

At 11:20am on 4/29/2018, I attended Optimizing Images in WordPress to Improve Performance and SEO, Presented by Steve Mortiboy of Pressable, at the 2018 Raleigh Wordcamp Convention in the Engineering Building I of North Carolina State University in Raleigh, NC.

Optimizing Images in WordPress to Improve Performance and SEO

This session is really aimed at beginners who want to understand how to leverage images to improve their website. I’m hoping we’ll take a hands-on look at things you should do when adding images and common mistakes to avoid that could negatively impact your site, especially with search engines.

Intended Audience:  Beginners

What we’re supposed to cover:

We need to think about performance, image optimazation, SEO, performance, etc.

Embedding Images

We’re doing this without proper sizes, etc. and we don’t really think about how it might affect performance, or adjust the layout.

Considerations

JPG, PNG, GIF. We cover this material, and its good content

File Size

this is the biggest problem. Taking an image from our phone or other device is huge, 10MB or more. High def is even worse. Before uploading into wordpress, we’ll want to adjust it. The smaller the better, with 100KB or smaller as ideal.

Dimensions

A 600px content area will not need 1000px width content. in Settings, Media you can adjust your content sizes. Your media may not convert to those sizes, even if supposed to. WordPresss does not know the content, it just crops the images as it feels the data tells it. Beware oversized images. Editing an image on the page allows you to set custom sizes

Image Resolution

DPI and PPI only apply to printing. It do affect image size in the file however. There is a myth of 72dpi. we don’t need to do that in our websites.

Images per page. The more images appear on a page, the more you need ot consider file sizes and page load times. Remember your mobile device users. Consider using a gallery or slideshow such as:

  • JetPack Tiles Galleries
  • JetPack Carousel

Do not load the image initially. Load only when requested.

Image Linking

Where should we link an image embedded? Should it load the media file. attachment page, custome URL, or nothing? LInking the media file should be reconsidered. That just loads the image in the browser. Google following that link only sees the file, no information, and the user must push the back button.

Consider instead an attachment page. This is an older forgotten page type. An attachment page is a wordpress page. You can add these theme pages with styles, links, back buttons, exit data, etc. It allows information such as MetaData to provide richer content to our customers in ways such as location and date. It allows us to add Meta tags, SEO, anything you’d like. You may not know you’re even on a page only for a photo. Google will index that page.

Custom URL is useful for custom button creators, etc.  Uploading a button linking to a particular page (such as contact us) allows you to create linkable, custom pages which can also be indexed.

An item with no reason to click on an image, you should just select none.

Image ownership

This is a big issue over the years. Big companies are seeking out smaller companies to Quash. Just because you found it doesn’t mean you can use it. There are different types of license. Consider using the Creative Commons Search Tools at: https://search.creativecommons.org

Stock Images

For the love of Pete, don’t do it. They’ve been done to death. Take your own photos, be real and be genuine. It brings nothing to the visitor to be seeing general images.

Optimization

Lossless compression reduces file size without losing quality. Lossy compression reduces file size with possible loss of quality. Your goal is to reduce a web image to 100KB or less. Granted, it always depends on the original image.

  1. Photoshop
  2. GIMP
  3. Imageoptim.com for mac
  4. tinyPNG at tinyPNG.com
  5. jpegmini at jpegmini.com
  6. EWWW image optimizer plugin

RETINA IMAGES

Retina schreens and displays are common.

Consider

  • using plugins, WPRetina 2x
  • using SVG
  • HTML method src=”image-800×600.jpg” width=”400″ height=”300″

Image SEO

1000+ line pages are boring. Images are sticky, they keep us there and easily tell us if we’re in the right place. Keep the visitor on the site, but also keep the visitor finding the site. Make your imagery search-engine friendly.

  1. Image Filename: DSC_005612987 doesn’t tell us anything. Rename your images to something which is helpful for search engines. You cannot rename the file once its uploaded because the images is posted in the server. If you’re using the same file on different pages, upload the same file with a different name. It may look the same, but it will be seen as different by search engines and computers which matter.
  2. Title attribute. Set the title and alt text to the content of the page, not the image. rather than describing the image, link it to the page and make it easier to find the page
  3. Alt text. Required for many governmental website.
  4. attachment page. Add the SEO title, the SEO description
  5. include images in your XML sitemap. AllInOneSEO automatically includes these items in the XML sitemap

Images for social media

Cathcing people’s information is really important, and a good high-quality image can really get you that click-through. Use a plugin to set that image. Create a custom image which is properly sized just for social media. Social media images can be shared and cached. It may only be for 7 days (facebook). Twitter and LinkedIn make it difficult to clear that cache.

Image sizes for social media

  • facebook images 1200px x 630px
  • twitter images 900px x 450px
  • pinterest images 236p x scaled height
  • instagram images 1080px x 1080px

Image Caching and CDN

  • JetPack Photon
  • WP Super Cache
  • W3 Total Cache
  • MaxCDN
  • Amazon CloudFront

Test using Google PageSpeed Insights:  https://developers.google.com/speed/pagespeed/insights

 

 


Steve Mortiboy

Steve Mortiboy is the COO and Service Delivery Manager for Semper Plugins. He leads the team that develops plugins such as All in One SEO Pack. He has been working with WordPress for over 8 years and devotes much of his time to helping people get the most from WordPress. He is also one of the co-organizers of WordCamp Raleigh and the Raleigh WordPress Meetup Group. When not hard at work he’s working on DIY projects at home or off traveling.

Advertisements

I Know I should use SVGs, But I Don’t Know How

Posted on Updated on

At 9:15am on 4/28/2018, I attended I Know I should use SVGs, But I Don’t Know How, Presented by Colin Lord of Pressable, at the 2018 Raleigh Wordcamp Convention in the Engineering Building II of North Carolina State University in Raleigh, NC.

I Know I should use SVGs, But I Don’t Know How

Using SVG images are a lot like going to the gym. We all know we *should* be using them when we write our front end code, but we end up putting it off for another project down the road. And when SVGs are used, they are often implemented in a way that doesn’t unlock their full potential.

During this presentation, I hope we’ll discuss the best practices for SVG implementation and how they vary depending on the size and audience of your site. Perhaps we will also go through what an SVG sprite is, how to create one, and why they’re awesome. According to Advanced Web Ranking.com, only 3% of sites on the internet use this technique…but 97% of browsers support it!

After this talk, I hope to be ready to work on SVGs effectively.

Everything we’re talking about will work on wordpress 4 & 5

The slides will be available. The Coke bottle is an SVG, and it means there are notes in the slides

These Image types have been available over the last 10 years.

 

SVG Compliment the other image types. You won’t stop using the others. there are 3 types we use, but there’s room for a 4th.

SVG files are smaller than jpg, png, gif

The logo for this company is either 0.5kb or 12kb depending on file type. That’s a dramatic savings on file type. Also,they are HDPI ready. They don’t have to be saved as a 2x, 3x, and you are future saving as well.

At a larger size, there is no difference in quality, but this is not true with bitmap graphics. Vector graphics do not increase in file size and no loss in quality. This is opposite with raster graphics.

 

What’s the browser support like?

the only red column is IE8. Unless you are worried about old IE versions, it works across the board, and works with CSS grid. They are easy and efficient to animate, giving more framerate and can manipulate it with CSS and javaScript. One SVG with javascript inside. Rather than exporting 365 graphics, a single SVG can be used for a whole calendar.

Chris Coyier Practical SVG is a fine book. This book is about creation, export, advocation on SVG at the 4th graphic type.

 

How do we use them correctly and efficiently?

there are ways to use this correctly and incorrectly. Photoshop can export anything as an SVG. Bitmaps (raster) is not a good SVG image. Once exported how can you use them:

You can treat it like any other image, and it will be treated the same way. Its pretty simple to put them into a webpage. The logo has size advantage and will be used well on any

Image is not loaded into the DOM. It just sees the size as a square. SVG at its core is just code, so you can load it into the dom

This gibberish all came out of illustrator. SVG vectors are really just a lot of math. How do we get on this? This is horribly against several brand guidelines. You can use any CSS, color change, states, etc. You can open the SVG in any text editor, and then post this item into the HTML

It is clear why to use that: there is so much to take advantage of.

rather than consider how much it is to deal with those items, this would be ridonkulous. To fix that, we use the SVG Sprite.

These are less important and people have pushed them out of style. It was tedious and not fun. You create and image window and long background image. It slides around as needed.

Here’s a basic example:

children inside the SVG sprite are symbols, and we give a name or ID inside for each. we use the name SVG- at the front so that we are not confused with it as a CSS Class. The viewbox here is the spacing. The title tag may or may not come with titles out of illustrator. The main takeaway is that the title may be something you wish to add yourself.

An SVG sprite is something we’re not displaying, but we’re putting symbols in in the code.

CLient logo, search and star are being used here. top images are at bottom of <header.php> file. Stars are only on the profile pages.

Social media icons can use a single sprite. You only need to link to it a single time.

this is all relegated to a file (erb?) which can be somewhere on the page

There are more ways, but these are 4 easy ones which we can use. There are more which can be used and they don’t always work well, such as SVG Injector

WIth this, we load the library. Anywhere we use Inject-Me class, the Image.svg is removed and the new items are added in the place at a browser and server level. The problem, it loads the image twice. First it loads the page, loads the javascript, loads the images again. That means we see the images show up, remove, show up again.

If the client saw it, that’s bad. Also not a good performance trick. Of the 4 examples we’ve discussed, there hasn’t been a time when the materials didn’t work properly.

Use FontAwesome. Load it into your site. Use them in your site. The iconset is fantastic.

Look at the material here. The HTML method (97% of use) has the most red X in them. Before you go down that road, its how many people use it, but its very, very limited.

 

The takeaway here: There’s a place for a 4th file type here.

Slides at bit.ly/wcraleigh-svg

 

 

The Logitech Spotlight (works with bluetooth and also dongle) was used in this presentation, and it was fantastic!

Exporting from illustrator?

Use the web-optimized version so that you keep things clean and clear

Colin Lord

Colin Lord is a Senior Front End Developer for Modea in Blacksburg, Virginia. He has spent the last three years working in the healthcare industry for the Vanderbilt University Medical System, the Duke University Health System, and Carilion Clinic. Before that, he spent time in the music industry building sites for artists like Brad Paisley, Garth Brooks, Imagine Dragons, and The Band Perry. Other clients that have crossed his path are Verizon Wireless, ADT Home Security and DirecTV.

Visual Communication Using Adobe Photoshop CC 2015 ACA Certification Achieved!

Posted on

Visual Communication Using Adobe Photoshop CC 2015 ACA Certification Achieved!

In the middle of the NCCIA conference, I had the opportunity to take a scheduled examination. The Adobe Certified Associate (ACA) certification allows you to demonstrate proficiency in Adobe digital communications tools. Become a Certified Associate and you will stand apart from your peers, boost your confidence, and expand your career opportunities.

The Visual Communication Using Adobe Photoshop exam validates skills in communication corresponding to Photoshop software. Adobe conducted research to identify the foundational skills needed to effectively communicate using digital media tools. Based on feedback from educators, design professionals, businesses, and educational institutions around the world, the objectives cover skill expectations for professional visual communication.

 

The following skills were assessed on the Visual Communication Using Adobe Photoshop exam:

  • Domain 1.0 Setting Project Requirements
    • 1.1 Identify the purpose, audience, and audience needs for preparing images.
    • 1.2 Demonstrate knowledge of standard copyright rules for images and image use.
    • 1.3 Demonstrate knowledge of project management tasks and responsibilities.
    • 1.4 Communicate with others (such as peers and clients) about design plans.
  • Domain 2.0 Identifying Design Elements When Preparing Images
    • 2.1 Demonstrate knowledge of image resolution, image size, and image file formats for web, video, and print.
    • 2.2 Demonstrate knowledge of design principles, elements, and image composition.
    • 2.3 Demonstrate knowledge of typography.
    • 2.4 Demonstrate knowledge of color correction using Photoshop.
    • 2.5 Demonstrate knowledge of image-generating devices, their resulting image types, and how to access resulting images in Photoshop.
    • 2.6 Understand key terminology when working with digital images.
  • Domain 3.0 Understanding Adobe Photoshop
    • 3.1 Identify elements of the Photoshop user interface and demonstrate knowledge of their functions.
    • 3.2 Demonstrate knowledge of layers and masks.
    • 3.3 Demonstrate knowledge of importing, exporting, organizing, and saving.
    • 3.4 Demonstrate knowledge of producing and reusing images.
    • 3.5 Demonstrate an understanding of and select the appropriate features and options required to implement a color management workflow.
  • Domain 4.0 Manipulating Images by Using Adobe Photoshop
    • 4.1 Demonstrate knowledge of working with selections.
    • 4.2 Use Photoshop guides and rulers.
    • 4.3 Transform images.
    • 4.4 Adjust or correct the tonal range, color, or distortions of an image.
    • 4.5 Demonstrate knowledge of retouching and blending images.
    • 4.6 Demonstrate knowledge of drawing and painting.
    • 4.7 Demonstrate knowledge of type.
    • 4.8 Demonstrate knowledge of filters.
  • Domain 5.0 Publishing Digital Images by Using Adobe Photoshop
    • 5.1 Demonstrate knowledge of preparing images for web, print, and video.

Adobe Education Exchange: Trendsetter Badge

Posted on Updated on

Tyler Dockery; Adobe Education Exchange Trendsetter as recognized by AdobeAdobe Education Exchange: Trendsetter Badge

“As a contributing member of the Adobe Education Exchange, Tyler Dockery has received visible recognition for his level of commitment and participation. Adobe is proud to feature a leaderboard function and badge recognition to members who’s mission is to serve the community of educators by maintaining a high level of activity.”

I am an ongoing contributor to Adobe’s Education Exchange. In an effort to show milestones and fulfillment as part of this community, Adobe provides rewards and achievements in the form of badges. This badge was awarded for achieving a score of 4,501 points within Adobe EDEX.com for contributions to the online education community within the Adobe Social Community. It represents your willingness to contribute and collaborate as a member of the Adobe Education Exchange. I have no plan to stop anytime soon. 🙂

Adobe Education Exchange: Author Badge

Posted on Updated on

Tyler Dockery; Celebrated Author as recognized by AdobeAdobe Education Exchange: Author Badge

“As a contributing member of the Adobe Education Exchange, Tyler Dockery has received visible recognition for his level of commitment and participation. Adobe is proud to feature a leaderboard function and badge recognition to members who’s mission is to serve the community of educators by maintaining a high level of activity.”

I am an ongoing contributor to Adobe’s Education Exchange. In an effort to show milestones and fulfillment as part of this community, Adobe provides rewards and achievements in the form of badges. This badge was awarded for creating a minimum of 5 online teaching resources, and giving a firm ongoing commitment to take part in the education of others with Adobe Products and a commitment within the Adobe Social Community. It represents your willingness to contribute and collaborate as a member of the Adobe Education Exchange. I do not plan to stop anytime soon 🙂

Adobe Education Exchange: Highest Rating Badge

Posted on Updated on

Tyler Dockery; Highly Rated contributer as recognized by AdobeAdobe Education Exchange: Highest Rating Badge

“As a contributing member of the Adobe Education Exchange, Tyler Dockery has received visible recognition for his level of commitment and participation. Adobe is proud to feature a leaderboard function and badge recognition to members who’s mission is to serve the community of educators by maintaining a high level of activity.”

I am an ongoing contributor to Adobe’s Education Exchange. In an effort to show milestones and fulfillment as part of this community, Adobe provides rewards and achievements in the form of badges. This badge was awarded for creating 20+ items with a 4-star rating within the Adobe Social Community. It represents your willingness to contribute and collaborate as a member of the Adobe Education Exchange. I do not plan to stop anytime soon 🙂

Adobe Education Exchange: Adobe Campus Leader Badge

Posted on Updated on

Tyler Dockery has completed Adobe Campus Leader for Wake Technical Community College recognition with adobeAdobe Education Exchange: Adobe Campus Leader Badge

“As a contributing member of the Adobe Education Exchange, Tyler Dockery has received visible recognition for his level of commitment and participation. Adobe is proud to feature a leaderboard function and badge recognition to members who’s mission is to serve the community of educators by maintaining a high level of activity.”

I am an ongoing contributor to Adobe’s Education Exchange. In an effort to show milestones and fulfillment as part of this community, Adobe provides rewards and achievements in the form of badges. This badge was awarded for exemplifying the best of Adobe Product understanding, an ongoing commitment to take part in the education of others with Adobe Products, and a commitment within the Adobe Social Community. It represents your willingness to contribute and collaborate as a member of the Adobe Education Exchange. I do not plan to stop anytime soon 🙂